DaisyUI's comprehensive theming system with 37 built-in themes, CSS custom properties, and dynamic theme switching capabilities.
DaisyUI provides 37 built-in themes covering light, dark, and colorful variations.
/**
* Complete array of available theme names in order
*/
const themeOrder: readonly string[] = [
"light", "dark", "cupcake", "bumblebee", "emerald", "corporate",
"synthwave", "retro", "cyberpunk", "valentine", "halloween",
"garden", "forest", "aqua", "lofi", "pastel", "fantasy",
"wireframe", "black", "luxury", "dracula", "cmyk", "autumn",
"business", "acid", "lemonade", "night", "coffee", "winter",
"dim", "nord", "sunset", "caramellatte", "abyss", "silk"
];DaisyUI uses CSS custom properties to enable easy theme switching and customization.
/**
* CSS custom properties for theme integration with Tailwind
*/
const variables: {
colors: {
// Base colors
"base-100": "var(--color-base-100)"; // Main background
"base-200": "var(--color-base-200)"; // Secondary background
"base-300": "var(--color-base-300)"; // Tertiary background
"base-content": "var(--color-base-content)"; // Text on base colors
// Brand colors
"primary": "var(--color-primary)";
"primary-content": "var(--color-primary-content)";
"secondary": "var(--color-secondary)";
"secondary-content": "var(--color-secondary-content)";
"accent": "var(--color-accent)";
"accent-content": "var(--color-accent-content)";
"neutral": "var(--color-neutral)";
"neutral-content": "var(--color-neutral-content)";
// Semantic colors
"info": "var(--color-info)";
"info-content": "var(--color-info-content)";
"success": "var(--color-success)";
"success-content": "var(--color-success-content)";
"warning": "var(--color-warning)";
"warning-content": "var(--color-warning-content)";
"error": "var(--color-error)";
"error-content": "var(--color-error-content)";
};
borderRadius: {
"selector": "var(--radius-selector)";
"field": "var(--radius-field)";
"box": "var(--radius-box)";
};
};Multiple ways to switch themes dynamically in your application.
<!-- Method 1: data-theme attribute on html/body -->
<html data-theme="dark">
<!-- All content uses dark theme -->
</html>
<!-- Method 2: data-theme on specific elements -->
<div data-theme="synthwave">
<!-- This section uses synthwave theme -->
<button class="btn btn-primary">Synthwave Button</button>
</div>
<!-- Method 3: Theme controller with radio inputs -->
<input type="radio" name="theme-radios" class="theme-controller" value="light" />
<input type="radio" name="theme-radios" class="theme-controller" value="dark" />
<input type="radio" name="theme-radios" class="theme-controller" value="cupcake" />
<!-- Method 4: Theme controller with select -->
<select class="theme-controller" data-choose-theme>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="synthwave">Synthwave</option>
</select>
<!-- Method 5: Toggle for two themes -->
<input type="checkbox" value="dark" class="toggle theme-controller" />Programmatically switch themes using JavaScript.
/**
* Set theme using data-theme attribute
* @param theme - Theme name to apply
*/
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
}
/**
* Get current theme
* @returns Current theme name or null
*/
function getCurrentTheme() {
return document.documentElement.getAttribute('data-theme');
}
/**
* Toggle between light and dark themes
*/
function toggleTheme() {
const current = getCurrentTheme();
const newTheme = current === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
}
// Usage examples
setTheme('dark');
setTheme('synthwave');
setTheme('cupcake');Create custom themes by defining CSS custom properties.
/* Custom theme definition */
[data-theme="mytheme"] {
--color-primary: #661AE6;
--color-primary-content: #ffffff;
--color-secondary: #D926AA;
--color-secondary-content: #ffffff;
--color-accent: #1FB2A5;
--color-accent-content: #ffffff;
--color-neutral: #191D24;
--color-neutral-content: #A6ADBB;
--color-base-100: #ffffff;
--color-base-200: #F2F2F2;
--color-base-300: #E5E6E6;
--color-base-content: #1f2937;
--color-info: #3ABFF8;
--color-info-content: #002b3d;
--color-success: #36D399;
--color-success-content: #003320;
--color-warning: #FBBD23;
--color-warning-content: #382800;
--color-error: #F87272;
--color-error-content: #470000;
--radius-selector: 0.5rem;
--radius-field: 0.25rem;
--radius-box: 1rem;
}Define custom themes directly in your Tailwind configuration.
/**
* Custom theme definition in Tailwind config
*/
module.exports = {
plugins: [require('daisyui')],
daisyui: {
themes: [
"light",
"dark",
{
mytheme: {
"primary": "#a991f7",
"secondary": "#f6d860",
"accent": "#37cdbe",
"neutral": "#3d4451",
"base-100": "#ffffff",
"base-200": "#f9fafb",
"base-300": "#f3f4f6",
"base-content": "#1f2937",
"info": "#3abff8",
"success": "#36d399",
"warning": "#fbbd23",
"error": "#f87272",
},
},
],
},
}Detect and persist user theme preferences.
/**
* Save theme preference to localStorage
* @param theme - Theme name to save
*/
function saveThemePreference(theme) {
localStorage.setItem('theme', theme);
}
/**
* Load theme preference from localStorage
* @returns Saved theme name or default
*/
function loadThemePreference() {
return localStorage.getItem('theme') || 'light';
}
/**
* Initialize theme from localStorage or system preference
*/
function initializeTheme() {
const savedTheme = loadThemePreference();
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
setTheme(theme);
}
/**
* Listen for system theme changes
*/
function watchSystemTheme() {
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
setTheme(e.matches ? 'dark' : 'light');
}
});
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
initializeTheme();
watchSystemTheme();
});Build components that respond to theme changes.
/**
* React hook for theme awareness
*/
function useTheme() {
const [theme, setThemeState] = React.useState(() => getCurrentTheme());
const changeTheme = React.useCallback((newTheme) => {
setTheme(newTheme);
setThemeState(newTheme);
saveThemePreference(newTheme);
}, []);
React.useEffect(() => {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'data-theme') {
setThemeState(getCurrentTheme());
}
});
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-theme']
});
return () => observer.disconnect();
}, []);
return { theme, changeTheme };
}Access theme color tokens in CSS and JavaScript.
/* Using theme colors in custom CSS */
.my-component {
background-color: oklch(var(--p)); /* Primary color */
color: oklch(var(--pc)); /* Primary content */
border-color: oklch(var(--b2)); /* Base-200 */
}
/* Or using CSS custom properties */
.my-component {
background-color: var(--color-primary);
color: var(--color-primary-content);
border-color: var(--color-base-200);
}/**
* Get computed theme color values
* @param colorName - CSS custom property name
* @returns Computed color value
*/
function getThemeColor(colorName) {
return getComputedStyle(document.documentElement)
.getPropertyValue(`--color-${colorName}`)
.trim();
}
// Usage
const primaryColor = getThemeColor('primary');
const backgroundColor = getThemeColor('base-100');type ThemeName =
| "light" | "dark" | "cupcake" | "bumblebee" | "emerald" | "corporate"
| "synthwave" | "retro" | "cyberpunk" | "valentine" | "halloween"
| "garden" | "forest" | "aqua" | "lofi" | "pastel" | "fantasy"
| "wireframe" | "black" | "luxury" | "dracula" | "cmyk" | "autumn"
| "business" | "acid" | "lemonade" | "night" | "coffee" | "winter"
| "dim" | "nord" | "sunset" | "caramellatte" | "abyss" | "silk";
interface CustomTheme {
[key: string]: string;
"primary"?: string;
"primary-content"?: string;
"secondary"?: string;
"secondary-content"?: string;
"accent"?: string;
"accent-content"?: string;
"neutral"?: string;
"neutral-content"?: string;
"base-100"?: string;
"base-200"?: string;
"base-300"?: string;
"base-content"?: string;
"info"?: string;
"info-content"?: string;
"success"?: string;
"success-content"?: string;
"warning"?: string;
"warning-content"?: string;
"error"?: string;
"error-content"?: string;
}
interface Variables {
colors: {
[K in keyof CustomTheme]: string;
};
borderRadius: {
selector: string;
field: string;
box: string;
};
}
type ThemeConfig = ThemeName | CustomTheme | { [themeName: string]: CustomTheme };