Sebastian Krüger
1e1489ec58
Add blocking script in HTML head to apply theme before React hydration. This eliminates the flash of wrong theme (FOUT) that occurred when the page loaded with default theme before useEffect could apply the saved theme. The script: - Runs synchronously before page render - Reads theme from localStorage - Applies dark/light class to <html> element immediately - Handles system theme preference detection - Wrapped in try-catch for safety This ensures users see the correct theme from the first paint, with no flicker. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import { ThemeProvider } from '@/components/providers/ThemeProvider';
|
|
import './globals.css';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Unit Converter - Convert Any Unit Instantly',
|
|
description: 'A spectacular, innovative unit conversion app supporting 23 measurement categories with 187 units. Real-time conversion with the best UX.',
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="en" suppressHydrationWarning>
|
|
<head>
|
|
<script
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
(function() {
|
|
try {
|
|
const storageKey = 'units-ui-theme';
|
|
const stored = localStorage.getItem(storageKey);
|
|
const theme = stored || 'system';
|
|
|
|
if (theme === 'system') {
|
|
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
? 'dark'
|
|
: 'light';
|
|
document.documentElement.classList.add(systemTheme);
|
|
} else {
|
|
document.documentElement.classList.add(theme);
|
|
}
|
|
} catch (e) {}
|
|
})();
|
|
`,
|
|
}}
|
|
/>
|
|
</head>
|
|
<body className="antialiased">
|
|
<ThemeProvider defaultTheme="system" storageKey="units-ui-theme">
|
|
{children}
|
|
</ThemeProvider>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|