Fix application of dark mode, tests

paperless-ngx · Sep 13, 2023 · b9e5e03 · b9e5e03
1 parent 7cd5abc
commit b9e5e03
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 33 deletions.
diff --git 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
@@ -147,46 +147,33 @@ 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')
     ).toEqual('50%')
 
     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')
     ).toEqual('0%')
 
     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
@@ -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) {