add theme service to control theme automatically

src/app/app.component.html

@@ -3,10 +3,10 @@
     <app-logo></app-logo>
   </mat-toolbar>
   <div class="content">
-    <app-sidebar></app-sidebar>
+    <app-sidebar [ngClass]="theme.themeType"></app-sidebar>
     <div class="main">
-      <app-scrubber></app-scrubber>
-      <app-settings></app-settings>
+      <app-scrubber [ngClass]="theme.themeType"></app-scrubber>
+      <app-settings [ngClass]="theme.themeType"></app-settings>
     </div>
   </div>
 </div>

src/app/app.component.ts

@@ -1,11 +1,34 @@
-import { Component } from "@angular/core";
+import { Component, HostBinding, OnInit } from "@angular/core";
 import { invoke } from "@tauri-apps/api/tauri";
+import { ThemeService, ThemeType } from "./services/theme/theme.service";
+import { OverlayContainer } from "@angular/cdk/overlay";
 
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.scss"],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+  @HostBinding('class') componentCssClass = ThemeType.Dark;
+
+  constructor(public overlayContainer : OverlayContainer,
+              public theme: ThemeService) {}
+
+  ngOnInit() {
+    this.setTheme(this.theme.getSaved());
+  }
+
+  setTheme(theme: ThemeType) {
+    this.overlayContainer.getContainerElement().classList.forEach((v,k,p)=> {
+      if (v.endsWith('theme')) {
+        p.replace(v,theme);
+        return;
+      }
+    })
+    document.documentElement.classList.remove(this.theme.getTheme())
+    document.documentElement.classList.add(theme);
+    this.componentCssClass = theme;
+    this.theme.set(theme);
+  }
 
 }

src/app/elements/logo/logo.component.scss

@@ -6,7 +6,7 @@ svg {
 }
 
 
-@media (prefers-color-scheme: dark) {
+:host(.dark-theme) {
     fill {
         color: $text-color;
     }

src/app/elements/scrubber/scrubber.component.scss

@@ -13,7 +13,7 @@ mat-slider {
     flex: 1 1;
 }
 
-@media (prefers-color-scheme: dark) {
+:host(.dark-theme) {
     .scrubber-container {
         border-top: 1px solid $sec-background;
     }

src/app/elements/settings/settings.component.scss

@@ -3,10 +3,15 @@
 .settings-container {
     padding: 8px 16px 8px 16px;
     height: 350px;
+}
+
+.light-theme {
+  .settings-container {
     border-top: 1px solid $sec-background-light;
 }
+}
 
-@media (prefers-color-scheme: dark) {
+:host(.dark-theme) {
     .settings-container {
         border-top: 1px solid $sec-background;
     }

src/app/elements/sidebar/sidebar.component.scss

@@ -18,7 +18,7 @@
 }
 
 
-@media (prefers-color-scheme: dark) {
+:host(.dark-theme) {
     .sidebar-container {
         border-right: 1px solid $sec-background;
     }

src/app/services/theme/theme.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+  let service: ThemeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ThemeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/theme/theme.service.ts

@@ -0,0 +1,62 @@
+import { Injectable } from '@angular/core';
+import { Meta } from '@angular/platform-browser';
+
+export enum ThemeType {
+  Light = 'light-theme',
+  Dark = 'dark-theme',
+  Black = 'black-theme'
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+  themeType : ThemeType;
+  LOCAL_STORAGE_KEY = 'sentinel-theme'
+
+  prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+  constructor(public meta: Meta) { 
+    this.themeType = ThemeType.Dark;
+  }
+
+  set(theme: ThemeType) {
+    if (theme == ThemeType.Light) {
+      this.themeType = theme;
+      this.meta.updateTag({name: 'theme-color', content: "#f5f5f5"});
+    } else if (theme == ThemeType.Dark) {
+      this.themeType = theme;
+      this.meta.updateTag({name: 'theme-color', content: "#262626"});
+    } else if (theme == ThemeType.Black) {
+      this.themeType = theme;
+      this.meta.updateTag({name: 'theme-color', content: "#000000"});
+    }
+    localStorage.setItem(this.LOCAL_STORAGE_KEY, theme);
+  }
+
+  getSaved(): ThemeType {
+    let theme = localStorage.getItem(this.LOCAL_STORAGE_KEY);
+    if (theme == ThemeType.Light ||
+        theme == ThemeType.Dark ||
+        theme == ThemeType.Black)
+      return theme;
+    else localStorage.removeItem(this.LOCAL_STORAGE_KEY);
+    return (this.prefersDarkTheme) ? ThemeType.Dark : ThemeType.Light;
+  }
+
+  isLight(): boolean {
+    return this.themeType == ThemeType.Light;
+  }
+
+  isDark(): boolean {
+    return this.themeType == ThemeType.Dark;
+  }
+
+  isBlack(): boolean {
+    return this.themeType == ThemeType.Black;
+  }
+
+  getTheme(): ThemeType {
+    return this.themeType;
+  }
+}

src/styles.scss

@@ -81,32 +81,39 @@ $sentinel-dark-theme: mat.define-dark-theme((
   line-height: 24px;
   font-weight: 400;
 
-  color: $text-color-light;
-  background-color: $main-background-light;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
 
-.mat-toolbar {
-  background: $sec-background-light;
+:root.light-theme {
+  @include mat.all-component-colors($sentinel-light-theme);
   color: $text-color-light;
+  background-color: $main-background-light;
 }
 
-@media (prefers-color-scheme: dark) {
-  @include mat.all-component-colors($sentinel-dark-theme);
-
-  :root {
-    color: $text-color;
-    background-color: $main-background;
+.light-theme {
+  .mat-toolbar {
+    background: $sec-background-light !important;
+    color: $text-color-light;
+    border-bottom: 1px solid $sec-background-light;
   }
+}
+
+:root.dark-theme {
+  @include mat.all-component-colors($sentinel-dark-theme);
+  color: $text-color !important;
+  background-color: $main-background !important;
+}
+
+.dark-theme {
 
   .mat-toolbar {
-    background: $sec-background;
+    background: $main-background !important;
     color: $text-color;
+    border-bottom: 1px solid $sec-background;
   }
 }