Implement ripple effect for material themes

src/app/@theme/components/header/header.component.ts

@@ -5,6 +5,7 @@ import { UserData } from '../../../@core/data/users';
 import { LayoutService } from '../../../@core/utils';
 import { map, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { RippleService } from '../../../@core/utils/ripple.service';
 
 @Component({
   selector: 'ngx-header',
@@ -53,7 +54,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
               private themeService: NbThemeService,
               private userService: UserData,
               private layoutService: LayoutService,
-              private breakpointService: NbMediaBreakpointsService) {
+              private breakpointService: NbMediaBreakpointsService,
+              private rippleService: RippleService) {
   }
 
   ngOnInit() {
@@ -76,7 +78,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
         map(({ name }) => name),
         takeUntil(this.destroy$),
       )
-      .subscribe(themeName => this.currentTheme = themeName);
+      .subscribe(themeName => {
+        this.currentTheme = themeName;
+        this.rippleService.toggle(themeName?.startsWith('material'));
+      });
   }
 
   ngOnDestroy() {

src/app/@theme/styles/_ripple.scss

@@ -0,0 +1,21 @@
+@mixin ngx-ripple() {
+  .mat-ripple {
+    overflow: hidden;
+    position: relative;
+
+    &:not(:empty) {
+      transform: translateZ(0);
+    }
+  }
+
+  .mat-ripple-element {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
+    transform: scale(0);
+    // switch ripple color depending on selected theme
+    background-color: nb-theme(background-alternative-color-4);
+    opacity: .1;
+  }
+}

src/app/@theme/styles/styles.scss

@@ -18,6 +18,7 @@
 
 @import './layout';
 @import './overrides';
+@import './ripple';
 
 // install the framework and custom global styles
 @include nb-install() {
@@ -31,4 +32,5 @@
   @include ngx-pace-theme();
 
   @include nb-overrides();
+  @include ngx-ripple();
 };

src/app/@theme/theme.module.ts

@@ -1,5 +1,6 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { MatRippleModule } from '@angular/material/core';
 import {
   NbActionsModule,
   NbLayoutModule,
@@ -73,8 +74,8 @@ const PIPES = [
 ];
 
 @NgModule({
-  imports: [CommonModule, ...NB_MODULES],
-  exports: [CommonModule, ...PIPES, ...COMPONENTS],
+  imports: [CommonModule, MatRippleModule, ...NB_MODULES],
+  exports: [CommonModule, MatRippleModule, ...PIPES, ...COMPONENTS],
   declarations: [...COMPONENTS, ...PIPES],
 })
 export class ThemeModule {