A lightweight tailwindcss plugin that handles multiple themes. 🎨
Check out the example in this repo, or read on.
Install wind-themes
npm i -D wind-themes
# or
yarn add -D wind-themes
Check out the sample themes config specified in a json file for a single source of truth, you can use this file for now and update later.
In your tailwind.config.js
, add the plugin and pass your theme object.
NOTE: You can store this config in a json file as mentioned above, so you can easily use the themes data anywhere in your app later, especially when using the
<ThemeProvider />
in React.
// tailwind.config.js
module.exports = {
mode: 'jit',
// ..
plugins: [
require('wind-themes')({
extend: true, // false by default
importColors: true, // false by default
defaultTheme: 'dark-red',
themes: {
'dark-red': {
primary: '#C75A5A',
secondary: {
DEFAULT: '#181818',
100: '#494949',
},
},
'light-purple': {
primary: '#7D50DC',
secondary: {
DEFAULT: '#FFFFFF',
100: '#EBEBEB',
},
},
},
}),
],
};
Now, you can use these dynamic colors as follows:
<div class="text-primary">wind-themes</div>
<input class="bg-secondary-100" />
Also, if you set importColors
to true, you can use every color defined in the config by using it's theme name, color and shade as follows:
<div class="text-dark-red-primary">wind-themes</div>
<input class="bg-light-purple-secondary-100" />
Right now, this only supports class based theme support, so you need to add a class to the root of the html tree or wherever you want a specific theme hardcoded.
For React, there is a <ThemeProvider />
included with this package.
You can use it as shown:
import { ThemeProvider } from 'wind-themes/react';
ReactDOM.render(
<ThemeProvider defaultTheme="dark-red" themes={['dark-red', 'light-purple']}>
<App />
</ThemeProvider>,
document.getElementById('root')
);
Also, there is a custom useTheme()
hook also included which lets you read and update the theme
state.
import { useTheme } from 'wind-themes/react';
const ThemeSwitcher = () => {
const { theme, setTheme } = useTheme();
return (
<div>
<div>Current theme: {theme}</div>
<button onClick={() => setTheme('dark-red')}>Set dark-red</button>
<button onClick={() => setTheme('light-purple')}>Set light-purple</button>
</div>
);
};
In it's configuration, the object has two switches/flags.
Config | Default | Description |
---|---|---|
extend | false |
Whether to extend the default colors. |
importColors | false |
Whether to import colors defined in theme as: text-dark-primary-100 to be used directly |
defaultTheme | Name of the default theme you want | |
themes | An object of multiple themes, with each key denoting a theme name with the colors set as the value. |
const themeObj = {
extend: true, // false by default
importColors: true, // false by default
defaultTheme: 'dark-red',
themes: {
'dark-red': {
primary: '#C75A5A',
secondary: {
DEFAULT: '#181818',
100: '#494949',
},
border: '#555',
},
'light-purple': {
primary: '#7D50DC',
secondary: {
DEFAULT: '#FFFFFF',
100: '#EBEBEB',
},
},
},
};