Welcome to tw-colors
Introducing the ultimate game-changer for your Tailwind app! Say goodbye to cluttered dark variants and messy CSS variables. With this tailwind plugin, switching between color themes is as effortless as changing one className. Elevate your design game and add a touch of vibrant color to your app today!
- 🚀 No markup change required, no need to refactor your existing code.
- 📦 Zero javascript added to the bundle size, it's just some CSS!
- ✨ All color formats are supported, including HEX, RGB, HSL, and named colors
- 🤩 Fine-grained theming with variants
- 💫 Full Tailwind CSS Intellisense support 🔥🔥🔥
npm i -D tw-colorsTake an existing tailwind config and move the colors in the createTheme plugin, giving it a name (e.g. light).
tailwind.config.js
+ const { createThemes } = require('tw-colors');
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extends: {
- colors: {
- 'primary': 'steelblue',
- 'secondary': 'darkblue',
- 'brand': '#F3F3F3',
- }
},
},
plugins: [
+ createThemes({
+ light: {
+ 'primary': 'steelblue',
+ 'secondary': 'darkblue',
+ 'brand': '#F3F3F3',
+ }
+ })
],
};
Apply the theme-light class anywhere in your app.
Alternatively you can use data attributes data-theme="light"
- <html>
+ <html class='theme-light'>
...
<div class='bg-brand'>
<h1 class='text-primary'>...</h1>
<p class='text-secondary'>...</p>
</div>
...
</html>That's it, you site has a light theme!
Inside the createThemes function, define multiple color themes that use the same color names.
tailwind.config.js
const { createThemes } = require('tw-colors');
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
plugins: [
createThemes({
light: {
'primary': 'steelblue',
'secondary': 'darkblue',
'brand': '#F3F3F3',
},
+ dark: {
+ 'primary': 'turquoise',
+ 'secondary': 'tomato',
+ 'brand': '#4A4A4A',
+ },
+ forest: {
+ 'primary': '#2A9D8F',
+ 'secondary': '#E9C46A',
+ 'brand': '#264653',
+ },
})
],
};Simply switch the className.
- <html class='theme-light'>
+ <html class='theme-dark'>
...
</html>...or the data-theme attribute
- <html data-theme='light'>
+ <html data-theme='dark'>
...
</html> <html class='theme-dark'>
...
<div class='theme-light'>
...
</div>
<div class='theme-forest'>
...
</div>
</html>Based on the current themes, specific styles can be applied with variants
<!-- Use "serif" font for the dark theme, "sans" font for all other themes -->
<div class='theme-dark font-sans theme-dark:font-serif'>
...
<div>Serif font here</div>
</div>
<div class='theme-light font-sans theme-dark:font-serif'>
...
<div>Sans font here</div>
</div>Variants only work alongside theme declarations
❌ Does not work
<html class='theme-dark font-sans'>
...
<div class='theme-dark:font-serif'>
❌ Sans font here
</div>
</html>✅ Works fine
<html class='theme-dark font-sans theme-dark:font-serif'>
...
<div>
✅ Serif font here
</div>
</html>Note: this feature might be added in future versions based on community feedback
Caveats: inherited properties
Inherited properties (e.g. "font-family") are inherited by all descendants, including nested themes. In order to stop the propagation the base styles should be re-declared on nested themes
❌ Unexpected behavior
<html class='theme-dark font-sans theme-dark:font-serif'>
...
<div>
✅ Serif is active
</div>
<div class="theme-light">
❌ Serif is still active, it got inherited from the parent theme
</div>
</html>✅ Works as expected
<html class='theme-dark font-sans theme-dark:font-serif'>
...
<div>
✅ Serif is active
</div>
<div class="theme-light font-sans theme-dark:font-serif">
✅ Sans is active
</div>
</html>createThemes also accepts a function that exposes the light and dark functions.
To apply the color-scheme CSS property, simply wrap your themes with light or dark."
tailwind.config.js
const { createThemes } = require('tw-colors');
module.exports = {
// ...your tailwind config
plugins: [
createThemes(({ light, dark }) => ({
'my-light-theme': light({
'primary': 'steelblue',
'secondary': 'darkblue',
'brand': '#F3F3F3',
}),
'my-dark-theme': dark({
'primary': 'turquoise',
'secondary': 'tomato',
'brand': '#4A4A4A',
}),
}))
],
};See the MDN docs for more details on this feature.
tw-colors creates CSS variables using the format --twc-[color name], they contain HSL values.
For example, with the following configuration, the variables --twc-primary, --twc-secondary, --twc-brand will be created.
tailwind.config.js
module.exports = {
// ...your tailwind config
plugins: [
createThemes({
'my-light-theme': {
'primary': 'steelblue',
'secondary': 'darkblue',
'brand': '#F3F3F3',
},
'my-dark-theme': {
'primary': 'turquoise',
'secondary': 'tomato',
'brand': '#4A4A4A',
},
})
],
};Example usage:
.my-class {
color: hsl(var(--twc-primary));
// with opacity
color: hsl(var(--twc-primary) / 0.5);
}Please share
