How to implement the `Sec-CH-Prefers-Color-Scheme` header with `@sanity/ui`'s `usePrefersDark` hook

README.md

This example is using Remix.

More information on the header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion

_index.tsx

// app/routes/_index.tsx

import type {HeadersFunction, LoaderFunctionArgs} from '@remix-run/node'
import {json} from '@remix-run/node'
import {useLoaderData} from '@remix-run/react'
import {usePrefersDark} from '@sanity/ui'

export const headers: HeadersFunction = () => ({
  'Accept-CH': 'Sec-CH-Prefers-Color-Scheme',
  'Vary': 'Sec-CH-Prefers-Color-Scheme',
  'Critical-CH': 'Sec-CH-Prefers-Color-Scheme',
})

export async function loader({request}: LoaderFunctionArgs) {
  const prefersColorSchemeHeader = request.headers.get('Sec-CH-Prefers-Color-Scheme') as unknown as
    | 'dark'
    | 'light'
    | null
  return json({
    prefersColorSchemeHeader,
    prefersColorSchemeServerSnapshot: prefersColorSchemeHeader === 'dark',
  })
}


export default function Index() {
  const {prefersColorSchemeHeader, prefersColorSchemeServerSnapshot} =
    useLoaderData<typeof loader>()
  const prefersDarkColorScheme = usePrefersDark(() => prefersColorSchemeServerSnapshot)

  useEffect(() => {
    console.count(`prefersDarkColorScheme: ${prefersDarkColorScheme}`)
  }, [prefersDarkColorScheme])

  return (
    <pre>
      <code
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(
            {
              prefersColorSchemeHeader,
              prefersColorSchemeServerSnapshot,
              prefersDarkColorScheme,
            },
            null,
            2,
          ),
        }}
      />
    </pre>
  )
}