feat(theme): add theme switcher

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

@@ -1,4 +1,5 @@
 @import '../../styles/themes';
+@import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
 
 @include nb-install-component() {
   display: flex;
@@ -34,10 +35,79 @@
       }
     }
 
-    .theme-buttons {
+    .theme-switch {
-      margin-left: 3rem;
+      margin: 0 0 0 6rem;
-      button {
+      width: 12rem;
-        margin-right: 1rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      span {
+        font-size: 1.125rem;
+        font-weight: nb-theme(font-weight-bold);
+
+        &.light {
+          color: nb-theme(color-fg-text);
+        }
+
+        &.cosmic {
+          color: nb-theme(color-fg);
+        }
+
+        @include nb-for-theme(cosmic) {
+          &.light {
+            color: nb-theme(color-fg);
+          }
+
+          &.cosmic {
+            color: nb-theme(color-white);
+          }
+        }
+      }
+    }
+
+    .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;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 1.75rem;
+        background-color: nb-theme(layout-bg);
+        transition: 0.2s;
+      }
+
+      .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.125rem 1rem 0 rgba(nb-theme(color-fg), 0.4);
+
+        @include nb-for-theme(cosmic) {
+          @include btn-hero-primary-gradient();
+          box-shadow: 0 0.125rem 1rem 0 nb-theme(color-primary);
+        }
       }
     }
   }

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

@@ -1,7 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 
-import { NbMenuService, NbSidebarService } from '@nebular/theme';
+import { NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
-import { NbThemeService } from '@nebular/theme';
 import { UserService } from '../../../@core/data/users.service';
 
 @Component({
@@ -11,10 +10,14 @@ import { UserService } from '../../../@core/data/users.service';
     <div class="header-container" [class.left]="position === 'normal'" [class.right]="position === 'inverse'">
       <a (click)="toggleSidebar()" href="#" class="navigation"><i class="ion-navicon"></i></a>
       <div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
-      <div class="theme-buttons">
+      <label class="theme-switch">
-        <button class="btn btn-hero-primary" (click)="selectCosmicTheme()">Cosmic</button>
+        <span class="light">Light</span>
-        <button class="btn btn-hero-info" (click)="selectDefaultTheme()">Default</button>
+        <div class="switch">
+          <input type="checkbox" (change)="toggleTheme(theme.checked)" #theme>
+          <span class="slider"></span>
         </div>
+        <span class="cosmic">Cosmic</span>
+      </label>
     </div>
 
     <nb-actions
@@ -75,11 +78,7 @@ export class HeaderComponent implements OnInit {
     this.menuService.navigateHome();
   }
 
-  selectCosmicTheme() {
+  toggleTheme(theme: boolean) {
-    this.themeService.changeTheme('cosmic');
+    this.themeService.changeTheme(theme ? 'cosmic' : 'default');
-  }
-
-  selectDefaultTheme() {
-    this.themeService.changeTheme('default');
   }
 }