# invert

> Inverts colors (`1`, the default, fully) to flip single-color raster assets for dark mode.

```ts
import { invert } from "@sdxc/u/effects";
```

Inverts colors (`1`, the default, fully) to flip single-color raster assets
for dark mode. Composes through the shared composite `filter` declaration,
so it combines with every other filter utility.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.invert()` | `css({ "--ui-filter-invert": "1", filter: "... invert(var(--ui-filter-invert, 0)) ..." })` |

## Examples

### Basic example

Use `invert(n)` to invert an element's colors, where `invert()` with no argument inverts them fully:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<img mix={[invert(0.2), ...]} src={...} alt="" />
		<span mix={[...]}>invert(0.2)</span>
	</div>
	<div mix={[...]}>
		<img mix={[invert(0.8), ...]} src={...} alt="" />
		<span mix={[...]}>invert(0.8)</span>
	</div>
	<div mix={[...]}>
		<img mix={[invert(), ...]} src={...} alt="" />
		<span mix={[...]}>invert()</span>
	</div>
</div>
```

### Inverting in dark mode

Wrap it in `dark()` to flip a single-color asset only when the dark color scheme is active. Switch the site's theme to see it change:

```tsx
<svg viewBox="0 0 24 24" fill="black" mix={[dark(invert()), ...]}>
	<path d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z" />
</svg>
```

## Applying on a state

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

```ts
u.hover(u.invert())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.invert())
```

## Signature

```ts
u.invert(value?: number | (string & {}))
```