ThemeProvider

⚠️ Most apps don't need ThemeProvider but will benefit from ThemeController. You generally only need ThemeProvider to apply a different theme to a subsection of your app or to snoop the CSS variables into JavaScript variables.

ThemeProvider is a special use component for applying DaisyUI theme variables and attributes to any part of your app. It parses DaisyUI plugin theme strings, applies CSS variables as inline styles, and sets non-variable attributes as data attributes.

The theme prop lets you specify a named theme that you have pre-programmed in your DaisyUI config. If you also provide the cssVars prop, its values will override the named theme, allowing for granular customization or one-off theme adjustments.

You can nest multiple ThemeProvider instances. Whichever ThemeProvider is the closest parent to a given element in the DOM will control the theme for that section, ensuring precise and predictable theme scoping.

This enables dynamic theme switching, dark/light mode support, and granular theme customization for your components or app sections.

Basic Example

Basic ThemeProvider

This section uses the some-custom theme.

Code Example

Basic.vue

Components

ThemeProvider is a standalone component.

ThemeProvider

The ThemeProvider component is the context provider for DaisyUI themes. It parses theme strings, applies variables and data attributes, and provides a reactive theme context to all descendants via both slot props and Vue's inject API. Supports dynamic switching, dark/light mode, and custom meta attributes.

ThemeProvider Props	Type	Description
dataTheme	string	Optional theme name. Sets the `data-theme` attribute unless a `name:` property is present in `cssVars`, in which case the `name` value takes precedence.
cssVars	string	The DaisyUI theme string in plugin format. CSS variables and meta attributes are parsed and applied to the subtree. If the string contains a `name:` property, it will override the `dataTheme` prop for the `data-theme` value.
snoop	boolean	When enabled, provides live CSS variable values as computed from the rendered element and updates them reactively. Useful for theme editors, previews, and debugging.

ThemeProvider Provides	Type	Description
slotData	object	The computed theme context object, always reactive. Contains both the `vars` object (theme variables) and the `toThemeString` function. Provided via Vue inject API and as slot props.
vars	object	The current DaisyUI theme variables as a flat object. When `snoop` is enabled, these are computed from the live DOM; otherwise, parsed from the theme string.
toThemeString	Function	Utility function to convert the current theme variables to a DaisyUI theme string (plugin format). Useful for theme editors, export, or debugging.
parsed	object	The parsed structure containing `style`, `dataAttrs`, and `dataTheme` for the current theme string. Used internally and available for advanced use cases.

ThemeProvider

Basic Example

Components

ThemeProvider

Examples

Dark Mode

Custom Attributes

Dynamic Switching

Dynamic Switching (Snoop)

Snoop

Snoop to Theme String

Theme Selection

Inject