# forcedColors

> Sugar over `media("(forced-colors: active)", input)`.

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

Sugar over `media("(forced-colors: active)", input)`. Forced-colors mode
swaps colors for a system palette — use this to restore non-color cues like
borders, or keep an element's own colors via `forced-color-adjust`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.forcedColors(u.forcedColorAdjust("none"))` | `css({ "@media (forced-colors: active)": { forcedColorAdjust: "none" } })` |

## Examples

### Basic example

Use `forcedColors(...)` to apply utilities when the system forces its own palette, as a Windows contrast theme does, to restore cues that color alone carried. Emulate `forced-colors: active` in your browser's dev tools to see the border appear:

```tsx
<span
	mix={[
		bg("success.solid"),
		fg("success.onSolid"),
		forcedColors(border({ width: 2 })),
		...,
	]}
>
	Online
</span>
```

### Keeping an element's colors

Pair it with `forcedColorAdjust("none")` on content whose color is the point, like a color picker's swatches:

```tsx
<div mix={[...]}>
	<div
		mix={[
			bg("color.brand.500"),
			is(12),
			bs(12),
			rounded("md"),
			forcedColors(forcedColorAdjust("none")),
		]}
	/>
	<div
		mix={[
			bg("color.success.500"),
			is(12),
			bs(12),
			rounded("md"),
			forcedColors(forcedColorAdjust("none")),
		]}
	/>
	<div
		mix={[
			bg("color.danger.500"),
			is(12),
			bs(12),
			rounded("md"),
			forcedColors(forcedColorAdjust("none")),
		]}
	/>
</div>
```

## Applying on a state

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

```ts
u.hover(u.forcedColors(u.forcedColorAdjust("none")))
```

## Signature

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