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

diff --git a/src-ui/src/app/services/settings.service.spec.ts b/src-ui/src/app/services/settings.service.spec.ts
index fac41ee6c4df8ec02653d9c99cebdbd4d9ab4c73..e074612b3e3d3fbd7de7ea7b27468913db8fd4c0 100644 (file)
--- a/src-ui/src/app/services/settings.service.spec.ts
+++ b/src-ui/src/app/services/settings.service.spec.ts
@@ -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%')
   })
 

diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts
index 1081bede16c8e5510ac906c8906c6f0bdd450855..7a237586cb7602381184077538d94aeee6471e79 100644 (file)
--- a/src-ui/src/app/services/settings.service.ts
+++ b/src-ui/src/app/services/settings.service.ts
@@ -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')
     }
   }