mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-04-02 13:45:10 -05:00
Fix application of theme color vars at root (#4193)
This commit is contained in:
parent
ec9ebd3026
commit
4de1cb0a09
@ -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%')
|
||||
})
|
||||
|
||||
|
@ -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')
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user