responsive
scheme
Applies the given utilities under both the forced .dark/.light class and the system-preference .system class behind prefers-color-scheme, so both stay in sync.
import { scheme } from "@sdxc/u/responsive";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.scheme("dark", u.bg("neutral.solid")) | css({ ".dark &": { backgroundColor: "..." }, "@media (prefers-color-scheme: dark)": { ".system &": { backgroundColor: "..." } } }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.scheme("dark", u.bg("neutral.solid"))Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.scheme("dark", u.bg("neutral.solid")))Signature
u.scheme(mode: "dark" | "light", input: UtilityInput<Node>)