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
Created
July 10, 2024 17:48
-
-
Save stipsan/13c0cccf8dfc34f4b44bb1b984baf7df to your computer and use it in GitHub Desktop.
How to implement the `Sec-CH-Prefers-Color-Scheme` header with `@sanity/ui`'s `usePrefersDark` hook
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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> | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment