Merge remote-tracking branch 'origin/master'

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

@@ -5,16 +5,7 @@
     <a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
     <div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
   </div>
-  <div class="switcher-container">
+  <ngx-theme-switcher></ngx-theme-switcher>
-    <label class="theme-switch">
-      <span class="light">Light</span>
-      <div class="switch">
-        <input type="checkbox" (change)="toggleTheme(theme.checked)" #theme>
-        <span class="slider"></span>
-      </div>
-      <span class="cosmic">Cosmic</span>
-    </label>
-  </div>
 </div>
 
 <nb-actions

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

@@ -1,5 +1,4 @@
 @import '../../styles/themes';
-@import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
 @import '~bootstrap/scss/mixins/breakpoints';
 @import '~@nebular/theme/styles/global/bootstrap/breakpoints';
 
@@ -24,13 +23,6 @@
     align-items: center;
   }
 
-  .switcher-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 50%;
-  }
-
   .control-item {
     display: block;
   }
@@ -63,86 +55,6 @@
     }
   }
 
-  .theme-switch {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    margin: 0;
-
-    & > span {
-      font-size: 1.125rem;
-      font-weight: nb-theme(font-weight-bold);
-      transition: opacity 0.3s ease;
-
-      &.light {
-        color: nb-theme(color-fg-text);
-        padding-right: 10px;
-      }
-
-      &.cosmic {
-        color: nb-theme(color-fg);
-        padding-left: 10px;
-      }
-
-      @include nb-for-theme(cosmic) {
-        &.light {
-          color: nb-theme(color-fg);
-        }
-
-        &.cosmic {
-          color: nb-theme(color-white);
-        }
-      }
-
-      &:active {
-        opacity: 0.78;
-      }
-    }
-  }
-
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 4rem;
-    height: 1.75rem;
-    margin: 0;
-
-    input {
-      display: none;
-
-      &:checked + .slider::before {
-        transform: translateX(2.25rem);
-      }
-    }
-
-    .slider {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 1.75rem;
-      background-color: nb-theme(layout-bg);
-    }
-
-    .slider::before {
-      position: absolute;
-      content: '';
-      height: 1.75rem;
-      width: 1.75rem;
-      border-radius: 50%;
-      background-color: nb-theme(color-success);
-      transition: 0.2s;
-
-      box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
-
-      @include nb-for-theme(cosmic) {
-        @include btn-hero-primary-gradient();
-      }
-    }
-  }
-
   .toggle-layout /deep/ a {
     display: block;
     text-decoration: none;
@@ -188,12 +100,6 @@
       display: none;
     }
 
-    .switcher-container {
-      .light, .cosmic {
-        display: none;
-      }
-    }
-
     nb-action:not(.toggle-layout) {
       padding: 0;
     }
@@ -203,10 +109,6 @@
     .right /deep/ {
       display: none;
     }
-
-    .switcher-container {
-      align-items: flex-end;
-    }
   }
 }
 

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

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 
-import { NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
+import { NbMenuService, NbSidebarService } from '@nebular/theme';
 import { UserService } from '../../../@core/data/users.service';
 
 @Component({
@@ -19,7 +19,6 @@ export class HeaderComponent implements OnInit {
 
   constructor(private sidebarService: NbSidebarService,
               private menuService: NbMenuService,
-              private themeService: NbThemeService,
               private userService: UserService) {
   }
 
@@ -41,8 +40,4 @@ export class HeaderComponent implements OnInit {
   goToHome() {
     this.menuService.navigateHome();
   }
-
-  toggleTheme(theme: boolean) {
-    this.themeService.changeTheme(theme ? 'cosmic' : 'default');
-  }
 }

src/app/@theme/components/index.ts

@@ -3,3 +3,4 @@ export * from './footer/footer.component';
 export * from './search-input/search-input.component';
 export * from './tiny-mce/tiny-mce.component';
 export * from './theme-settings/theme-settings.component';
+export * from './theme-switcher/theme-switcher.component';

src/app/@theme/components/theme-switcher/theme-switcher.component.scss

@@ -0,0 +1,101 @@
+@import '../../styles/themes';
+@import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+
+@include nb-install-component() {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 50%;
+
+  .theme-switch {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    margin: 0;
+
+    & > span {
+      font-size: 1.125rem;
+      font-weight: nb-theme(font-weight-bold);
+      transition: opacity 0.3s ease;
+
+      &.light {
+        color: nb-theme(color-fg-text);
+        padding-right: 10px;
+      }
+
+      &.cosmic {
+        color: nb-theme(color-fg);
+        padding-left: 10px;
+      }
+
+      @include nb-for-theme(cosmic) {
+        &.light {
+          color: nb-theme(color-fg);
+        }
+
+        &.cosmic {
+          color: nb-theme(color-white);
+        }
+      }
+
+      &:active {
+        opacity: 0.78;
+      }
+    }
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 4rem;
+    height: 1.75rem;
+    margin: 0;
+
+    input {
+      display: none;
+
+      &:checked + .slider::before {
+        transform: translateX(2.25rem);
+      }
+    }
+
+    .slider {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 1.75rem;
+      background-color: nb-theme(layout-bg);
+    }
+
+    .slider::before {
+      position: absolute;
+      content: '';
+      height: 1.75rem;
+      width: 1.75rem;
+      border-radius: 50%;
+      background-color: nb-theme(color-success);
+      transition: 0.2s;
+
+      box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
+
+      @include nb-for-theme(cosmic) {
+        @include btn-hero-primary-gradient();
+      }
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    .light, .cosmic {
+      display: none;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+      align-items: flex-end;
+  }
+}

src/app/@theme/components/theme-switcher/theme-switcher.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
+
+@Component({
+  selector: 'ngx-theme-switcher',
+  styleUrls: ['./theme-switcher.component.scss'],
+  template: `
+    <label class="theme-switch">
+      <span class="light">Light</span>
+      <div class="switch">
+        <input type="checkbox" [checked]="currentBoolTheme()" (change)="toggleTheme(theme.checked)" #theme>
+        <span class="slider"></span>
+      </div>
+      <span class="cosmic">Cosmic</span>
+    </label>
+  `,
+})
+export class ThemeSwitcherComponent implements OnInit {
+  theme: NbJSThemeOptions;
+
+  constructor(private themeService: NbThemeService) {
+  }
+
+  ngOnInit() {
+    this.themeService.getJsTheme()
+      .subscribe((theme: NbJSThemeOptions) => this.theme = theme);
+  }
+
+  toggleTheme(theme: boolean) {
+    const boolTheme = this.boolToTheme(theme);
+    this.themeService.changeTheme(boolTheme);
+  }
+
+  currentBoolTheme() {
+    return this.themeToBool(this.theme);
+  }
+
+  private themeToBool(theme: NbJSThemeOptions) {
+    return theme.name === 'cosmic';
+  }
+
+  private boolToTheme(theme: boolean) {
+    return theme ? 'cosmic' : 'default';
+  }
+}

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

@@ -22,6 +22,7 @@ import {
   HeaderComponent,
   SearchInputComponent,
   ThemeSettingsComponent,
+  ThemeSwitcherComponent,
   TinyMCEComponent,
 } from './components';
 import { CapitalizePipe, PluralPipe, RoundPipe, TimingPipe } from './pipes';
@@ -51,6 +52,7 @@ const NB_MODULES = [
 ];
 
 const COMPONENTS = [
+  ThemeSwitcherComponent,
   HeaderComponent,
   FooterComponent,
   SearchInputComponent,