TailwindCSS plugin for setting up multiple themes based on css variables
npm install tailwindcss-variable-themesTailwindCSS plugin for setting up multiple themes based on css variables
https://tailwindcss-variable-themes.ewgenius.me/custom (code)
https://tailwindcss-variable-themes.ewgenius.me/radix-colors (code)
https://tailwindcss-variable-themes.ewgenius.me/tailwind-colors (code)
Install the plugin from npm:
``sh`
npm install -D tailwindcss-variable-themes
Then add the plugin to your tailwind.config.js file:
`js
const tailwindThemePlugin = require("tailwindcss-variable-themes");
module.exports = {
theme: {
// ...
},
plugins: [
tailwindThemePlugin({
themes: {
light: {
primary: {
foreground: "#000",
background: "#fff",
// ...
},
accent: {
// ...
},
},
dark: {
// ...
},
},
}),
],
};
`
Add theme class to the root of your application:
`html`
Dictionary with theme declarations
`js
themes: {
// light theme
light: {
// primary palette
primary: {
// primary palette colors
foreground: "#000",
background: "#fff",
// ...
},
// accent palette
accent: {
// ...
},
},
dark: {
primary: {
foreground: "#fff",
background: "#000",
// ...
}
// ...
},
},
`
Prefix for generated utility classes
Theme, from previous example will generate following tailwind classes for setting up theme:
`css
.theme-light {
--primary-foreground: #000;
--primary-background: #fff;
/ ... /
}
.theme-dark {
--primary-foreground: #fff;
--primary-background: #000;
/ ... /
}
``
You can specify custom mapper, in case if you need more control over generated variable names