simplify darkmode ui toggle.

pull/280/head
Jason Kulatunga 3 years ago
parent 4b767421f3
commit 2ca44c967e

@ -13,15 +13,12 @@ export class TreoConfigService
{ {
// Private // Private
private _config: BehaviorSubject<any>; private _config: BehaviorSubject<any>;
private systemPrefersDark: boolean;
/** /**
* Constructor * Constructor
*/ */
constructor(@Inject(TREO_APP_CONFIG) defaultConfig: any) constructor(@Inject(TREO_APP_CONFIG) defaultConfig: any)
{ {
this.systemPrefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
let currentScrutinyConfig = defaultConfig let currentScrutinyConfig = defaultConfig
let localConfigStr = localStorage.getItem(SCRUTINY_CONFIG_LOCAL_STORAGE_KEY) let localConfigStr = localStorage.getItem(SCRUTINY_CONFIG_LOCAL_STORAGE_KEY)
@ -30,9 +27,6 @@ export class TreoConfigService
let localConfig = JSON.parse(localConfigStr) let localConfig = JSON.parse(localConfigStr)
currentScrutinyConfig = Object.assign({}, localConfig, currentScrutinyConfig) // make sure defaults are available if missing from localStorage. currentScrutinyConfig = Object.assign({}, localConfig, currentScrutinyConfig) // make sure defaults are available if missing from localStorage.
} }
currentScrutinyConfig.theme = this.determineTheme(currentScrutinyConfig);
// Set the private defaults // Set the private defaults
this._config = new BehaviorSubject(currentScrutinyConfig); this._config = new BehaviorSubject(currentScrutinyConfig);
} }
@ -53,8 +47,6 @@ export class TreoConfigService
//Store the config in localstorage //Store the config in localstorage
localStorage.setItem(SCRUTINY_CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config)); localStorage.setItem(SCRUTINY_CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config));
config.theme = this.determineTheme(config);
// Execute the observable // Execute the observable
this._config.next(config); this._config.next(config);
} }
@ -69,13 +61,6 @@ export class TreoConfigService
// @ Private methods // @ 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 // @ Public methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------

@ -1,7 +1,7 @@
import { Layout } from "app/layout/layout.types"; import { Layout } from "app/layout/layout.types";
// Theme type // Theme type
export type Theme = "light" | "dark"; export type Theme = "light" | "dark" | "system";
/** /**
* AppConfig interface. Update this interface to strictly type your config * AppConfig interface. Update this interface to strictly type your config
@ -17,8 +17,6 @@ export interface AppConfig
dashboardSort: string; dashboardSort: string;
temperatureUnit: string; temperatureUnit: string;
themeUseSystem: boolean;
} }
/** /**
@ -37,7 +35,5 @@ export const appConfig: AppConfig = {
dashboardSort: "status", dashboardSort: "status",
temperatureUnit: "celsius", temperatureUnit: "celsius",
themeUseSystem: true,
}; };

@ -2,19 +2,16 @@
<mat-dialog-content class="mat-typography"> <mat-dialog-content class="mat-typography">
<div class="flex flex-col p-8 pb-0 overflow-hidden"> <div class="flex flex-col p-8 pb-0 overflow-hidden">
<div class="flex flex-col gt-md:flex-row"> <div class="flex flex-col mt-5 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"> <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
Theme: <mat-label>Dark Mode</mat-label>
<mat-button-toggle-group class="ml-2" #group="matButtonToggleGroup" [(ngModel)]="theme" [disabled]="themeUseSystem"> <mat-select [(ngModel)]="theme">
<mat-button-toggle value="light" aria-label="Light mode"> <mat-option value="system">System</mat-option>
<mat-icon>light_mode</mat-icon> <mat-option value="dark">Dark</mat-option>
</mat-button-toggle> <mat-option value="light">Light</mat-option>
<mat-button-toggle value="dark" aria-label="Dark mode"> </mat-select>
<mat-icon>dark_mode</mat-icon> </mat-form-field>
</mat-button-toggle>
</mat-button-toggle-group>
</p>
</div> </div>
<div class="flex flex-col mt-5 gt-md:flex-row"> <div class="flex flex-col mt-5 gt-md:flex-row">

@ -14,7 +14,6 @@ export class DashboardSettingsComponent implements OnInit {
dashboardDisplay: string; dashboardDisplay: string;
dashboardSort: string; dashboardSort: string;
temperatureUnit: string; temperatureUnit: string;
themeUseSystem: boolean;
theme: string; theme: string;
// Private // Private
@ -37,7 +36,6 @@ export class DashboardSettingsComponent implements OnInit {
this.dashboardDisplay = config.dashboardDisplay; this.dashboardDisplay = config.dashboardDisplay;
this.dashboardSort = config.dashboardSort; this.dashboardSort = config.dashboardSort;
this.temperatureUnit = config.temperatureUnit; this.temperatureUnit = config.temperatureUnit;
this.themeUseSystem = config.themeUseSystem;
this.theme = config.theme; this.theme = config.theme;
}); });
@ -45,11 +43,12 @@ export class DashboardSettingsComponent implements OnInit {
} }
saveSettings(): void { saveSettings(): void {
const newSettings = { const newSettings = {
dashboardDisplay: this.dashboardDisplay, dashboardDisplay: this.dashboardDisplay,
dashboardSort: this.dashboardSort, dashboardSort: this.dashboardSort,
temperatureUnit: this.temperatureUnit, temperatureUnit: this.temperatureUnit,
themeUseSystem: this.themeUseSystem,
theme: this.theme theme: this.theme
} }
this._configService.config = newSettings this._configService.config = newSettings

@ -23,6 +23,7 @@ export class LayoutComponent implements OnInit, OnDestroy
// Private // Private
private _unsubscribeAll: Subject<any>; private _unsubscribeAll: Subject<any>;
private systemPrefersDark: boolean;
/** /**
* Constructor * Constructor
@ -43,6 +44,9 @@ export class LayoutComponent implements OnInit, OnDestroy
{ {
// Set the private defaults // Set the private defaults
this._unsubscribeAll = new Subject(); 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; this.theme = config.theme;
// Update the selected theme class name on body // 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) => { this._document.body.classList.forEach((className) => {
if ( className.startsWith('treo-theme-') && className !== themeName ) if ( className.startsWith('treo-theme-') && className !== themeName )
{ {
@ -105,6 +109,17 @@ export class LayoutComponent implements OnInit, OnDestroy
// @ Private methods // @ 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 * Update the selected layout
*/ */

Loading…
Cancel
Save