simplify darkmode ui toggle.

AnalogJ · Jun 5, 2022 · 2ca44c9 · 2ca44c9
1 parent 4b76742
commit 2ca44c9
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 37 deletions.
diff --git a/webapp/frontend/src/@treo/services/config/config.service.ts b/webapp/frontend/src/@treo/services/config/config.service.ts
@@ -13,15 +13,12 @@ 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)
@@ -30,9 +27,6 @@ export class TreoConfigService
             let localConfig = JSON.parse(localConfigStr)
             currentScrutinyConfig = Object.assign({}, localConfig, currentScrutinyConfig) // make sure defaults are available if missing from localStorage.
         }
-
-        currentScrutinyConfig.theme = this.determineTheme(currentScrutinyConfig);
-
         // Set the private defaults
         this._config = new BehaviorSubject(currentScrutinyConfig);
     }
@@ -53,8 +47,6 @@ export class TreoConfigService
         //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);
     }
@@ -69,13 +61,6 @@ export class TreoConfigService
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------
 
-    /**
-     * Checks if theme should be set to dark based on config & system settings
-     */
-    private determineTheme(config:AppConfig): string {
-        return (config.themeUseSystem && this.systemPrefersDark) ? "dark" :  config.theme;
-    }
-
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------

diff --git a/webapp/frontend/src/app/core/config/app.config.ts b/webapp/frontend/src/app/core/config/app.config.ts
@@ -1,7 +1,7 @@
 import { Layout } from "app/layout/layout.types";
 
 // Theme type
-export type Theme = "light" | "dark";
+export type Theme = "light" | "dark" | "system";
 
 /**
  * AppConfig interface. Update this interface to strictly type your config
@@ -17,8 +17,6 @@ export interface AppConfig
     dashboardSort: string;
 
     temperatureUnit: string;
-
-    themeUseSystem: boolean;
 }
 
 /**
@@ -37,7 +35,5 @@ export const appConfig: AppConfig = {
     dashboardSort: "status",
 
     temperatureUnit: "celsius",
-
-    themeUseSystem: true,
 };
 
diff --git a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
@@ -2,19 +2,16 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
 <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)]="themeUseSystem">Use system settings for dark mode</mat-slide-toggle>
-            <p [class.text-hint]="themeUseSystem">
-                Theme:
-                <mat-button-toggle-group class="ml-2" #group="matButtonToggleGroup" [(ngModel)]="theme" [disabled]="themeUseSystem">
-                    <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 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>Dark Mode</mat-label>
+                <mat-select [(ngModel)]="theme">
+                    <mat-option value="system">System</mat-option>
+                    <mat-option value="dark">Dark</mat-option>
+                    <mat-option value="light">Light</mat-option>
+                </mat-select>
+            </mat-form-field>
         </div>
 
         <div class="flex flex-col mt-5 gt-md:flex-row">

diff --git a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts
@@ -14,7 +14,6 @@ export class DashboardSettingsComponent implements OnInit {
     dashboardDisplay: string;
     dashboardSort: string;
     temperatureUnit: string;
-    themeUseSystem: boolean;
     theme: string;
 
     // Private
@@ -37,19 +36,19 @@ export class DashboardSettingsComponent implements OnInit {
               this.dashboardDisplay = config.dashboardDisplay;
               this.dashboardSort = config.dashboardSort;
               this.temperatureUnit = config.temperatureUnit;
-              this.themeUseSystem = config.themeUseSystem;
               this.theme = config.theme;
 
           });
 
   }
 
   saveSettings(): void {
+
+
         const newSettings = {
             dashboardDisplay: this.dashboardDisplay,
             dashboardSort: this.dashboardSort,
             temperatureUnit: this.temperatureUnit,
-            themeUseSystem: this.themeUseSystem,
             theme: this.theme
         }
         this._configService.config = newSettings

diff --git a/webapp/frontend/src/app/layout/layout.component.ts b/webapp/frontend/src/app/layout/layout.component.ts
@@ -23,6 +23,7 @@ export class LayoutComponent implements OnInit, OnDestroy
 
     // Private
     private _unsubscribeAll: Subject<any>;
+    private systemPrefersDark: boolean;
 
     /**
      * Constructor
@@ -43,6 +44,9 @@ export class LayoutComponent implements OnInit, OnDestroy
     {
         // Set the private defaults
         this._unsubscribeAll = new Subject();
+
+        this.systemPrefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -66,7 +70,7 @@ export class LayoutComponent implements OnInit, OnDestroy
                 this.theme = config.theme;
 
                 // Update the selected theme class name on body
-                const themeName = 'treo-theme-' + config.theme;
+                const themeName = 'treo-theme-' + this.determineTheme(config);
                 this._document.body.classList.forEach((className) => {
                     if ( className.startsWith('treo-theme-') && className !== themeName )
                     {
@@ -105,6 +109,17 @@ export class LayoutComponent implements OnInit, OnDestroy
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * Checks if theme should be set to dark based on config & system settings
+     */
+    private determineTheme(config:AppConfig): string {
+        if (config.theme === 'system') {
+            return this.systemPrefersDark ? 'dark' : 'light'
+        } else {
+            return config.theme
+        }
+    }
+
     /**
      * Update the selected layout
      */