import {ChakraProvider, useColorMode} from "@chakra-ui/react" import {Html} from "next/document" import React from "react" type ColorMode = "light" | "dark" export function ChakraThemedHtmlComponent(props: { colorMode: ColorMode children: React.ReactNode }) { return ( {props.children} ) } export function ChakraThemedBodyComponent({ colorMode, ...props }: React.ComponentProps<"body"> & {colorMode: ColorMode}) { return ( ) } export function ChakraThemedProvider({ colorMode, ...props }: React.ComponentProps & {colorMode: ColorMode}) { return ( colorMode, set: () => undefined, type: "cookie", }} theme={props.theme} > {props.children} ) } function EnforceColorMode({desiredColorMode}: {desiredColorMode: ColorMode}) { const {setColorMode} = useColorMode() React.useEffect(() => { setColorMode(desiredColorMode ?? "dark") }, [desiredColorMode, setColorMode]) return null }