Skip to main content
Module

x/valtio/website/pages/_document.tsx

πŸ’Š Valtio makes proxy-state simple for React and Vanilla
Go to Latest
File
import { Head, Html, Main, NextScript } from "next/document";
const modeScript = ` let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
updateMode() darkModeMediaQuery.addEventListener('change', updateModeWithoutTransitions) window.addEventListener('storage', updateModeWithoutTransitions)
function updateMode() { let isSystemDarkMode = darkModeMediaQuery.matches let isDarkMode = window.localStorage.isDarkMode === 'true' || (!('isDarkMode' in window.localStorage) && isSystemDarkMode)
if (isDarkMode) { document.documentElement.classList.add('dark') } else { document.documentElement.classList.remove('dark') }
if (isDarkMode === isSystemDarkMode) { delete window.localStorage.isDarkMode } }
function disableTransitionsTemporarily() { document.documentElement.classList.add('[&_*]:!transition-none') window.setTimeout(() => { document.documentElement.classList.remove('[&_*]:!transition-none') }, 0) }
function updateModeWithoutTransitions() { disableTransitionsTemporarily() updateMode() }`;
export default function Document() { return ( <Html className="h-full antialiased" lang="en"> <Head> <script dangerouslySetInnerHTML={{ __html: modeScript }} /> </Head> <body className="flex h-full flex-col bg-gray-50 dark:bg-gray-900"> <Main /> <NextScript /> </body> </Html> );}