From 8e034ac42b645efe8da08d49be947eb767774fa2 Mon Sep 17 00:00:00 2001 From: Dominik Mielcarek Date: Tue, 12 Sep 2023 22:03:43 +0200 Subject: [PATCH] Change setting dark mode to use Bootstrap's data-bs-theme attribute --- src-ui/src/app/services/settings.service.ts | 17 +++++++---------- src-ui/src/index.html | 2 +- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts index 134bb3ebb..e8e979e98 100644 --- a/src-ui/src/app/services/settings.service.ts +++ b/src-ui/src/app/services/settings.service.ts @@ -105,20 +105,17 @@ export class SettingsService { darkModeEnabled ??= this.get(SETTINGS_KEYS.DARK_MODE_ENABLED) themeColor ??= this.get(SETTINGS_KEYS.THEME_COLOR) - if (darkModeUseSystem) { - this._renderer.addClass(this.document.body, 'color-scheme-system') - this._renderer.removeClass(this.document.body, 'color-scheme-dark') - } else { - this._renderer.removeClass(this.document.body, 'color-scheme-system') - darkModeEnabled - ? this._renderer.addClass(this.document.body, 'color-scheme-dark') - : this._renderer.removeClass(this.document.body, 'color-scheme-dark') - } + const isSystemColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches; - // remove these in case they were there + // clearing state. + this._renderer.removeAttribute(this.document.documentElement, 'data-bs-theme'); this._renderer.removeClass(this.document.body, 'primary-dark') this._renderer.removeClass(this.document.body, 'primary-light') + if ((darkModeUseSystem && isSystemColorSchemeDark) || darkModeEnabled) { + this._renderer.setAttribute(this.document.documentElement, 'data-bs-theme', 'dark'); + } + if (themeColor) { const hsl = hexToHsl(themeColor) const bgBrightnessEstimate = estimateBrightnessForColor(themeColor) diff --git a/src-ui/src/index.html b/src-ui/src/index.html index c01df6243..cb6ce7816 100644 --- a/src-ui/src/index.html +++ b/src-ui/src/index.html @@ -11,7 +11,7 @@ - +