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

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

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. Composed from `u.when()` and `u.media()`.

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

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

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

## Signature

```ts
u.scheme(mode: "dark" | "light", input: UtilityInput<Node>)
```