fix bug#7

apps/dashboard/src/components/I18nProvider.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { SHARED_LANGUAGE_COOKIE, SHARED_LANGUAGE_KEY, SHARED_THEME_KEY, readCurrentUserScopedPreference, readScopedPreference, writeScopedPreference } from '@/lib/preferences'
+import { HOMEPAGE_THEME_COOKIE, HOMEPAGE_THEME_KEY, SHARED_LANGUAGE_COOKIE, SHARED_LANGUAGE_KEY, SHARED_THEME_KEY, readCurrentUserScopedPreference, readScopedPreference, writeScopedPreference } from '@/lib/preferences'
 import { apiFetch } from '@/lib/api'
 
 export type DashboardLanguage = 'en' | 'fr' | 'ar'
@@ -1427,7 +1427,7 @@ export function DashboardI18nProvider({
   initialLanguage?: DashboardLanguage
 }) {
   const [language, setLanguageState] = useState<DashboardLanguage>(initialLanguage)
-  const [theme, setThemeState] = useState<DashboardTheme>('light')
+  const [theme, setThemeState] = useState<DashboardTheme>('dark')
   const themeInitialized = useRef(false)
   // Skip the very first write so we don't overwrite a stored preference with the
   // server-resolved initialLanguage before the read effect has a chance to apply it.
@@ -1455,7 +1455,7 @@ export function DashboardI18nProvider({
       document.documentElement.classList.add(nextTheme === 'light' ? 'light' : 'dark')
       document.documentElement.style.colorScheme = nextTheme === 'light' ? 'light' : 'dark'
       document.body.dataset.theme = nextTheme
-      writeScopedPreference(SHARED_THEME_KEY, nextTheme, ['dashboard-theme'])
+      writeScopedPreference(SHARED_THEME_KEY, nextTheme, ['dashboard-theme', HOMEPAGE_THEME_KEY], [HOMEPAGE_THEME_COOKIE])
     }
 
     setThemeState(nextTheme)
@@ -1473,15 +1473,14 @@ export function DashboardI18nProvider({
   }, [])
 
   useEffect(() => {
-    const storedTheme = readScopedPreference(SHARED_THEME_KEY, ['dashboard-theme'])
+    const queryTheme = new URLSearchParams(window.location.search).get('theme')
+    const storedTheme = queryTheme === 'light' || queryTheme === 'dark'
+      ? queryTheme
+      : readScopedPreference(SHARED_THEME_KEY, ['dashboard-theme', HOMEPAGE_THEME_KEY], [HOMEPAGE_THEME_COOKIE])
     if (storedTheme === 'light' || storedTheme === 'dark') {
       if (storedTheme !== theme) setThemeState(storedTheme)
       return
     }
-
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches && theme !== 'dark') {
-      setThemeState('dark')
-    }
   }, [])
 
   useEffect(() => {
@@ -1497,16 +1496,17 @@ export function DashboardI18nProvider({
   }, [language])
 
   useEffect(() => {
-    if (!themeInitialized.current) {
-      // Skip first run: inline script already applied the correct class; writing 'light' here would flash and corrupt storage.
-      themeInitialized.current = true
-      return
-    }
     document.documentElement.classList.remove('light', 'dark')
     document.documentElement.classList.add(theme === 'light' ? 'light' : 'dark')
     document.documentElement.style.colorScheme = theme === 'light' ? 'light' : 'dark'
     document.body.dataset.theme = theme
-    writeScopedPreference(SHARED_THEME_KEY, theme, ['dashboard-theme'])
+
+    if (!themeInitialized.current) {
+      // Skip first write: inline script already applied the correct class; writing too early can corrupt stored preferences.
+      themeInitialized.current = true
+      return
+    }
+    writeScopedPreference(SHARED_THEME_KEY, theme, ['dashboard-theme', HOMEPAGE_THEME_KEY], [HOMEPAGE_THEME_COOKIE])
   }, [theme])
 
   useEffect(() => {
@@ -1530,7 +1530,7 @@ export function DashboardI18nProvider({
       if (scopedTheme === 'light' || scopedTheme === 'dark') {
         if (scopedTheme !== theme) setThemeState(scopedTheme)
       } else {
-        writeScopedPreference(SHARED_THEME_KEY, theme, ['dashboard-theme'])
+        writeScopedPreference(SHARED_THEME_KEY, theme, ['dashboard-theme', HOMEPAGE_THEME_KEY], [HOMEPAGE_THEME_COOKIE])
       }
     }