TailwindCSS plugin for setting up multiple themes based on css variables
https://tailwindcss-variable-themes.vercel.app/custom (code)
https://tailwindcss-variable-themes.vercel.app/radix-colors (code)
https://tailwindcss-variable-themes.vercel.app/radix-semantic (code)
https://tailwindcss-variable-themes.vercel.app/tailwind-colors (code)
Install the plugin from npm:
npm install -D tailwindcss-variable-themesThen add the plugin to your tailwind.config.js file:
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:
<body class="theme-light">
<!-- ... -->
</body>Dictionary with theme declarations
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:
.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