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

   1 import { Component, OnInit } from '@angular/core';
   2 import { NbThemeService } from '@nebular/theme';
   3 import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
   4 import { AnalyticsService } from '../../../@core/utils/analytics.service';
   5
   6 @Component({
   7   selector: 'ngx-theme-switcher',
   8   styleUrls: ['./theme-switcher.component.scss'],
   9   template: `
  10     <label class="theme-switch">
  11       <span class="light">Light</span>
  12       <div class="switch">
  13         <input type="checkbox" [checked]="currentBoolTheme()" (change)="toggleTheme(theme.checked)" #theme>
  14         <span class="slider"></span>
  15       </div>
  16       <span class="cosmic">Cosmic</span>
  17     </label>
  18   `,
  19 })
  20 export class ThemeSwitcherComponent implements OnInit {
  21   theme: NbJSThemeOptions;
  22
  23   constructor(private themeService: NbThemeService, private analyticsService: AnalyticsService) {
  24   }
  25
  26   ngOnInit() {
  27     this.themeService.getJsTheme()
  28       .subscribe((theme: NbJSThemeOptions) => this.theme = theme);
  29   }
  30
  31   toggleTheme(theme: boolean) {
  32     const boolTheme = this.boolToTheme(theme);
  33     this.themeService.changeTheme(boolTheme);
  34     this.analyticsService.trackEvent('switchTheme');
  35   }
  36
  37   currentBoolTheme() {
  38     return this.themeToBool(this.theme);
  39   }
  40
  41   private themeToBool(theme: NbJSThemeOptions) {
  42     return theme.name === 'cosmic';
  43   }
  44
  45   private boolToTheme(theme: boolean) {
  46     return theme ? 'cosmic' : 'default';
  47   }
  48 }