Sebastian Krüger
7ef4ea026e
Fixed FOUC (Flash of Unstyled Content) issue with dark mode: **Problem:** - Page would flash light theme before switching to dark - localStorage check happened after React hydration - Caused jarring visual experience **Solution:** - Added blocking script in <head> that runs immediately - Checks localStorage and system preference synchronously - Applies 'dark' class before any rendering - Prevents flash completely **Technical Changes:** - Inline script in layout.tsx head - Runs before React hydration - Added suppressHydrationWarning to html tag - ThemeToggle now reads from DOM instead of re-setting - Wrapped in try-catch for safety **Result:** - No more flickering on page load - Smooth theme experience - Works with both saved preference and system default - Instant dark mode application 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import './globals.css';
|
|
import { ToastProvider } from '@/components/ui/Toast';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Figlet UI - ASCII Art Text Generator',
|
|
description: 'A modern web UI for generating ASCII art text with 373 figlet fonts. Preview custom text in any figlet font, export to multiple formats, and share your creations.',
|
|
keywords: ['figlet', 'ascii art', 'text generator', 'banner', 'ascii', 'text art'],
|
|
authors: [{ name: 'Valknar' }],
|
|
openGraph: {
|
|
title: 'Figlet UI - ASCII Art Text Generator',
|
|
description: 'Generate beautiful ASCII art text with 373 fonts',
|
|
type: 'website',
|
|
},
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="en" suppressHydrationWarning>
|
|
<head>
|
|
<script
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
(function() {
|
|
try {
|
|
const theme = localStorage.getItem('theme');
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const shouldBeDark = theme === 'dark' || (!theme && prefersDark);
|
|
|
|
if (shouldBeDark) {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
} catch (e) {}
|
|
})();
|
|
`,
|
|
}}
|
|
/>
|
|
</head>
|
|
<body className="antialiased">
|
|
<ToastProvider>
|
|
{children}
|
|
</ToastProvider>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|