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.

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" })`

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.colorScheme()

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)