Revert "Remove non-material themes"

This reverts commit c2e319499f.

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

@@ -7,7 +7,9 @@
       [matRippleUnbounded]="true"
       [matRippleCentered]="true"
       (click)="toggleSidebar()"
-    ><nb-icon icon="menu-outline"></nb-icon></a>
+    >
+      <nb-icon [icon]="(materialTheme$ | async) ? 'menu-outline' : 'menu-2-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,18 +19,6 @@
     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 } from 'rxjs';
+import { Subject, Observable } from 'rxjs';
 import { RippleService } from '../../../@core/utils/ripple.service';
 
 @Component({
@@ -15,15 +15,39 @@ 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;
 
-  public currentTheme = 'material-light';
+  themes = [
-  public readonly themes = [
+    {
-    { value: 'material-light', name: 'Material Light' },
+      value: 'default',
-    { value: 'material-dark', name: 'Material Dark' },
+      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',
+    },
   ];
 
+  currentTheme = 'default';
+
   userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
 
   public constructor(
@@ -34,7 +58,13 @@ 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

@@ -1,15 +0,0 @@
-@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/_overrides.scss

@@ -12,33 +12,4 @@
   .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/material/_material-dark.scss

@@ -363,8 +363,6 @@ $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(
@@ -377,6 +375,8 @@ $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,7 +387,6 @@ $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),
@@ -396,20 +395,6 @@ $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),
@@ -508,4 +493,4 @@ $theme: (
   option-giant-text-font-weight: material-regular-font-weight
 );
 
-$nb-themes: nb-register-theme($theme, material-dark, default);
+$nb-themes: nb-register-theme($theme, material-dark, dark);

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

@@ -363,8 +363,6 @@ $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(
@@ -377,6 +375,8 @@ $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,7 +386,6 @@ $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),
@@ -394,20 +393,6 @@ $theme: (
 
   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/material/_material.scss

@@ -0,0 +1,57 @@
+@import '~@angular/material/theming';
+
+@include nb-install() {
+  @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);
+  }
+
+  @include nb-for-themes(material-dark, material-light) {
+    @include mat-core();
+
+    nb-layout-header {
+      .logo-container nb-icon {
+        color: nb-theme(text-control-color);
+      }
+
+      .select-button {
+        background-color: nb-theme(background-basic-color-3) !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/material/theme.material-dark.ts

@@ -10,7 +10,7 @@ const palette = {
 
 export const baseTheme: NbJSThemeOptions = {
   name: 'material-dark',
-  base: 'default',
+  base: 'dark',
   variables: {
     fontMain: 'Roboto, sans-serif',
     fontSecondary: 'Roboto, sans-serif',

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

@@ -4,8 +4,6 @@
 // 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';
@@ -20,12 +18,12 @@
 
 @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();
 
@@ -33,6 +31,5 @@
   // loading progress bar
   @include ngx-pace-theme();
 
-
   @include nb-overrides();
 };

src/app/@theme/styles/theme.corporate.ts

@@ -0,0 +1,308 @@
+import { NbJSThemeOptions, CORPORATE_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
+export const CORPORATE_THEME = {
+  name: 'corporate',
+  base: 'corporate',
+  variables: {
+    temperature: {
+      arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: '#ffa36b',
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: 'rgba(0, 0, 0, 0)',
+
+      lineBg: baseThemeVariables.primary,
+      lineShadowBlur: '0',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primaryLight,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: baseThemeVariables.bg,
+      gradTo: baseThemeVariables.bg,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: 'rgba(0, 0, 0, 0)',
+      areaGradTo: 'rgba(0, 0, 0, 0)',
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.separator,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '0',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg4,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
+      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
+      secondAreaGradTo: 'rgba(0, 0, 0, 0)',
+      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
+      thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
+      thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.success,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['65%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['63%', '92%'],
+      shadowOffsetX: '-4',
+      shadowOffsetY: '-4',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;

src/app/@theme/styles/theme.cosmic.ts

@@ -0,0 +1,308 @@
+import { NbJSThemeOptions, COSMIC_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
+export const COSMIC_THEME = {
+  name: 'cosmic',
+  base: 'cosmic',
+  variables: {
+    temperature: {
+      arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: '#ffffff',
+      thumbBorder: '#ffffff',
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['70%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border2,
+      lineShadowBlur: '14',
+      itemColor: baseThemeVariables.border2,
+      itemBorderColor: baseThemeVariables.border2,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: baseThemeVariables.border3,
+      shadowLineShadow: baseThemeVariables.border3,
+      gradFrom: baseThemeVariables.bg,
+      gradTo: baseThemeVariables.bg2,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.border2,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: baseThemeVariables.success,
+      lineGradTo: baseThemeVariables.warning,
+      lineShadow: baseThemeVariables.bg4,
+
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg3,
+      shadowLineDarkBg: baseThemeVariables.bg3,
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.border2,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '5',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '1',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg2,
+      firstAreaGradTo: baseThemeVariables.bg2,
+      firstShadowLineDarkBg: baseThemeVariables.bg2,
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
+      secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
+      secondShadowLineDarkBg: baseThemeVariables.primary,
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
+      thirdShadowLineDarkBg: baseThemeVariables.success,
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg2,
+      firstLineGradTo: baseThemeVariables.bg2,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg2,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.successLight,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['70%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['60%', '95%'],
+      shadowOffsetX: '0',
+      shadowOffsetY: '3',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;

src/app/@theme/styles/theme.dark.ts

@@ -0,0 +1,314 @@
+import { NbJSThemeOptions, DARK_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
+export const DARK_THEME = {
+  name: 'dark',
+  base: 'dark',
+  variables: {
+    temperature: {
+      arcFill: [
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border4,
+      lineShadowBlur: '1',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: baseThemeVariables.bg2,
+      gradTo: baseThemeVariables.bg2,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg2,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.separator,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '0',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
+      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
+      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
+      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
+      thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['70%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['60%', '97%'],
+      shadowOffsetX: '0',
+      shadowOffsetY: '0',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;

src/app/@theme/styles/theme.default.ts

@@ -0,0 +1,314 @@
+import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
+export const DEFAULT_THEME = {
+  name: 'default',
+  base: 'default',
+  variables: {
+    temperature: {
+      arcFill: [
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border4,
+      lineShadowBlur: '1',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: baseThemeVariables.bg2,
+      gradTo: baseThemeVariables.bg2,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg2,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.separator,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '0',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
+      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
+      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
+      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
+      thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['70%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['60%', '97%'],
+      shadowOffsetX: '0',
+      shadowOffsetY: '0',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;

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

@@ -2,5 +2,132 @@
 @import '~@nebular/theme/styles/theming';
 // @nebular out of the box themes
 @import '~@nebular/theme/styles/themes';
-@import './material-dark';
+// material themes
-@import './material-light';
+@import './material/material-dark';
+@import './material/material-light';
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  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: #f7f9fc,
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
+), default, default);
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  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: #252547,
+  slide-out-shadow-color: 2px 0 3px #29157a,
+  slide-out-shadow-color-rtl: -2px 0 3px #29157a,
+), cosmic, cosmic);
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  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, #edf1f7 0%, #e4e9f2 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
+), corporate, corporate);
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  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, #222b45 0%, #151a30 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
+), dark, dark);
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  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,
+), material-light, material-light);
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  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,
+), material-dark, material-dark);

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

@@ -35,8 +35,12 @@ import {
   ThreeColumnsLayoutComponent,
   TwoColumnsLayoutComponent,
 } from './layouts';
-import { MATERIAL_LIGHT_THEME } from './styles/theme.material-light';
+import { DEFAULT_THEME } from './styles/theme.default';
-import { MATERIAL_DARK_THEME } from './styles/theme.material-dark';
+import { COSMIC_THEME } from './styles/theme.cosmic';
+import { CORPORATE_THEME } from './styles/theme.corporate';
+import { DARK_THEME } from './styles/theme.dark';
+import { MATERIAL_LIGHT_THEME } from './styles/material/theme.material-light';
+import { MATERIAL_DARK_THEME } from './styles/material/theme.material-dark';
 
 const NB_MODULES = [
   NbLayoutModule,
@@ -80,8 +84,10 @@ export class ThemeModule {
       ngModule: ThemeModule,
       providers: [
         ...NbThemeModule.forRoot(
-          { name: 'material-light' },
+          {
-          [MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME],
+            name: 'default',
+          },
+          [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME, MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME ],
         ).providers,
       ],
     };

src/app/pages/dashboard/dashboard.component.ts

@@ -50,9 +50,34 @@ export class DashboardComponent implements OnDestroy {
   ];
 
   statusCardsByThemes: {
+    default: CardSettings[];
+    cosmic: CardSettings[];
+    corporate: CardSettings[];
+    dark: CardSettings[];
     'material-dark': CardSettings[];
     'material-light': CardSettings[];
   } = {
+    default: this.commonStatusCardsSet,
+    cosmic: this.commonStatusCardsSet,
+    corporate: [
+      {
+        ...this.lightCard,
+        type: 'warning',
+      },
+      {
+        ...this.rollerShadesCard,
+        type: 'primary',
+      },
+      {
+        ...this.wirelessAudioCard,
+        type: 'danger',
+      },
+      {
+        ...this.coffeeMakerCard,
+        type: 'info',
+      },
+    ],
+    dark: this.commonStatusCardsSet,
     'material-dark': this.commonStatusCardsSet,
     'material-light': this.commonStatusCardsSet,
   };

src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts

@@ -1,12 +1,19 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, HostBinding, OnDestroy, OnInit, Output } from '@angular/core';
 import { Location, LocationStrategy } from '@angular/common';
+import { NbThemeService } from '@nebular/theme';
+import { map, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'ngx-room-selector',
   templateUrl: './room-selector.component.html',
   styleUrls: ['./room-selector.component.scss'],
 })
-export class RoomSelectorComponent {
+export class RoomSelectorComponent implements OnInit, OnDestroy {
+
+  private destroy$ = new Subject<void>();
+  private hideGrid: boolean;
+
   @Output() select: EventEmitter<number> = new EventEmitter();
 
   selectedRoom = null;
@@ -59,10 +66,35 @@ export class RoomSelectorComponent {
     ],
   };
 
-  constructor(private location: Location, private locationStrategy: LocationStrategy) {
+  @HostBinding('style.background')
+  get background(): 'none' | null {
+    return this.hideGrid ? 'none' : null;
+  }
+
+  constructor(
+    private location: Location,
+    private locationStrategy: LocationStrategy,
+    private themeService: NbThemeService,
+  ) {
     this.selectRoom('2');
   }
 
+  ngOnInit() {
+    this.hideGrid = this.themeService.currentTheme === 'corporate';
+
+    this.themeService.onThemeChange()
+      .pipe(
+        map(({ name }) => name === 'corporate'),
+        takeUntil(this.destroy$),
+      )
+      .subscribe((hideGrid: boolean) => this.hideGrid = hideGrid);
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   private sortRooms() {
     this.sortedRooms = this.roomSvg.rooms.slice(0).sort((a, b) => {
       if (a.id === this.selectedRoom) {

src/app/pages/dashboard/rooms/rooms.component.ts

@@ -40,7 +40,7 @@ export class RoomsComponent implements OnDestroy {
       });
 
     this.themeChangeSubscription = this.themeService.onThemeChange()
-      .pipe(map(({ name }) => name === 'material-dark'))
+      .pipe(map(({ name }) => name === 'cosmic' || name === 'dark'))
       .subscribe((isDark: boolean) => this.isDarkTheme = isDark);
   }
 

src/app/pages/forms/buttons/buttons.component.html

@@ -120,7 +120,7 @@
       </nb-card-body>
     </nb-card>
 
-    <nb-card>
+    <nb-card *ngIf="materialTheme$ | async">
       <nb-card-body>
         <ngx-material-buttons></ngx-material-buttons>
       </nb-card-body>

src/app/pages/forms/buttons/buttons.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
-import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
+import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'ngx-buttons',
@@ -7,7 +9,18 @@ import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/t
   templateUrl: './buttons.component.html',
 })
 export class ButtonsComponent {
+  public constructor(private readonly themeService: NbThemeService) {
+    this.materialTheme$ = this.themeService.onThemeChange()
+      .pipe(map(theme => {
+        const themeName: string = theme?.name || '';
+        return themeName.startsWith('material');
+      }));
+  }
+
+  public readonly materialTheme$: Observable<boolean>;
+
   public readonly statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
   public readonly shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
   public readonly sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
+
 }

src/app/pages/forms/form-inputs/form-inputs.component.html

@@ -10,6 +10,10 @@
         </div>
         <input type="password" nbInput fullWidth placeholder="Password">
         <input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
+        <ng-container *ngIf="!(materialTheme$ | async)">
+          <input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
+          <input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
+        </ng-container>
         <input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
         <textarea rows="5" nbInput fullWidth shape="round"  placeholder="Text Area"></textarea>
         <input type="text" nbInput fullWidth fieldSize="small"  placeholder="Small Input">
@@ -83,7 +87,7 @@
     </nb-card>
   </div>
 </div>
-<div class="row">
+<div *ngIf="materialTheme$ | async" class="row">
   <div class="col-lg-12">
     <ngx-material-inputs></ngx-material-inputs>
   </div>

src/app/pages/forms/form-inputs/form-inputs.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'ngx-form-inputs',
@@ -6,6 +9,16 @@ import { Component } from '@angular/core';
   templateUrl: './form-inputs.component.html',
 })
 export class FormInputsComponent {
+  public constructor(private readonly themeService: NbThemeService) {
+    this.materialTheme$ = this.themeService.onThemeChange()
+      .pipe(map(theme => {
+        const themeName: string = theme?.name || '';
+        return themeName.startsWith('material');
+      }));
+  }
+
+  public readonly materialTheme$: Observable<boolean>;
+
   public starRate: number = 2;
   public heartRate: number = 4;
   public radioGroupValue: string = 'This is value 2';