Examples
Data attribute
Applying themes via data attributes instead of CSS classes.
Edit on GitHub
Last updated on
Instead of adding a class to <html>, you can set a data-* attribute. This is useful when you want to avoid conflicts with existing class-based styling.
Setup
<ThemeProvider attribute="data-theme">
{children}
</ThemeProvider>This sets data-theme="light" or data-theme="dark" on <html>. Use it in CSS:
[data-theme="light"] {
--bg: #ffffff;
--fg: #0a0a0a;
}
[data-theme="dark"] {
--bg: #09090b;
--fg: #fafafa;
}Custom attribute values
Map theme names to different attribute values using the value prop:
<ThemeProvider
attribute="data-mode"
value={{ light: "light-mode", dark: "dark-mode" }}
>
{children}
</ThemeProvider>[data-mode="light-mode"] { --bg: #ffffff; }
[data-mode="dark-mode"] { --bg: #09090b; }Multiple attributes
Apply multiple attributes at once by passing an array:
<ThemeProvider attribute={["class", "data-theme"]}>
{children}
</ThemeProvider>This sets both the dark class and data-theme="dark" simultaneously, useful when mixing Tailwind with CSS variable styles.