paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-30 03:56:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix application of theme color vars at root (#4193)

Browse Source
This commit is contained in:
shamoon
2023-09-16 01:08:03 -07:00
committed by GitHub
parent ec9ebd3026
commit 4de1cb0a09
2 changed files with 18 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -143,7 +143,9 @@ describe('SettingsService', () => {
req.flush(ui_settings)
expect(
document.body.style.getPropertyValue('--pngx-primary-lightness')
document.documentElement.style.getPropertyValue(
'--pngx-primary-lightness'
)
).toEqual('')
const addClassSpy = jest.spyOn(settingsService.renderer, 'addClass')
@@ -157,7 +159,9 @@ describe('SettingsService', () => {
'auto'
)
expect(
document.body.style.getPropertyValue('--pngx-primary-lightness')
document.documentElement.style.getPropertyValue(
'--pngx-primary-lightness'
)
).toEqual('50%')
settingsService.updateAppearanceSettings(false, false, '#000000')
@@ -169,7 +173,9 @@ describe('SettingsService', () => {
)
expect(
document.body.style.getPropertyValue('--pngx-primary-lightness')
document.documentElement.style.getPropertyValue(
'--pngx-primary-lightness'
)
).toEqual('0%')
settingsService.updateAppearanceSettings(false, true, '#ffffff')
@@ -180,7 +186,9 @@ describe('SettingsService', () => {
'dark'
)
expect(
document.body.style.getPropertyValue('--pngx-primary-lightness')
document.documentElement.style.getPropertyValue(
'--pngx-primary-lightness'
)
).toEqual('100%')
})

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

@@ -7,7 +7,6 @@ import {
LOCALE_ID,
Renderer2,
RendererFactory2,
RendererStyleFlags2,
} from '@angular/core'
import { Meta } from '@angular/platform-browser'
import { CookieService } from 'ngx-cookie-service'
@@ -130,44 +129,17 @@ export class SettingsService {
this._renderer.addClass(this.document.body, 'primary-light')
this._renderer.removeClass(this.document.body, 'primary-dark')
}
this._renderer.setStyle(
document.body,
document.documentElement.style.setProperty(
'--pngx-primary',
`${+hsl.h * 360},${hsl.s * 100}%`,
RendererStyleFlags2.DashCase
`${+hsl.h * 360},${hsl.s * 100}%`
)
this._renderer.setStyle(
document.body,
document.documentElement.style.setProperty(
'--pngx-primary-lightness',
`${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
`${hsl.l * 100}%`
)
} else {
this._renderer.removeStyle(
document.body,
'--pngx-primary',
RendererStyleFlags2.DashCase
)
this._renderer.removeStyle(
document.body,
'--pngx-primary-lightness',
RendererStyleFlags2.DashCase
)
this._renderer.removeStyle(
document.body,
'--bs-primary',
RendererStyleFlags2.DashCase
)
document.documentElement.style.removeProperty('--pngx-primary')
document.documentElement.style.removeProperty('--pngx-primary-lightness')
}
}