Fix application of dark mode, tests

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 }) => {

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',

src-ui/src/app/services/settings.service.ts

@@ -105,25 +105,27 @@ export class SettingsService {
     darkModeEnabled ??= this.get(SETTINGS_KEYS.DARK_MODE_ENABLED)
     themeColor ??= this.get(SETTINGS_KEYS.THEME_COLOR)
 
-    const isSystemColorSchemeDark = window.matchMedia(
+    if (darkModeUseSystem) {
-      '(prefers-color-scheme: dark)'
+      this._renderer.setAttribute(
-    ).matches
-
-    // clearing state.
-    this._renderer.removeAttribute(
         this.document.documentElement,
-      'data-bs-theme'
+        'data-bs-theme',
+        'auto'
       )
-    this._renderer.removeClass(this.document.body, 'primary-dark')
+    } else {
-    this._renderer.removeClass(this.document.body, 'primary-light')
+      if (!darkModeEnabled) {
-
+        this._renderer.setAttribute(
-    if ((darkModeUseSystem && isSystemColorSchemeDark) || darkModeEnabled) {
+          this.document.documentElement,
+          'data-bs-theme',
+          'light'
+        )
+      } else {
         this._renderer.setAttribute(
           this.document.documentElement,
           'data-bs-theme',
           'dark'
         )
       }
+    }
 
     if (themeColor) {
       const hsl = hexToHsl(themeColor)

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 {