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:
@@ -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 }),
|
||||
|
||||
Reference in New Issue
Block a user