_document.jsx

 1import { Head, Html, Main, NextScript } from 'next/document'
 2
 3const modeScript = `
 4  let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 5
 6  updateMode()
 7  darkModeMediaQuery.addEventListener('change', updateModeWithoutTransitions)
 8  window.addEventListener('storage', updateModeWithoutTransitions)
 9
10  function updateMode() {
11    let isSystemDarkMode = darkModeMediaQuery.matches
12    let isDarkMode = window.localStorage.isDarkMode === 'true' || (!('isDarkMode' in window.localStorage) && isSystemDarkMode)
13
14    if (isDarkMode) {
15      document.documentElement.classList.add('dark')
16    } else {
17      document.documentElement.classList.remove('dark')
18    }
19
20    if (isDarkMode === isSystemDarkMode) {
21      delete window.localStorage.isDarkMode
22    }
23  }
24
25  function disableTransitionsTemporarily() {
26    document.documentElement.classList.add('[&_*]:!transition-none')
27    window.setTimeout(() => {
28      document.documentElement.classList.remove('[&_*]:!transition-none')
29    }, 0)
30  }
31
32  function updateModeWithoutTransitions() {
33    disableTransitionsTemporarily()
34    updateMode()
35  }
36`
37
38export default function Document() {
39  return (
40    <Html lang="en">
41      <Head>
42        <script dangerouslySetInnerHTML={{ __html: modeScript }} />
43      </Head>
44      <body className="bg-white antialiased dark:bg-zinc-900">
45        <Main />
46        <NextScript />
47      </body>
48    </Html>
49  )
50}