tomhicks/ChakraColorModeComponents.tsx

## ChakraColorModeComponents.tsx
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 (
    <Html data-theme={props.colorMode} style={{colorScheme: props.colorMode}}>
      {props.children}
    </Html>
  )
}

export function ChakraThemedBodyComponent({
  colorMode,
  ...props
}: React.ComponentProps<"body"> & {colorMode: ColorMode}) {
  return (
    <body
      {...props}
      className={
        props.className
          ? `${props.className} chakra-ui-${colorMode}`
          : undefined
      }
    ></body>
  )
}

export function ChakraThemedProvider({
  colorMode,
  ...props
}: React.ComponentProps<typeof ChakraProvider> & {colorMode: ColorMode}) {
  return (
    <ChakraProvider
      colorModeManager={{
        get: () => colorMode,
        set: () => undefined,
        type: "cookie",
      }}
      theme={props.theme}
    >
      <EnforceColorMode desiredColorMode={colorMode} />
      {props.children}
    </ChakraProvider>
  )
}

function EnforceColorMode({desiredColorMode}: {desiredColorMode: ColorMode}) {
  const {setColorMode} = useColorMode()
  React.useEffect(() => {
    setColorMode(desiredColorMode ?? "dark")
  }, [desiredColorMode, setColorMode])

  return null
}
	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 (
	<Html data-theme={props.colorMode} style={{colorScheme: props.colorMode}}>
	{props.children}
	</Html>
	)
	}

	export function ChakraThemedBodyComponent({
	colorMode,
	...props
	}: React.ComponentProps<"body"> & {colorMode: ColorMode}) {
	return (
	<body
	{...props}
	className={
	props.className
	? `${props.className} chakra-ui-${colorMode}`
	: undefined
	}
	></body>
	)
	}

	export function ChakraThemedProvider({
	colorMode,
	...props
	}: React.ComponentProps<typeof ChakraProvider> & {colorMode: ColorMode}) {
	return (
	<ChakraProvider
	colorModeManager={{
	get: () => colorMode,
	set: () => undefined,
	type: "cookie",
	}}
	theme={props.theme}
	>
	<EnforceColorMode desiredColorMode={colorMode} />
	{props.children}
	</ChakraProvider>
	)
	}

	function EnforceColorMode({desiredColorMode}: {desiredColorMode: ColorMode}) {
	const {setColorMode} = useColorMode()
	React.useEffect(() => {
	setColorMode(desiredColorMode ?? "dark")
	}, [desiredColorMode, setColorMode])

	return null
	}