diff --git a/webapp/frontend/src/@treo/services/config/config.service.ts b/webapp/frontend/src/@treo/services/config/config.service.ts index b1501f5..8bce7bc 100644 --- a/webapp/frontend/src/@treo/services/config/config.service.ts +++ b/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; + 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 // ----------------------------------------------------------------------------------------------------- diff --git a/webapp/frontend/src/app/core/config/app.config.ts b/webapp/frontend/src/app/core/config/app.config.ts index 39ba1ca..913292c 100644 --- a/webapp/frontend/src/app/core/config/app.config.ts +++ b/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, }; 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 index 37099bb..682a91e 100644 --- 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,6 +2,21 @@
+
+ Use system settings for dark mode +

+ Theme: + + + light_mode + + + dark_mode + + +

+
+
Display Title 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 index 1ec2f69..1efd9e8 100644 --- 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 @@ -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; @@ -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)}`)