paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-07-28 18:24:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Chore: change dark mode to use Bootstrap's color modes (#4174)

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

* Update dark mode styling to use Bootstrap's color mode attribute

* Update unit tests and lints

* Fix not reflecting custom theme color

* Remove commented-out code

* fix inverted thumbnails in dark mode & card borders

* prettier

* Fix application of dark mode, tests

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
This commit is contained in:
Dominik Mielcarek
2023-09-13 20:11:44 +02:00
committed by GitHub
parent d1292c59ea
commit 78ae4c42f7
6 changed files with 66 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -147,13 +147,14 @@ describe('SettingsService', () => {
).toEqual('')
const addClassSpy = jest.spyOn(settingsService.renderer, 'addClass')
const removeClassSpy = jest.spyOn(settingsService.renderer, 'removeClass')
const setAttributeSpy = jest.spyOn(settingsService.renderer, 'setAttribute')
settingsService.updateAppearanceSettings(true, true, '#fff000')
expect(addClassSpy).toHaveBeenCalledWith(document.body, 'primary-light')
expect(addClassSpy).toHaveBeenCalledWith(
document.body,
'color-scheme-system'
expect(setAttributeSpy).toHaveBeenCalledWith(
document.documentElement,
'data-bs-theme',
'auto'
)
expect(
document.body.style.getPropertyValue('--pngx-primary-lightness')
@@ -161,21 +162,23 @@ describe('SettingsService', () => {
settingsService.updateAppearanceSettings(false, false, '#000000')
expect(addClassSpy).toHaveBeenCalledWith(document.body, 'primary-light')
expect(removeClassSpy).toHaveBeenCalledWith(
document.body,
'color-scheme-system'
expect(setAttributeSpy).toHaveBeenCalledWith(
document.documentElement,
'data-bs-theme',
'light'
)
expect(
document.body.style.getPropertyValue('--pngx-primary-lightness')
).toEqual('0%')
settingsService.updateAppearanceSettings(false, true, '#ffffff')
expect(addClassSpy).toHaveBeenCalledWith(document.body, 'primary-dark')
expect(removeClassSpy).toHaveBeenCalledWith(
document.body,
'color-scheme-system'
expect(setAttributeSpy).toHaveBeenCalledWith(
document.documentElement,
'data-bs-theme',
'dark'
)
expect(addClassSpy).toHaveBeenCalledWith(document.body, 'color-scheme-dark')
expect(
document.body.style.getPropertyValue('--pngx-primary-lightness')
).toEqual('100%')

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

@@ -106,19 +106,19 @@ export class SettingsService {
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')
this._renderer.setAttribute(
this.document.documentElement,
'data-bs-theme',
'auto'
)
} 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')
this._renderer.setAttribute(
this.document.documentElement,
'data-bs-theme',
darkModeEnabled ? 'dark' : 'light'
)
}
// remove these in case they were there
this._renderer.removeClass(this.document.body, 'primary-dark')
this._renderer.removeClass(this.document.body, 'primary-light')
if (themeColor) {
const hsl = hexToHsl(themeColor)
const bgBrightnessEstimate = estimateBrightnessForColor(themeColor)
@@ -142,6 +142,16 @@ export class SettingsService {
`${hsl.l * 100}%`,
RendererStyleFlags2.DashCase
)
/**
* Fix for not reflecting changed variables. (--bs-primary is at :root while here we set them to body)
*/
this._renderer.setStyle(
document.body,
'--bs-primary',
'hsl(var(--pngx-primary), var(--pngx-primary-lightness))',
RendererStyleFlags2.DashCase
)
} else {
this._renderer.removeStyle(
document.body,
@@ -153,6 +163,11 @@ export class SettingsService {
'--pngx-primary-lightness',
RendererStyleFlags2.DashCase
)
this._renderer.removeStyle(
document.body,
'--bs-primary',
RendererStyleFlags2.DashCase
)
}
}