Themes
Every Hummingbird component supports light and dark mode out of the box, and eight prebuilt color themes let you change the whole look with a single import.
Light & dark mode
DocsAll colors are semantic CSS variables. Dark mode overrides the same variables, so switching needs no markup changes.
Try it
You're viewing the lightdark mode. The whole kit switches when you toggle.
Emma Watson
Product designer
Semantic tokens keep contrast and hierarchy consistent in both modes.
<div class="grid gap-6 md:grid-cols-2">
<div class="card">
<div class="card-body">
<div class="mb-4 flex items-center gap-3">
<div class="avatar avatar-lg">
<img src="/images/avatar/avatar_1.webp" alt="Avatar" class="rounded-full" />
</div>
<div>
<h5 class="card-title max-md:text-xl mb-0">Emma Watson</h5>
<p class="mb-0 text-sm text-muted">Product designer</p>
</div>
</div>
<p class="text-muted">Semantic tokens keep contrast and hierarchy consistent in both modes.</p>
<div class="flex gap-2">
<button type="button" class="btn btn-primary">Follow</button>
<button type="button" class="btn btn-outline-neutral">Message</button>
</div>
</div>
</div>
<div class="space-y-4">
<div class="alert alert-subtle-info" role="alert">Your changes were saved automatically.</div>
<div>
<label for="themeDemoEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="themeDemoEmail" placeholder="name@example.com" />
</div>
<div class="progress" role="progressbar" aria-label="Upload progress" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar w-[65%]"></div>
</div>
</div>
</div>How it works
The kit uses class-based dark mode. Add this custom variant after importing Tailwind CSS and Hummingbird:
@import 'tailwindcss';
@import '@hummingbirdui/hummingbird';
@custom-variant dark (&:where(.dark, .dark *), .dark);
Then set the class on <html> before the page renders. The saved preference wins, and the
system preference is the fallback. The toggle logic lives in src/js/main.js.
<script>
document.documentElement.classList.toggle(
'dark',
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches),
);
</script>Prebuilt themes
DocsHummingbird ships eight hand-tuned color themes. Each one includes its own light and dark palette.
Default
The signature Hummingbird theme with balanced neutrals and vibrant blue accents.
Luxury
Rich maroon and golden tones crafted for a refined, premium appearance.
Retro
Warm vintage-inspired colors that bring a classic and timeless feel.
Arctic
Cool blues and frosty tones inspired by modern winter landscapes.
Nature
Fresh greens and earthy shades inspired by the natural world.
Dracula
Deep purples and vivid pinks designed for bold, high-contrast interfaces.
Ember
Warm oranges and amber tones that create an energetic, glowing aesthetic.
Midnight
Deep blues and indigos designed for calm, modern dark experiences.
Using a theme
The Default theme is included automatically. To use another one, import its CSS file after
Hummingbird in src/css/style.css. Import only one theme at a time.
@import 'tailwindcss';
@import '@hummingbirdui/hummingbird';
/* pick one */
@import '@hummingbirdui/hummingbird/src/themes/luxury.css';
/* @import '@hummingbirdui/hummingbird/src/themes/retro.css'; */
/* @import '@hummingbirdui/hummingbird/src/themes/arctic.css'; */
/* @import '@hummingbirdui/hummingbird/src/themes/nature.css'; */
/* @import '@hummingbirdui/hummingbird/src/themes/dracula.css'; */
/* @import '@hummingbirdui/hummingbird/src/themes/ember.css'; */
/* @import '@hummingbirdui/hummingbird/src/themes/midnight.css'; */Customizing tokens
Override any variable in an @theme block to match your brand:
@theme {
--color-primary: var(--color-emerald-600);
--background-color-default: var(--color-stone-50);
}