rename variable to themeUseSystem from darkModeUseSystem.

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

@@ -73,7 +73,7 @@ export class TreoConfigService
      * 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;
+        return (config.themeUseSystem && this.systemPrefersDark) ? "dark" :  config.theme;
     }
 
     // -----------------------------------------------------------------------------------------------------

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

@@ -18,7 +18,7 @@ export interface AppConfig
 
     temperatureUnit: string;
 
-    darkModeUseSystem: boolean;
+    themeUseSystem: boolean;
 }
 
 /**
@@ -38,6 +38,6 @@ export const appConfig: AppConfig = {
 
     temperatureUnit: "celsius",
 
-    darkModeUseSystem: true,
+    themeUseSystem: true,
 };
 

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

@@ -3,10 +3,10 @@
 
     <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">
+            <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]="darkModeUseSystem">
+                <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>

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

@@ -14,7 +14,7 @@ export class DashboardSettingsComponent implements OnInit {
     dashboardDisplay: string;
     dashboardSort: string;
     temperatureUnit: string;
-    darkModeUseSystem: boolean;
+    themeUseSystem: boolean;
     theme: string;
 
     // Private
@@ -37,7 +37,7 @@ export class DashboardSettingsComponent implements OnInit {
               this.dashboardDisplay = config.dashboardDisplay;
               this.dashboardSort = config.dashboardSort;
               this.temperatureUnit = config.temperatureUnit;
-              this.darkModeUseSystem = config.darkModeUseSystem;
+              this.themeUseSystem = config.themeUseSystem;
               this.theme = config.theme;
 
           });
@@ -49,7 +49,7 @@ export class DashboardSettingsComponent implements OnInit {
             dashboardDisplay: this.dashboardDisplay,
             dashboardSort: this.dashboardSort,
             temperatureUnit: this.temperatureUnit,
-            darkModeUseSystem: this.darkModeUseSystem,
+            themeUseSystem: this.themeUseSystem,
             theme: this.theme
         }
         this._configService.config = newSettings