Theme Preview

Click a theme tab above to preview global color changes.

Notes

Apply any theme class to any element — <html class="theme-forest">, <div class="theme-neon dark">. All descendants inherit the theme colors.
Combine with dark class for dark mode: <div class="theme-sakura dark">.
Available themes: theme-forest, theme-ocean, theme-sunset, theme-lavender, theme-noir, theme-cyber, theme-sakura, theme-morandi, theme-peach, theme-terracotta, theme-glacier, theme-amber, theme-minimal, theme-twilight, theme-neon, theme-aurora, theme-midnight.

Color swatches

primary

secondary

tertiary

warning

caution

highlight

info

success

error

ink

Buttons

Callout & Alarm & Badge

callout-info

callout-success

callout-warning

callout-error

alarm-info

alarm-success

alarm-warning

alarm-error

Primary Success Warning Error Info

Tag & Status & Link

Primary Success Warning Error Info

Online Away Offline

Primary link Success link Underline link

Creating custom themes

Define your own theme using Tailwind's @utility syntax in any CSS file. Follow the same pattern as the built-in themes:

/* Custom ocean theme */
@utility theme-ocean {
    --color-primary-base: #0a5fb4;
    --color-secondary-base: #0f9baa;
    --color-tertiary-base: #4fd1c5;
    --color-warning-base: #f0883e;
    --color-caution-base: #e8b64a;
    --color-highlight-base: #cfe066;
    --color-info-base: #2196d8;
    --color-success-base: #2e9e6b;
    --color-error-base: #e15a4d;
    --color-ink-base: #0b1c2c;

    @apply light;
}

Note: Custom themes do not need @apply dark; — dark mode is handled automatically by the system. In dark mode, color saturation decreases automatically. Text color derives from --color-ink-base: in light mode it equals the ink color; in dark mode the text inverts to white automatically.

For details on color variables, see demo-color.html.