diff --git a/apps/marketplace/src/app/layout.tsx b/apps/marketplace/src/app/layout.tsx
index 470c91e..977c398 100644
--- a/apps/marketplace/src/app/layout.tsx
+++ b/apps/marketplace/src/app/layout.tsx
@@ -17,6 +17,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
const language = getMarketplaceLanguage()
return (
+
+ {/* Runs before hydration to prevent flash of wrong theme */}
+
+
{children}
diff --git a/apps/marketplace/src/components/MarketplaceShell.tsx b/apps/marketplace/src/components/MarketplaceShell.tsx
index 1fb9d26..516d3d3 100644
--- a/apps/marketplace/src/components/MarketplaceShell.tsx
+++ b/apps/marketplace/src/components/MarketplaceShell.tsx
@@ -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 }),