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

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

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