Add settings UI for dark mode

webapp/frontend/src/@treo/services/config/config.service.ts

@@ -2,6 +2,7 @@ import { Inject, Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import * as _ from 'lodash';
 import { TREO_APP_CONFIG } from '@treo/services/config/config.constants';
+import { AppConfig } from 'app/core/config/app.config';
 
 const SCRUTINY_CONFIG_LOCAL_STORAGE_KEY = 'scrutiny';
 
@@ -12,20 +13,26 @@ export class TreoConfigService
 {
     // Private
     private _config: BehaviorSubject<any>;
+    private systemPrefersDark: boolean;
+
     /**
      * Constructor
      */
     constructor(@Inject(TREO_APP_CONFIG) defaultConfig: any)
     {
+        this.systemPrefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+
         let currentScrutinyConfig = defaultConfig
 
         let localConfigStr = localStorage.getItem(SCRUTINY_CONFIG_LOCAL_STORAGE_KEY)
-        if(localConfigStr){
+        if (localConfigStr){
             //check localstorage for a value
             let localConfig = JSON.parse(localConfigStr)
             currentScrutinyConfig = localConfig
         }
 
+        currentScrutinyConfig.theme = this.determineTheme(currentScrutinyConfig);
+
         // Set the private defaults
         this._config = new BehaviorSubject(currentScrutinyConfig);
     }
@@ -41,10 +48,12 @@ export class TreoConfigService
     set config(value: any)
     {
         // Merge the new config over to the current config
-        const config = _.merge({}, this._config.getValue(), value);
+        let config = _.merge({}, this._config.getValue(), value);
 
         //Store the config in localstorage
         localStorage.setItem(SCRUTINY_CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config));
+        
+        config.theme = this.determineTheme(config);
 
         // Execute the observable
         this._config.next(config);
@@ -56,6 +65,17 @@ export class TreoConfigService
         return this._config.asObservable();
     }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Checks if theme should be set to dark based on config & system settings
+     */
+    private determineTheme(config:AppConfig): string {
+        return (config.darkModeUseSystem && this.systemPrefersDark) ? "dark" :  config.theme;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------

webapp/frontend/src/app/core/config/app.config.ts

@@ -17,6 +17,8 @@ export interface AppConfig
     dashboardSort: string;
 
     temperatureUnit: string;
+
+    darkModeUseSystem: boolean;
 }
 
 /**
@@ -35,5 +37,7 @@ export const appConfig: AppConfig = {
     dashboardSort: "status",
 
     temperatureUnit: "celsius",
+
+    darkModeUseSystem: true,
 };
 

webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html

@@ -2,6 +2,21 @@
 <mat-dialog-content class="mat-typography">
 
     <div class="flex flex-col p-8 pb-0 overflow-hidden">
+        <div class="flex flex-col gt-md:flex-row">
+            <mat-slide-toggle class="mb-2" [(ngModel)]="darkModeUseSystem">Use system settings for dark mode</mat-slide-toggle>
+            <p [class.text-hint]="darkModeUseSystem">
+                Theme:
+                <mat-button-toggle-group class="ml-2" #group="matButtonToggleGroup" [(ngModel)]="theme" [disabled]="darkModeUseSystem">
+                    <mat-button-toggle value="light" aria-label="Light mode">
+                      <mat-icon>light_mode</mat-icon>
+                    </mat-button-toggle>
+                    <mat-button-toggle value="dark" aria-label="Dark mode">
+                      <mat-icon>dark_mode</mat-icon>
+                    </mat-button-toggle>
+                </mat-button-toggle-group>
+            </p>
+        </div>
+
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Display Title</mat-label>

webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts

@@ -13,7 +13,9 @@ export class DashboardSettingsComponent implements OnInit {
 
     dashboardDisplay: string;
     dashboardSort: string;
-    temperatureUnit: string
+    temperatureUnit: string;
+    darkModeUseSystem: boolean;
+    theme: string;
 
     // Private
     private _unsubscribeAll: Subject<any>;
@@ -35,7 +37,11 @@ export class DashboardSettingsComponent implements OnInit {
               this.dashboardDisplay = config.dashboardDisplay;
               this.dashboardSort = config.dashboardSort;
               this.temperatureUnit = config.temperatureUnit;
+              this.darkModeUseSystem = config.darkModeUseSystem;
+              this.theme = config.theme;
+
           });
+        
   }
 
   saveSettings(): void {
@@ -43,6 +49,8 @@ export class DashboardSettingsComponent implements OnInit {
             dashboardDisplay: this.dashboardDisplay,
             dashboardSort: this.dashboardSort,
             temperatureUnit: this.temperatureUnit,
+            darkModeUseSystem: this.darkModeUseSystem,
+            theme: this.theme
         }
         this._configService.config = newSettings
         console.log(`Saved Settings: ${JSON.stringify(newSettings)}`)