Add settings UI for dark mode

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)}`)