fix: prevent flash of light theme on marketplace load

Add inline script to root layout that reads the stored theme preference
from cookie/localStorage synchronously before React hydrates, eliminating
the light→dark flash for users who prefer dark mode.

Also guard the theme storage write with the hydrated flag so the initial
render does not overwrite a stored 'dark' preference with 'light'.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-05-23 02:54:10 -04:00
parent 4268e5c379
commit b82a5d4633
2 changed files with 13 additions and 2 deletions
@@ -328,9 +328,12 @@ export default function MarketplaceShell({
useEffect(() => {
document.documentElement.classList.toggle('dark', theme === 'dark')
document.documentElement.style.colorScheme = theme === 'dark' ? 'dark' : 'light'
document.body.dataset.theme = theme
writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
}, [theme])
if (hydrated) {
writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
}
}, [theme, hydrated])
const value = useMemo(
() => ({ language, theme, dict: dictionaries[language], companyName, setLanguage: applyLanguage, setTheme: applyTheme }),