# dark

> Sugar over `scheme("dark", input)`.

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

Sugar over `scheme("dark", input)`.

## 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:

```tsx
<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:

```tsx
<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>
```

```ts
u.dark(u.bg("neutral.solid"))
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.dark(u.bg("neutral.solid")))
```

## Signature

```ts
u.dark(input: UtilityInput<Node>)
```