From 4de1cb0a09053c524760e898ea80681acfadca84 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 16 Sep 2023 01:08:03 -0700
Subject: [PATCH] Fix application of theme color vars at root (#4193)

---
 .../src/app/services/settings.service.spec.ts | 16 ++++++--
 src-ui/src/app/services/settings.service.ts   | 40 +++----------------
 2 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/src-ui/src/app/services/settings.service.spec.ts b/src-ui/src/app/services/settings.service.spec.ts
index fac41ee6c..e074612b3 100644
--- 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 1081bede1..7a237586c 100644
--- 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')
     }
   }