simplify darkmode ui toggle.

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

@@ -2,19 +2,16 @@
 <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">

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,7 +36,6 @@ 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;
 
           });
@@ -45,11 +43,12 @@ export class DashboardSettingsComponent implements OnInit {
   }
 
   saveSettings(): void {
+
+
         const newSettings = {
             dashboardDisplay: this.dashboardDisplay,
             dashboardSort: this.dashboardSort,
             temperatureUnit: this.temperatureUnit,
-            themeUseSystem: this.themeUseSystem,
             theme: this.theme
         }
         this._configService.config = newSettings