ThemeController

The ThemeController component is a flexible wrapper for DaisyUI theme management in Vue and Nuxt applications. It exposes a composable slot API for building custom theme switchers, supporting:

  • Dynamic theme switching (light, dark, or custom themes)
  • Persistence via cookies, localStorage, or in-memory refs
  • Global or per-component usage
  • Custom theme registration and removal

Basic Example

Current Theme:
system
Code Example
Basic.vue
 Components 
The ThemeController components include the following:
  • ThemeController - The wrapper. Its props control available themes, default, and storage.
  • ThemeTile - A square preview tile for DaisyUI themes, showing four key theme colors.
  • useDaisyTheme - Composable for DaisyUI theme management and switching.
ThemeController
The ThemeController component is the wrapper. Its props control available themes, the default theme, and the storage mechanism for persistence.
ThemeController Props  Type  Description 
themes
DaisyThemeInput[]
An array of theme names or theme objects to provide as options.
defaultTheme
string
The default theme name (can be 'system', 'light', 'dark', or any registered theme).
storage
Function
Optional. A storage function for persistence (e.g., useCookie, useLocalStorage, or ref). If not provided, uses in-memory ref storage.
ThemeController Slots  Description 
default
The default slot. Receives all theme management state and actions as slot props for building custom theme switchers.
ThemeController Provides  Type  Description 
theme

Ref

The current theme name (reactive).
effectiveTheme

ComputedRef

The actual theme applied (resolves 'system' to system preference).
themes

Ref<DaisyThemeMeta

>

The array of available theme objects.
availableThemes

ComputedRef<string

>

The array of available theme names.
setTheme

Function

Sets the current theme by name.
cycleTheme

Function

Cycles to the next theme in the list.
registerTheme

Function

Registers a new theme at runtime.
removeTheme

Function

Removes a theme by name at runtime.
ThemeTile
The ThemeTile component renders a square preview tile that visually represents a DaisyUI theme using its primary, secondary, accent, and neutral colors. It is used to give users a quick visual indication of a theme's palette, and is commonly used in theme switchers and pickers. You can control its size and theme via props.
ThemeTile Props  Type  Description 
theme
string
Theme name to preview. Sets the data-theme attribute for color context.
size
'xs' | 'sm' | 'md' | 'lg' | 'xl'

Size of the tile. Defaults to 'md'.
   
xs
boolean
Shorthand for size="xs".
   
sm
boolean
Shorthand for size="sm".
   
md
boolean
Shorthand for size="md".
   
lg
boolean
Shorthand for size="lg".
   
xl
boolean
Shorthand for size="xl".
useDaisyTheme
The useDaisyTheme composable provides a reactive API for managing DaisyUI themes in Nuxt and Vue apps. It supports switching, cycling, registering, and removing themes, and works with cookies, localStorage, or in-memory storage. Can be used globally (in app.vue) or per-component. Note: The "provides" documented below are actually the keys in the return object of the composable.
useDaisyTheme Props  Type  Description 
storage
Function
Optional. A storage function for persistence (e.g., useCookie, useLocalStorage, or ref). If not provided, uses in-memory ref storage.
options
DaisyThemeOptions
Optional. Options object to configure available themes and default theme.
   
themes
DaisyThemeInput[]
Array of theme names or objects to provide as options.
   
defaultTheme
string
The default theme name (can be 'system', 'light', 'dark', or any registered theme).
useDaisyTheme Provides  Type  Description 
themes
Ref<DaisyThemeMeta>
The array of available theme objects.
theme
Ref
The current theme name (reactive).
effectiveTheme
ComputedRef
The actual theme applied (resolves 'system' to system preference).
themeInfo
ComputedRef<DaisyThemeMeta | undefined>
The current theme object, or undefined if not found.
setTheme
Function
Sets the current theme by name.
cycleTheme
Function
Cycles to the next theme in the list.
registerTheme
Function
Registers a new theme at runtime.
removeTheme
Function
Removes a theme by name at runtime.
Full list of DaisyUI themes
Here is the full list of themes that are available in DaisyUI. You can use any of these themes in the themes prop of the ThemeController component as long as you have the theme installed in your project.
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

Examples
useDaisyTheme
The logic for the ThemeController component is provided by the useDaisyTheme composable. The composable uses an internal global state, so you can call
 Current Theme: 
system
 Code Example 
UseDaisyTheme.vue
DaisyUI Kit 🌼