diff --git a/src-ui/src/app/services/settings.service.spec.ts b/src-ui/src/app/services/settings.service.spec.ts index 560b67ae8..7f5eb15fe 100644 --- a/src-ui/src/app/services/settings.service.spec.ts +++ b/src-ui/src/app/services/settings.service.spec.ts @@ -148,12 +148,19 @@ describe('SettingsService', () => { 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(addClassSpy).toHaveBeenCalledWith( - document.body, - 'color-scheme-system' + expect(removeAttributeSpy).toHaveBeenCalledWith( + document.documentElement, + 'data-bs-theme' + ) + expect(setAttributeSpy).toHaveBeenCalledWith( + document.documentElement, + 'data-bs-theme', + 'dark' ) expect( document.body.style.getPropertyValue('--pngx-primary-lightness') @@ -161,21 +168,27 @@ describe('SettingsService', () => { settingsService.updateAppearanceSettings(false, false, '#000000') expect(addClassSpy).toHaveBeenCalledWith(document.body, 'primary-light') - expect(removeClassSpy).toHaveBeenCalledWith( - document.body, - 'color-scheme-system' + expect(removeAttributeSpy).toHaveBeenCalledWith( + document.documentElement, + 'data-bs-theme' ) + 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(removeClassSpy).toHaveBeenCalledWith( - document.body, - 'color-scheme-system' + expect(removeAttributeSpy).toHaveBeenCalledWith( + document.documentElement, + 'data-bs-theme' + ) + expect(setAttributeSpy).toHaveBeenCalledWith( + document.documentElement, + 'data-bs-theme', + 'dark' ) - expect(addClassSpy).toHaveBeenCalledWith(document.body, 'color-scheme-dark') expect( document.body.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 e8e979e98..ef6d12af7 100644 --- a/src-ui/src/app/services/settings.service.ts +++ b/src-ui/src/app/services/settings.service.ts @@ -105,15 +105,15 @@ 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; + const isSystemColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches // clearing state. - this._renderer.removeAttribute(this.document.documentElement, 'data-bs-theme'); + 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) { - this._renderer.setAttribute(this.document.documentElement, 'data-bs-theme', 'dark'); + this._renderer.setAttribute(this.document.documentElement, 'data-bs-theme', 'dark') } if (themeColor) {