Skip to content
HyperUI

No results found.

Dark Mode Generator

Paste Tailwind CSS HTML below and get dark mode variants added automatically. Configure rules to control which elements and colors are transformed.

Paste HTML
Preview

Rule examples

Rules let you override the shade map for specific utilities, shades, or colours. The first matching enabled rule wins.

Make all text lighter in dark mode

Match any text-* class and force shade 300 in dark mode, regardless of the shade map.

Utilities
text
Shade
—
In dark mode
300

Invert heavy backgrounds, skip buttons

Match bg-* at shade 900 and map it to 100 in dark mode, but skip <button> elements.

Utilities
bg
Shade
900
In dark mode
100
Skip elements
button

Keep brand colours untouched

Match any utility but exclude indigo and violet so brand colours pass through without modification.

Utilities
—
Shade
—
In dark mode
—
Skip colours
indigo, violet
HyperUX — Behavior-first Alpine.js patterns you can copy, adapt, and ship.