---
title: "Themes"
description: "The six built-in themes of HTMX UI — aurora, ember, lagoon, dusk, jade and onyx — with live previews, the exact values each file sets and a one-click apply for this site."
url: "https://susonwaiba.github.io/htmx-ui/docs/themes"
section: "Customization"
---
# Themes
The six built-in themes of HTMX UI — aurora, ember, lagoon, dusk, jade and onyx — with live previews, the exact values each file sets and a one-click apply for this site.
Six ready-made themes ship under `htmx-ui/themes/`. Using one takes the same two steps as [on the Theming page](https://susonwaiba.github.io/htmx-ui/docs/theming#built-in-themes) — import the file, set `data-theme` — so this page is the catalogue instead: what each one looks like, every value it sets, and a button that puts it on this site.
```css src/styles.css
@import "tailwindcss";
@import "htmx-ui/styles.css";
/* One, or several — an attribute picks which applies where. */
@import "htmx-ui/themes/aurora.css";
@import "htmx-ui/themes/onyx.css";
```
```html
```
Applying one is live: the buttons below — and the picker in this site's header — are plain `data-theme-palette` buttons wired by `initTheme()` ([Switching themes](https://susonwaiba.github.io/htmx-ui/docs/theming#switching-themes)). Each writes the site-wide `data-theme` and remembers the choice. Dark mode is independent, so flip that too and every theme shows its dark side.
## aurora
Violet → indigo → cyan on a cool, blue-black dark — and the theme this site itself runs on. 0.75rem corners.
```html
```
| Token | Light | Dark |
| --- | --- | --- |
| `--primary` | violet-600 | violet-500 |
| `--primary-foreground` | white | white |
| `--ring` | violet-500 | violet-400 |
| `--brand-gradient` | violet-600 → indigo-600 45% → cyan-600 | violet-300 → indigo-300 45% → cyan-300 |
| `--background` | white (default) | #0a0a0f |
| `--surface` | white (default) | #12121b |
| `--border` | zinc-200 (default) | #262633 |
| `--radius` | 0.75rem | 0.75rem |
Ships as `@import "htmx-ui/themes/aurora.css";`, applied by `data-theme="aurora"`; tokens not listed keep their [library value](https://susonwaiba.github.io/htmx-ui/docs/theming#tokens).
## ember
Amber → orange → rose on warm paper, ember-lit near-black when the lights go out. 0.625rem corners.
```html
```
| Token | Light | Dark |
| --- | --- | --- |
| `--primary` | orange-600 | orange-400 |
| `--primary-foreground` | white | #20120a |
| `--ring` | orange-500 | orange-300 |
| `--brand-gradient` | amber-600 → orange-600 45% → rose-600 | amber-300 → orange-300 45% → rose-300 |
| `--background` | #fffbf7 | #150e0a |
| `--surface` | white (default) | #1f1510 |
| `--border` | zinc-200 (default) | #382a21 |
| `--radius` | 0.625rem | 0.625rem |
Ships as `@import "htmx-ui/themes/ember.css";`, applied by `data-theme="ember"`; tokens not listed keep their [library value](https://susonwaiba.github.io/htmx-ui/docs/theming#tokens).
## lagoon
Teal → cyan → sky on ice-clear light, deep-sea dark for the other side. The roundest-at-1rem corner of the set.
```html
```
| Token | Light | Dark |
| --- | --- | --- |
| `--primary` | teal-600 | teal-400 |
| `--primary-foreground` | white | #04191c |
| `--ring` | cyan-500 | cyan-400 |
| `--brand-gradient` | teal-600 → cyan-600 45% → sky-600 | teal-300 → cyan-300 45% → sky-300 |
| `--background` | #f7fdfd | #04141a |
| `--surface` | white (default) | #0a222b |
| `--border` | zinc-200 (default) | #1c3d48 |
| `--radius` | 1rem | 1rem |
Ships as `@import "htmx-ui/themes/lagoon.css";`, applied by `data-theme="lagoon"`; tokens not listed keep their [library value](https://susonwaiba.github.io/htmx-ui/docs/theming#tokens).
## dusk
Pink → fuchsia → purple twilight, with the roundest corners in the set (1.25rem).
```html
```
| Token | Light | Dark |
| --- | --- | --- |
| `--primary` | fuchsia-600 | fuchsia-400 |
| `--primary-foreground` | white | #22082a |
| `--ring` | fuchsia-500 | fuchsia-300 |
| `--brand-gradient` | pink-600 → fuchsia-600 45% → purple-600 | pink-300 → fuchsia-300 45% → purple-300 |
| `--background` | #fdf9ff | #120a16 |
| `--surface` | white (default) | #1c1122 |
| `--border` | zinc-200 (default) | #332340 |
| `--radius` | 1.25rem | 1.25rem |
Ships as `@import "htmx-ui/themes/dusk.css";`, applied by `data-theme="dusk"`; tokens not listed keep their [library value](https://susonwaiba.github.io/htmx-ui/docs/theming#tokens).
## jade
Emerald → teal → lime: fresh mint in light, deep moss after rain in dark. The tightest colour corners at 0.5rem.
```html
```
| Token | Light | Dark |
| --- | --- | --- |
| `--primary` | emerald-600 | emerald-400 |
| `--primary-foreground` | white | #06251a |
| `--ring` | emerald-500 | emerald-300 |
| `--brand-gradient` | emerald-600 → teal-600 45% → lime-600 | emerald-300 → teal-300 45% → lime-400 |
| `--background` | #f7fdf9 | #07140f |
| `--surface` | white (default) | #0d211a |
| `--border` | zinc-200 (default) | #1e3a2e |
| `--radius` | 0.5rem | 0.5rem |
Ships as `@import "htmx-ui/themes/jade.css";`, applied by `data-theme="jade"`; tokens not listed keep their [library value](https://susonwaiba.github.io/htmx-ui/docs/theming#tokens).
## onyx
Graphite on paper, silver on true black — the monochrome counterpoint to the colourful five, with crisp 0.375rem corners.
```html
```
| Token | Light | Dark |
| --- | --- | --- |
| `--primary` | zinc-950 | zinc-100 |
| `--primary-foreground` | white | zinc-950 |
| `--ring` | zinc-700 | zinc-400 |
| `--brand-gradient` | zinc-600 → zinc-950 45% → zinc-700 | zinc-400 → zinc-100 45% → zinc-300 |
| `--background` | #fafafa | #0a0a0a |
| `--surface` | white (default) | #141414 |
| `--border` | zinc-200 (default) | #2a2a2a |
| `--radius` | 0.375rem | 0.375rem |
Ships as `@import "htmx-ui/themes/onyx.css";`, applied by `data-theme="onyx"`; tokens not listed keep their [library value](https://susonwaiba.github.io/htmx-ui/docs/theming#tokens).
All six redefine the same small set — `--radius`, `--primary`, `--primary-foreground`, `--ring` and `--brand-gradient` — plus a tinted light `--background` where it suits, and in dark mode a brighter `--primary`, a new `--brand-gradient` and the `--background` / `--surface` / `--border` trio. Every other token keeps the library's value, so components never shift. Each file is a few hundred bytes: import all the ones you might switch between and the picker will offer exactly those.