# light

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

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

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

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

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

```ts
u.light(u.bg())
```

## Applying on a state

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

```ts
u.hover(u.light(u.bg()))
```

## Signature

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