[ @sdxc/u/responsive ]
light
Sugar over scheme("light", input).
import { light } from "@sdxc/u/responsive";Examples
Basic example
Use light(...) to apply utilities only in light mode, for a design written dark first. Switch your system between light and dark mode to see the banner change:
New: export your data as CSV.
<div
mix={[
bg("color.brand.950"),
fg("color.brand.50"),
light([bg("color.brand.50"), fg("color.brand.950")]),
...,
]}
>
New: export your data as CSV.
</div>u.light(u.bg())Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.light(u.bg()))Signature
u.light(input: UtilityInput<Node>)