Preventing Flash of Wrong Theme

typescript
1// Add this script to your <head> before any CSS loads
2const THEME_SCRIPT = `
3  (function() {
4    const theme = localStorage.getItem('flint-theme');
5    if (theme === 'dark') {
6      document.documentElement.setAttribute('data-theme', 'dark');
7    }
8  })()
9`;
10

11// In your Next.js _document.tsx or HTML template:
12export default function Document() {
13  return (
14    <Html>
15      <Head>
16        <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
17      </Head>
18      <body>
19        <Main />
20        <NextScript />
21      </body>
22    </Html>
23  )
24}

Blocking script injection to prevent FOUC on SSR