[ @sdxc/u/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: "..." } } }) |
Examples
Basic example
Use scheme("light", ...) and scheme("dark", ...) to style each color scheme, following your system's appearance setting. Switch your system between light and dark mode to see the badge change:
Deployed
<span
mix={[
scheme("light", [bg("color.success.100"), fg("color.success.800")]),
scheme("dark", [bg("color.success.800"), fg("color.success.100")]),
...,
]}
>
Deployed
</span>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>)