feat: add theme switcher

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

@@ -0,0 +1,76 @@
+@import '../../../styles/themes';
+@import '~@nebular/theme/styles/core/mixins';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+
+$icon-color-default: #0bbb79;
+$icon-color-cosmic: #7958fa;
+$icon-color-corporate: #a7a2be;
+
+$icon-top-color-default: #01dbb5;
+$icon-top-color-cosmic: #a258fe;
+$icon-top-color-corporate: #e9e8eb;
+
+@include nb-install-component() {
+  /deep/ .themes-switcher-list {
+    padding: 1rem 2rem 1.25rem 0.5rem;
+    margin: 0;
+
+    @include nb-ltr(text-align, start);
+    @include nb-rtl(text-align, end);
+
+    .themes-switcher-item {
+      list-style: none;
+      cursor: pointer;
+
+      &:hover span {
+        opacity: 0.5;
+      }
+
+      i {
+        font-size: 2rem;
+
+        &.drop-icon-default {
+          color: $icon-color-default;
+
+          // Hack for IE11, IE11 should not set background
+          background: -webkit-linear-gradient($icon-top-color-default, $icon-color-default);
+        }
+
+        &.drop-icon-cosmic {
+          color: $icon-color-cosmic;
+
+          // Hack for IE11, IE11 should not set background
+          background: -webkit-linear-gradient($icon-top-color-cosmic, $icon-color-cosmic);
+        }
+
+        &.drop-icon-corporate {
+          color: $icon-color-corporate;
+
+          // Hack for IE11, IE11 should not set background
+          background: -webkit-linear-gradient($icon-top-color-corporate, $icon-color-corporate);
+        }
+
+        &.drop-icon-default,
+        &.drop-icon-cosmic,
+        &.drop-icon-corporate {
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+
+      span {
+        font-weight: 300;
+        vertical-align: super;
+        padding-left: 1rem;
+        color: nb-theme(color-fg-heading);
+      }
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    /deep/ .themes-switcher-list {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+import {Component, Input} from '@angular/core';
+import { NbThemeService, NbPopoverDirective } from '@nebular/theme';
+import { AnalyticsService } from '../../../../@core/utils/analytics.service';
+import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
+
+@Component({
+  selector: 'ngx-theme-switcher-list',
+  template: `
+    <ul class="themes-switcher-list">
+      <li class="themes-switcher-item"
+          *ngFor="let theme of themes"
+          (click)="onToggleTheme(theme.key)">
+        <i class="nb-drop" [ngClass]="'drop-icon-' + theme.key"></i>
+        <span>{{ theme.title }}</span>
+      </li>
+    </ul>
+  `,
+  styleUrls: ['./theme-switcher-list.component.scss'],
+})
+export class ThemeSwitcherListComponent {
+
+  @Input() popover: NbPopoverDirective;
+
+  theme: NbJSThemeOptions;
+
+  themes = [
+    {
+      title: 'Light',
+      key: 'default',
+    },
+    {
+      title: 'Cosmic',
+      key: 'cosmic',
+    },
+    {
+      title: 'Corporate',
+      key: 'corporate',
+    },
+  ];
+
+  constructor(
+    private themeService: NbThemeService,
+    private analyticsService: AnalyticsService,
+  ) {}
+
+  onToggleTheme(themeKey: string) {
+    this.themeService.changeTheme(themeKey);
+    this.analyticsService.trackEvent('switchTheme');
+    this.popover.hide();
+  }
+}