[ @sdxc/u/responsive ]

dark

Sugar over scheme("dark", input).

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

import { dark } from "@sdxc/u/responsive";

Examples

Basic example

Use dark(...) to apply utilities only in dark mode, which follows your system's appearance setting. Switch your system to dark mode to see the card change:

Your trial ends in 3 days.

<div
	mix={[
		bg("color.warning.100"),
		fg("color.warning.900"),
		dark([bg("color.warning.900"), fg("color.warning.100")]),
		...,
	]}
>
	Your trial ends in 3 days.
</div>

Combining with states

Nest a state inside dark(...) to give it a dark-mode value, like dark(hover(bg(...))). Hover the button in light and in dark mode:

<button
	type="button"
	mix={[
		bg("color.brand.600"),
		fg("color.brand.50"),
		hover(bg("color.brand.700")),
		dark(hover(bg("color.brand.400"))),
		cursor("pointer"),
		...,
	]}
>
	Save changes
</button>

u.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.dark(u.bg("neutral.solid")))

Signature

u.dark(input: UtilityInput<Node>)