Remove non-material themes

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

@@ -7,9 +7,7 @@
       [matRippleUnbounded]="true"
       [matRippleCentered]="true"
       (click)="toggleSidebar()"
-    >
-      <nb-icon [icon]="(materialTheme$ | async) ? 'menu-outline' : 'menu-2-outline'"></nb-icon>
-    </a>
+    ><nb-icon icon="menu-outline"></nb-icon></a>
     <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
   </div>
   <nb-select

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

@@ -19,6 +19,18 @@
     align-content: center;
   }
 
+  ::ng-deep {
+    nb-actions, .logo-container {
+      nb-icon {
+        color: nb-theme(color-basic-100) !important;
+      }
+    }
+
+    .select-button {
+      background-color: nb-theme(background-basic-color-3) !important;
+    }
+  }
+
   nb-user {
     cursor: pointer;
   }

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

@@ -4,7 +4,7 @@ import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeServ
 import { UserData } from '../../../@core/data/users';
 import { LayoutService } from '../../../@core/utils';
 import { map, takeUntil } from 'rxjs/operators';
-import { Subject, Observable } from 'rxjs';
+import { Subject } from 'rxjs';
 import { RippleService } from '../../../@core/utils/ripple.service';
 
 @Component({
@@ -15,39 +15,15 @@ import { RippleService } from '../../../@core/utils/ripple.service';
 export class HeaderComponent implements OnInit, OnDestroy {
 
   private destroy$: Subject<void> = new Subject<void>();
-  public readonly materialTheme$: Observable<boolean>;
   userPictureOnly: boolean = false;
   user: any;
 
-  themes = [
-    {
-      value: 'default',
-      name: 'Light',
-    },
-    {
-      value: 'dark',
-      name: 'Dark',
-    },
-    {
-      value: 'cosmic',
-      name: 'Cosmic',
-    },
-    {
-      value: 'corporate',
-      name: 'Corporate',
-    },
-    {
-      value: 'material-light',
-      name: 'Material Light',
-    },
-    {
-      value: 'material-dark',
-      name: 'Material Dark',
-    },
+  public currentTheme = 'material-light';
+  public readonly themes = [
+    { value: 'material-light', name: 'Material Light' },
+    { value: 'material-dark', name: 'Material Dark' },
   ];
 
-  currentTheme = 'default';
-
   userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
 
   public constructor(
@@ -58,13 +34,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
     private layoutService: LayoutService,
     private breakpointService: NbMediaBreakpointsService,
     private rippleService: RippleService,
-  ) {
-    this.materialTheme$ = this.themeService.onThemeChange()
-      .pipe(map(theme => {
-        const themeName: string = theme?.name || '';
-        return themeName.startsWith('material');
-      }));
-  }
+  ) {}
 
   ngOnInit() {
     this.currentTheme = this.themeService.currentTheme;

src/app/@theme/styles/_angular-material.scss

@@ -0,0 +1,15 @@
+@import '~@angular/material/theming';
+
+@mixin angular-material() {
+  @include mat-core();
+
+  @include nb-for-theme(material-dark) {
+    $custom-dark-theme: mat-dark-theme(mat-palette($mat-pink), mat-palette($mat-blue-grey));
+    @include angular-material-theme($custom-dark-theme);
+  }
+
+  @include nb-for-theme(material-light) {
+    $custom-light-theme: mat-light-theme(mat-palette($mat-indigo), mat-palette($mat-pink));
+    @include angular-material-theme($custom-light-theme);
+  }
+}

src/app/@theme/styles/material/_material-dark.scss → src/app/@theme/styles/_material-dark.scss

@@ -363,6 +363,8 @@ $theme: (
 
   font-family-primary: unquote('Roboto, sans-serif'),
 
+  layout-padding-top: 2.25rem,
+
   shadow: unquote('0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)'),
   card-shadow: shadow,
   header-shadow: unquote(
@@ -375,8 +377,6 @@ $theme: (
   footer-text-color: text-basic-color,
   footer-text-highlight-color: footer-text-color,
   sidebar-background-color: background-basic-color-2,
-  actions-icon-color: text-basic-color,
-  actions-text-color: text-basic-color,
 
   material-regular-font-weight: 400,
   menu-text-font-weight: material-regular-font-weight,
@@ -387,6 +387,7 @@ $theme: (
 
   menu-item-icon-color: rgba(255, 255, 255, 0.7),
   menu-item-icon-hover-color: rgba(255, 255, 255, 0.7),
+  menu-item-icon-margin: 0 0.5rem 0 0,
 
   menu-submenu-item-hover-background-color: rgba(255, 255, 255, 0.04),
   menu-submenu-item-active-hover-background-color: rgba(255, 255, 255, 0.1),
@@ -395,6 +396,20 @@ $theme: (
   card-border-style: none,
   card-background-color: color-basic-800,
   card-divider-color: color-basic-700,
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
+
+  select-min-width: 6rem,
+
+  slide-out-background: linear-gradient(270deg, #1f1f1f 0%, #292929 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #292929,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #292929,
 
   input-border-width: 0 0 1px 0,
   input-basic-border-color: rgba(255, 255, 255, 0.7),
@@ -493,4 +508,4 @@ $theme: (
   option-giant-text-font-weight: material-regular-font-weight
 );
 
-$nb-themes: nb-register-theme($theme, material-dark, dark);
+$nb-themes: nb-register-theme($theme, material-dark, default);

src/app/@theme/styles/material/_material-light.scss → src/app/@theme/styles/_material-light.scss

@@ -363,6 +363,8 @@ $theme: (
 
   font-family-primary: unquote('Roboto, sans-serif'),
 
+  layout-padding-top: 2.25rem,
+
   shadow: unquote('0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'),
   card-shadow: shadow,
   header-shadow: unquote(
@@ -375,8 +377,6 @@ $theme: (
   footer-text-color: text-alternate-color,
   footer-text-highlight-color: footer-text-color,
   sidebar-background-color: background-basic-color-2,
-  actions-icon-color: text-alternate-color,
-  actions-text-color: text-alternate-color,
 
   menu-text-font-weight: 400,
   menu-text-color: rgba(0, 0, 0, 0.87),
@@ -386,13 +386,28 @@ $theme: (
 
   menu-item-icon-color: rgba(0, 0, 0, 0.87),
   menu-item-icon-hover-color: rgba(0, 0, 0, 0.87),
+  menu-item-icon-margin: 0 0.5rem 0 0,
 
   menu-submenu-item-hover-background-color: rgba(0, 0, 0, 0.04),
   menu-submenu-item-active-hover-background-color: rgba(0, 0, 0, 0.1),
   menu-submenu-item-active-background-color: rgba(0, 0, 0, 0.08),
 
   card-border-style: none,
   card-divider-color: color-basic-200,
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
+
+  select-min-width: 6rem,
+
+  slide-out-background: linear-gradient(270deg, #e0e0e0 0%, #ebebeb 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #ebebeb,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb,
 
   input-border-width: 0 0 1px 0,
   input-basic-border-color: rgba(0, 0, 0, 0.42),

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

@@ -12,4 +12,33 @@
   .table {
     color: nb-theme(text-basic-color) !important;
   }
+
+  nb-sidebar {
+    transition: width 0.3s;
+
+    .main-container {
+      transition: width 0.3s;
+    }
+  }
+
+  nb-card {
+    border-bottom-left-radius: 0.125rem;
+    border-bottom-right-radius: 0.125rem;
+
+    nb-card-header, .tabset {
+      background-color: nb-theme(card-divider-color);
+    }
+  }
+
+  [nbinput] {
+    font-weight: 400;
+
+    &.status-basic:focus:hover {
+      border-color: nb-theme(color-primary-focus) !important;
+    }
+  }
+
+  [nbbutton] {
+    box-shadow: none !important;
+  }
 }

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

@@ -4,6 +4,8 @@
 // themes - our custom or/and out of the box themes
 @import 'themes';
 
+@import 'angular-material';
+
 // framework component themes (styles tied to theme variables)
 @import '~@nebular/theme/styles/globals';
 @import '~@nebular/auth/styles/all';
@@ -18,18 +20,19 @@
 
 @import './layout';
 @import './overrides';
-@import './material/material';
 
 // install the framework and custom global styles
 @include nb-install() {
 
   // framework global styles
+  @include angular-material();
   @include nb-theme-global();
   @include nb-auth-global();
 
   @include ngx-layout();
   // loading progress bar
   @include ngx-pace-theme();
 
+
   @include nb-overrides();
 };