From 527a6edf1a1f839453dd7c38ed914960f5b6d568 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 12 Sep 2023 19:55:08 -0700
Subject: [PATCH] Fix application of dark mode, tests

---
 src-ui/e2e/settings/settings.spec.ts          |  4 +--
 .../src/app/services/settings.service.spec.ts | 21 +++----------
 src-ui/src/app/services/settings.service.ts   | 30 ++++++++++---------
 src-ui/src/theme.scss                         |  1 -
 4 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/src-ui/e2e/settings/settings.spec.ts b/src-ui/e2e/settings/settings.spec.ts
index 51210acdd..1ae9afa06 100644
--- a/src-ui/e2e/settings/settings.spec.ts
+++ b/src-ui/e2e/settings/settings.spec.ts
@@ -46,10 +46,10 @@ test('should warn on unsaved changes', async ({ page }) => {
 test('should apply appearance changes when set', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/settings')
-  await expect(page.locator('body')).toHaveClass(/color-scheme-system/)
+  await expect(page.locator('html')).toHaveAttribute('data-bs-theme', /auto/)
   await page.getByLabel('Use system setting').click()
   await page.getByLabel('Enable dark mode').click()
-  await expect(page.locator('body')).toHaveClass(/color-scheme-dark/)
+  await expect(page.locator('html')).toHaveAttribute('data-bs-theme', /dark/)
 })
 
 test('should toggle saved view options when set & saved', async ({ page }) => {
diff --git a/src-ui/src/app/services/settings.service.spec.ts b/src-ui/src/app/services/settings.service.spec.ts
index a05d5e7c3..fac41ee6c 100644
--- a/src-ui/src/app/services/settings.service.spec.ts
+++ b/src-ui/src/app/services/settings.service.spec.ts
@@ -147,23 +147,14 @@ describe('SettingsService', () => {
     ).toEqual('')
 
     const addClassSpy = jest.spyOn(settingsService.renderer, 'addClass')
-    const removeClassSpy = jest.spyOn(settingsService.renderer, 'removeClass')
     const setAttributeSpy = jest.spyOn(settingsService.renderer, 'setAttribute')
-    const removeAttributeSpy = jest.spyOn(
-      settingsService.renderer,
-      'removeAttribute'
-    )
 
     settingsService.updateAppearanceSettings(true, true, '#fff000')
     expect(addClassSpy).toHaveBeenCalledWith(document.body, 'primary-light')
-    expect(removeAttributeSpy).toHaveBeenCalledWith(
-      document.documentElement,
-      'data-bs-theme'
-    )
     expect(setAttributeSpy).toHaveBeenCalledWith(
       document.documentElement,
       'data-bs-theme',
-      'dark'
+      'auto'
     )
     expect(
       document.body.style.getPropertyValue('--pngx-primary-lightness')
@@ -171,11 +162,11 @@ describe('SettingsService', () => {
 
     settingsService.updateAppearanceSettings(false, false, '#000000')
     expect(addClassSpy).toHaveBeenCalledWith(document.body, 'primary-light')
-    expect(removeAttributeSpy).toHaveBeenCalledWith(
+    expect(setAttributeSpy).toHaveBeenCalledWith(
       document.documentElement,
-      'data-bs-theme'
+      'data-bs-theme',
+      'light'
     )
-    expect(document.documentElement.hasAttribute('data-bs-theme')).toBe(false)
 
     expect(
       document.body.style.getPropertyValue('--pngx-primary-lightness')
@@ -183,10 +174,6 @@ describe('SettingsService', () => {
 
     settingsService.updateAppearanceSettings(false, true, '#ffffff')
     expect(addClassSpy).toHaveBeenCalledWith(document.body, 'primary-dark')
-    expect(removeAttributeSpy).toHaveBeenCalledWith(
-      document.documentElement,
-      'data-bs-theme'
-    )
     expect(setAttributeSpy).toHaveBeenCalledWith(
       document.documentElement,
       'data-bs-theme',
diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts
index a4bfee2f3..f7de0c64d 100644
--- a/src-ui/src/app/services/settings.service.ts
+++ b/src-ui/src/app/services/settings.service.ts
@@ -105,24 +105,26 @@ export class SettingsService {
     darkModeEnabled ??= this.get(SETTINGS_KEYS.DARK_MODE_ENABLED)
     themeColor ??= this.get(SETTINGS_KEYS.THEME_COLOR)
 
-    const isSystemColorSchemeDark = window.matchMedia(
-      '(prefers-color-scheme: dark)'
-    ).matches
-
-    // clearing state.
-    this._renderer.removeAttribute(
-      this.document.documentElement,
-      'data-bs-theme'
-    )
-    this._renderer.removeClass(this.document.body, 'primary-dark')
-    this._renderer.removeClass(this.document.body, 'primary-light')
-
-    if ((darkModeUseSystem && isSystemColorSchemeDark) || darkModeEnabled) {
+    if (darkModeUseSystem) {
       this._renderer.setAttribute(
         this.document.documentElement,
         'data-bs-theme',
-        'dark'
+        'auto'
       )
+    } else {
+      if (!darkModeEnabled) {
+        this._renderer.setAttribute(
+          this.document.documentElement,
+          'data-bs-theme',
+          'light'
+        )
+      } else {
+        this._renderer.setAttribute(
+          this.document.documentElement,
+          'data-bs-theme',
+          'dark'
+        )
+      }
     }
 
     if (themeColor) {
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 5a839150d..eadc125ab 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -137,7 +137,6 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
   }
 
   .card {
-    --bs-border-color-translucent: 0, 0, 0, .175;
     background-color: var(--bs-body-bg);
 
     .card-header {