Theme:
Theme Gallery
DengaUI ships with 5 built-in themes, all authored in OKLCH. Each card below previews its own theme - click one to apply it across the whole page.
Live Preview
These components update instantly when you switch themes above.
Buttons
Badges
Primary
Secondary
Accent
Info
Success
Warning
Error
Alerts
This is an informational message.
Operation completed successfully.
Please review before continuing.
Something went wrong.
Forms
Card
Card Title
This card adapts to whichever theme is active.
Custom Themes
Create your own theme by defining CSS variables. Pass custom themes via the plugin options:
/* In your CSS file */
@plugin "dengaui" {
default-theme: my-brand;
}
/* Or define variables directly. Built-in themes use OKLCH,
but any valid CSS color (hex, rgb, oklch) works. */
[data-theme="my-brand"] {
--dui-color-primary: oklch(0.56 0.11 190);
--dui-color-primary-content: oklch(0.99 0 0);
--dui-color-secondary: oklch(0.62 0.17 35);
--dui-color-secondary-content: oklch(0.99 0 0);
--dui-color-accent: oklch(0.72 0.13 200);
--dui-color-accent-content: oklch(0.21 0.03 215);
--dui-color-neutral: oklch(0.30 0.025 215);
--dui-color-neutral-content: oklch(0.98 0 0);
--dui-color-base-100: oklch(1 0 0);
--dui-color-base-200: oklch(0.975 0.005 200);
--dui-color-base-300: oklch(0.925 0.009 200);
--dui-color-base-content: oklch(0.22 0.02 210);
/* ... info, success, warning, error ... */
--dui-radius-md: 0.5rem;
--dui-shadow-md: 0 4px 8px -2px rgb(16 24 40 / 0.10);
--dui-font-sans: Inter, system-ui, sans-serif;
}