TailwindCSS Theme Shift Plugin
Add multiple themes to your TailwindCSS project with autoMap classes support, fast and easy!
How to use?
- Map colors to the desired themes in your
tailwind.config.js
. - Add this plugin to your tailwind's config, pass those arguments in order:
- colors: Your tailwind config's color object.
- defaultTheme: The key of your default theme, e.p: "light".
- autoMap: A boolean that indicates whether you want to auto-map one class name to all of your themes (
bg-primary
could map tobg-primary dark:bg-primary-dark cosmic:bg-primary-cosmic
).
Your final config could look something similar to this:
/** @type {import('tailwindcss').Config} */
const colors = {
background: {
light: "#f6f6f6",
dark: "#282A3A",
cosmic: "#50577A",
},
primary: {
light: "#6D67E4",
dark: "#46C2CB",
cosmic: "#892CDC",
}
}
module.exports = {
theme: {
extend: {
colors,
},
},
plugins: [
require("tailwindcss-theme-shift")(colors, "light", true)
]
}
You can use your themes like the following:
<h1 class="bg-background">
Let's go!
</h1>
The Auto map features allows you to use drastically shorter class name, so the class name bg-background
is a shorthand for bg-background dark:bg-background-dark cosmic:bg-background-cosmic
. Otherwise if you don't want this future and decide to only use the usual (long) class names, you can pass false
, as the third argument.
...
module.exports = {
theme: {
extend: {
colors,
},
},
plugins: [
require("tailwindcss-theme-shift")(colors, false)
]
}
Changing the theme
To change the active theme, add your theme name as a class to your document.body
, an example changeTheme
function could be:
export const changeTheme = (theme) => {
if (typeof document !== 'undefined') {
// remove all classes from document.body
document.body.classList.remove(...document.body.classList);
// add the new theme class
document.body.classList.add(theme);
}
};
License
MIT