DengaUI ships with five built-in themes powered by CSS custom properties. Switch themes instantly with a single attribute.
Switching Themes
Set the data-theme attribute on any parent element. Typically you set it on <html> to theme the entire page:
<html data-theme="denga-light">
<!-- All components use the light theme -->
</html>
Switch themes at runtime with JavaScript:
// Switch to dark theme
document.documentElement.setAttribute('data-theme', 'denga-dark');
// Or read the current theme
const current = document.documentElement.getAttribute('data-theme');
You can also scope themes to a section of the page. Child elements inherit the closest ancestor's theme:
DengaUI includes five carefully crafted themes. Click the theme buttons in the top bar to preview them live on this page.
Theme
Value
Description
Denga Light
denga-light
Clean light theme with blue primary. Default.
Denga Dark
denga-dark
Dark companion to the default light theme.
Savanna
savanna
Warm earthy tones inspired by the African savanna.
Midnight
midnight
Deep dark theme with rich contrast and purple accents.
Sunrise
sunrise
Bright and warm with orange and coral tones.
SuccessWarningError
Auto Dark Mode
Respect the user's system preference with a small JavaScript snippet. This switches between denga-light and denga-dark based on prefers-color-scheme:
// Place in <head> or early in your JS to avoid flash
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
function applySystemTheme() {
const theme = prefersDark.matches ? 'denga-dark' : 'denga-light';
document.documentElement.setAttribute('data-theme', theme);
}
// Apply on load
applySystemTheme();
// React to system changes
prefersDark.addEventListener('change', applySystemTheme);
To let users override the system preference, store their choice in localStorage and check it first:
function getTheme() {
const saved = localStorage.getItem('theme');
if (saved) return saved;
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'denga-dark'
: 'denga-light';
}
function setTheme(name) {
document.documentElement.setAttribute('data-theme', name);
localStorage.setItem('theme', name);
}
// Initialize
setTheme(getTheme());
Custom Themes
Create your own theme by defining CSS custom properties under a [data-theme] selector. All DengaUI components read from these variables, so changing them recolors everything automatically:
Every theme must define the following CSS custom properties. All color values use the oklch() color space for perceptual uniformity:
Brand Colors
--dui-color-primary /* Primary brand color */
--dui-color-primary-content /* Text on primary backgrounds */
--dui-color-secondary /* Secondary brand color */
--dui-color-secondary-content /* Text on secondary backgrounds */
--dui-color-accent /* Accent / highlight color */
--dui-color-accent-content /* Text on accent backgrounds */
--dui-color-neutral /* Neutral / muted color */
--dui-color-neutral-content /* Text on neutral backgrounds */
Base / Surface Colors
--dui-color-base-100 /* Page background */
--dui-color-base-200 /* Slightly darker surface (cards, inputs) */
--dui-color-base-300 /* Borders, dividers, subtle backgrounds */
--dui-color-base-content /* Default text color on base surfaces */
State Colors
--dui-color-info /* Informational */
--dui-color-info-content /* Text on info backgrounds */
--dui-color-success /* Success / positive */
--dui-color-success-content /* Text on success backgrounds */
--dui-color-warning /* Warning / caution */
--dui-color-warning-content /* Text on warning backgrounds */
--dui-color-error /* Error / destructive */
--dui-color-error-content /* Text on error backgrounds */
Layout Tokens
--dui-radius-sm /* Small border radius (badges, inputs) */
--dui-radius-md /* Medium border radius (buttons, cards) */
--dui-radius-lg /* Large border radius (modals, drawers) */
You can reference these variables directly in your own styles: