Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProRead the system light or dark preference as a string, updating live, with a server default, for canvas, charts and embeds that CSS cannot theme.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it to pick a map style, a chart palette, an embedded editor theme or an image variant when the value must come from JavaScript.
Do not use it to read the theme the person chose in your app (that is your theme provider), and do not use it for normal styling, where the dark: variant works.
import { useColorScheme } from "@/hooks/use-color-scheme"const scheme = useColorScheme()
<Chart theme={scheme} />useColorScheme(options?): "light" | "dark"
| Option | Type | Default | Description |
|---|---|---|---|
defaultValue | "light" | "dark" | "light" | Value on the server and during hydration. |
It follows the operating system or browser setting (prefers-color-scheme), and updates when it changes.
A hook has no markup. Make sure each scheme meets contrast requirements (WCAG 1.4.3) and let people override the system choice in your app.
The hook ships with renderHook tests (use-color-scheme.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.