fix(theme): remove stale dark root class in light mode (#1960)

elibosley · web-flow · commit 2815f8567cc7 · 2026-03-24T16:19:47.000-04:00
## Summary - fix theme-store bootstrap so the DOM theme name is authoritative on first load - remove stale root/body `dark` classes when the active theme is light - add a regression test covering light theme startup with stale dark classes present ## Root cause The frontend bootstrap path could trust a pre-existing `.dark` class before reconciling against the authoritative DOM theme name. If that class lingered on `<html>` from an earlier client-side mutation, a light theme could still boot into Tailwind dark mode. ## Validation - `pnpm test __test__/store/theme.test.ts` - `pnpm test __test__/components/ThemeSwitcher.test.ts` ## Reference - https://product.unraid.net/p/dark-class-added-to-html-root-element-even-in-light-mode  ## Summary by CodeRabbit * **Tests** * Added test coverage for theme initialization to verify correct handling of light theme CSS variables and removal of stale dark mode classes. * **Refactor** * Improved theme store initialization logic to read theme settings from DOM CSS variables, with fallback to legacy initialization when needed.
diff --git a/web/__test__/store/theme.test.ts b/web/__test__/store/theme.test.ts
@@ -286,5 +286,17 @@ describe('Theme Store', () => {
 
       vi.restoreAllMocks();
     });
+
+    it('should remove stale dark classes when the DOM theme is light', () => {
+      document.documentElement.style.setProperty('--theme-name', 'white');
+      originalDocumentElementAddClass.call(document.documentElement.classList, 'dark');
+      originalAddClassFn.call(document.body.classList, 'dark');
+
+      const store = createStore();
+
+      expect(document.documentElement.classList.remove).toHaveBeenCalledWith('dark');
+      expect(document.body.classList.remove).toHaveBeenCalledWith('dark');
+      expect(store.darkMode).toBe(false);
+    });
   });
 });
diff --git a/web/src/store/theme.ts b/web/src/store/theme.ts
@@ -48,6 +48,9 @@ const getCssVar = (name: string): string => {
 
 const readDomThemeName = () => getCssVar('--theme-name');
 
+const isDarkThemeName = (themeName: string) =>
+  DARK_UI_THEMES.includes(themeName as (typeof DARK_UI_THEMES)[number]);
+
 const syncDarkClass = (method: 'add' | 'remove') => {
   if (!isDomAvailable()) return;
   document.documentElement.classList[method]('dark');
@@ -98,12 +101,6 @@ export const useThemeStore = defineStore('theme', () => {
   const devOverride = ref(false);
   const darkMode = ref<boolean>(false);
 
-  // Initialize dark mode from CSS variable set by PHP or any pre-applied .dark class
-  if (isDomAvailable()) {
-    darkMode.value = isDarkModeActive();
-    bootstrapDarkClass(darkMode);
-  }
-
   // Lazy query - only executes when explicitly called
   const { load, onResult, onError } = useLazyQuery<GetThemeQuery>(GET_THEME_QUERY, null, {
     fetchPolicy: 'cache-and-network',
@@ -208,16 +205,19 @@ export const useThemeStore = defineStore('theme', () => {
   watch(
     () => theme.value.name,
     (themeName) => {
-      const isDark = DARK_UI_THEMES.includes(themeName as (typeof DARK_UI_THEMES)[number]);
-      applyDarkClass(isDark, darkMode);
+      applyDarkClass(isDarkThemeName(themeName), darkMode);
     },
     { immediate: false }
   );
 
   // Initialize theme from DOM on store creation
-  const domThemeName = themeName.value;
-  if (domThemeName && domThemeName !== DEFAULT_THEME.name) {
-    theme.value.name = domThemeName;
+  const domThemeName = readDomThemeName();
+  if (domThemeName) {
+    setTheme({ name: domThemeName });
+    applyDarkClass(isDarkThemeName(domThemeName), darkMode);
+  } else if (isDomAvailable()) {
+    darkMode.value = isDarkModeActive();
+    bootstrapDarkClass(darkMode);
   }
 
   return {
