[ @sdxc/u/color ]

color-scheme

Sets color-scheme, which tells the browser which schemes an element renders correctly in, so the chrome the browser paints itself — scrollbars, pickers, form controls — follows the theme.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { colorScheme } from "@sdxc/u/color";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.colorScheme()`	`css({ colorScheme: "light dark" })`
`u.colorScheme("dark")`	`css({ colorScheme: "dark" })`
`u.colorScheme("only light")`	`css({ colorScheme: "only light" })`

Examples

Basic example

Use colorScheme to tell the browser which scheme an element renders in, so the controls, scrollbars and system colors it paints follow it:

<div mix={[...]}>
	<div
		mix={[
			colorScheme("light"),
			bg("Canvas"),
			fg("CanvasText"),
			rounded("lg"),
			p(4),
			...,
		]}
	>
		<input type="text" value="light" aria-label="Light field" />
		<select aria-label="Light select">
			<option>Option</option>
		</select>
	</div>
	<div
		mix={[
			colorScheme("dark"),
			bg("Canvas"),
			fg("CanvasText"),
			rounded("lg"),
			p(4),
			...,
		]}
	>
		<input type="text" value="dark" aria-label="Dark field" />
		<select aria-label="Dark select">
			<option>Option</option>
		</select>
	</div>
</div>

Following the reader's preference

Call colorScheme() with no argument to declare both schemes, so native controls follow the reader's system setting; set it once on <html>:

<div mix={[colorScheme(), bg("Canvas"), fg("CanvasText"), rounded("lg"), p(4), ...]}>
	<input type="date" aria-label="Date" />
	<input type="checkbox" checked aria-label="Checkbox" />
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.colorScheme())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.colorScheme())

Signature

u.colorScheme(value?: ColorSchemeValue)