[ @sdxc/u/effects ]

invert

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

invert(0.2)

invert(0.8)

invert()

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

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

u.hover(u.invert())

Responsive design

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

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

Signature

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