Themes · HTMX UI

Six ready-made themes ship under htmx-ui/themes/. Using one takes the same two steps as on the Theming page — 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.

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

<!-- Whole site -->
<html lang="en" data-theme="aurora">

<!-- Or one section -->
<section data-theme="dusk">…</section>

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

aurora

Pro

Violet buttons and gradient headlines on the library's plain white; near-black dark with a violet glow.

html

<div data-theme="aurora" class="w-full max-w-xl rounded-[calc(var(--radius)+4px)] bg-background p-4">
  <div class="card">
    <div class="card-header">
      <div class="flex items-center justify-between gap-2">
        <h3 class="card-title capitalize">aurora</h3>
        <span class="badge badge-primary">Pro</span>
      </div>
      <p class="card-description">
        Violet buttons and <code class="text-gradient font-semibold">gradient headlines</code>
        on the library's plain white; near-black dark with a violet glow.
      </p>
    </div>
    <div class="card-footer pt-6">
      <button type="button" class="btn btn-primary btn-sm" data-theme-palette="aurora" aria-pressed="false">Apply aurora</button>
    </div>
  </div>
</div>

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.

ember#

Amber → orange → rose on warm paper, ember-lit near-black when the lights go out. 0.625rem corners.

ember

Pro

Orange buttons on warm paper (#fffbf7), gradient headlines, 0.625rem corners; coals in the dark.

html

<div data-theme="ember" class="w-full max-w-xl rounded-[calc(var(--radius)+4px)] bg-background p-4">
  <div class="card">
    <div class="card-header">
      <div class="flex items-center justify-between gap-2">
        <h3 class="card-title capitalize">ember</h3>
        <span class="badge badge-primary">Pro</span>
      </div>
      <p class="card-description">
        Orange buttons on warm paper (#fffbf7), <code class="text-gradient font-semibold">gradient headlines</code>,
        0.625rem corners; coals in the dark.
      </p>
    </div>
    <div class="card-footer pt-6">
      <button type="button" class="btn btn-primary btn-sm" data-theme-palette="ember" aria-pressed="false">Apply ember</button>
    </div>
  </div>
</div>

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.

lagoon#

Teal → cyan → sky on ice-clear light, deep-sea dark for the other side. The roundest-at-1rem corner of the set.

lagoon

Pro

Teal buttons on ice-clear light (#f7fdfd), gradient headlines, 1rem corners; underwater dark.

html

<div data-theme="lagoon" class="w-full max-w-xl rounded-[calc(var(--radius)+4px)] bg-background p-4">
  <div class="card">
    <div class="card-header">
      <div class="flex items-center justify-between gap-2">
        <h3 class="card-title capitalize">lagoon</h3>
        <span class="badge badge-primary">Pro</span>
      </div>
      <p class="card-description">
        Teal buttons on ice-clear light (#f7fdfd), <code class="text-gradient font-semibold">gradient headlines</code>,
        1rem corners; underwater dark.
      </p>
    </div>
    <div class="card-footer pt-6">
      <button type="button" class="btn btn-primary btn-sm" data-theme-palette="lagoon" aria-pressed="false">Apply lagoon</button>
    </div>
  </div>
</div>

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.

dusk#

Pink → fuchsia → purple twilight, with the roundest corners in the set (1.25rem).

dusk

Pro

Fuchsia buttons on a lilac haze (#fdf9ff), gradient headlines, extra-round corners; nightfall dark.

html

<div data-theme="dusk" class="w-full max-w-xl rounded-[calc(var(--radius)+4px)] bg-background p-4">
  <div class="card">
    <div class="card-header">
      <div class="flex items-center justify-between gap-2">
        <h3 class="card-title capitalize">dusk</h3>
        <span class="badge badge-primary">Pro</span>
      </div>
      <p class="card-description">
        Fuchsia buttons on a lilac haze (#fdf9ff), <code class="text-gradient font-semibold">gradient headlines</code>,
        extra-round corners; nightfall dark.
      </p>
    </div>
    <div class="card-footer pt-6">
      <button type="button" class="btn btn-primary btn-sm" data-theme-palette="dusk" aria-pressed="false">Apply dusk</button>
    </div>
  </div>
</div>

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.

jade#

Emerald → teal → lime: fresh mint in light, deep moss after rain in dark. The tightest colour corners at 0.5rem.

jade

Pro

Emerald buttons on barely-there mint (#f7fdf9), gradient headlines, 0.5rem corners; moss-dark.

html

<div data-theme="jade" class="w-full max-w-xl rounded-[calc(var(--radius)+4px)] bg-background p-4">
  <div class="card">
    <div class="card-header">
      <div class="flex items-center justify-between gap-2">
        <h3 class="card-title capitalize">jade</h3>
        <span class="badge badge-primary">Pro</span>
      </div>
      <p class="card-description">
        Emerald buttons on barely-there mint (#f7fdf9), <code class="text-gradient font-semibold">gradient headlines</code>,
        0.5rem corners; moss-dark.
      </p>
    </div>
    <div class="card-footer pt-6">
      <button type="button" class="btn btn-primary btn-sm" data-theme-palette="jade" aria-pressed="false">Apply jade</button>
    </div>
  </div>
</div>

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.

onyx#

Graphite on paper, silver on true black — the monochrome counterpoint to the colourful five, with crisp 0.375rem corners.

onyx

Pro

Near-black buttons on graphite white (#fafafa), gradient headlines, crisp corners; true-black dark with a silver button.

html

<div data-theme="onyx" class="w-full max-w-xl rounded-[calc(var(--radius)+4px)] bg-background p-4">
  <div class="card">
    <div class="card-header">
      <div class="flex items-center justify-between gap-2">
        <h3 class="card-title capitalize">onyx</h3>
        <span class="badge badge-primary">Pro</span>
      </div>
      <p class="card-description">
        Near-black buttons on graphite white (#fafafa), <code class="text-gradient font-semibold">gradient headlines</code>,
        crisp corners; true-black dark with a silver button.
      </p>
    </div>
    <div class="card-footer pt-6">
      <button type="button" class="btn btn-primary btn-sm" data-theme-palette="onyx" aria-pressed="false">Apply onyx</button>
    </div>
  </div>
</div>

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.

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.