lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change setting dark mode to use Bootstrap's data-bs-theme attribute

Browse Source
This commit is contained in:
Dominik Mielcarek 2023-09-12 22:03:43 +02:00 committed by shamoon
parent d1292c59ea
commit 8e034ac42b
2 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src-ui/src/app/services/settings.service.ts
View File

@ -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)

2
src-ui/src/index.html
View File

@ -11,7 +11,7 @@
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body class="color-scheme-system">
<body>
<app-root></app-root>
</body>
</html>