From 894d9669871ebdd8eb365df862452cf251ad8a29 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 27 Mar 2026 22:11:30 +0000 Subject: [PATCH] feat(theme): listen to system color-scheme changes and persist user preference - Add matchMedia change listener so the app follows OS light/dark mode switches in real time - Listener is skipped when the user has already set an explicit preference via the toggle button (stored in localStorage), so manual choices are always respected - localStorage persistence was already in place; no behaviour change for returning users who have saved a preference https://claude.ai/code/session_018RN2osgNx3WL7fZKjN5Pwx --- client/src/app/services/theme.service.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/client/src/app/services/theme.service.ts b/client/src/app/services/theme.service.ts index 45fa8d2..4d89920 100644 --- a/client/src/app/services/theme.service.ts +++ b/client/src/app/services/theme.service.ts @@ -8,6 +8,7 @@ export class ThemeService { constructor() { this.applyClass(this.isDark()); + this.listenToSystemTheme(); } toggle() { @@ -25,4 +26,17 @@ export class ThemeService { if (stored) return stored === 'dark'; return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false; } + + private listenToSystemTheme(): void { + const mediaQuery = window.matchMedia?.('(prefers-color-scheme: dark)'); + if (!mediaQuery) return; + + mediaQuery.addEventListener('change', (event) => { + // Only follow system changes if the user hasn't set a manual preference + if (!localStorage.getItem(this.STORAGE_KEY)) { + this.isDark.set(event.matches); + this.applyClass(event.matches); + } + }); + } }