Welcome to tw-colors
tw-colors is fork from tw-colors added the opinionated color decorators
Highlights
🚀 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🔥 🔥 🔥
The Gist
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!
Usage
Add multiple themes
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',
+ },
})
],
};Switching themes
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>Advanced usage
Nested themes
<html class='theme-dark'>
...
<div class='theme-light'>
...
</div>
<div class='theme-forest'>
...
</div>
</html>Variants
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
<html class='theme-dark font-sans'>
...
<div class='theme-dark:font-serif'>
❌ Sans font here
</div>
</html> <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
<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> <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>CSS color-scheme
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.
CSS Variables
tw-colors creates CSS variables using the format --twc-[color name] by default, 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));
background: hsl(var(--twc-primary) / 0.5);
}Custom CSS Variables
The CSS variables names can be customized by passing some options as createThemes 2nd argument.
The available options are:
-
cssVariablePrefix, default:
'twc-' -
cssVariableSuffix, default:
'' -
defaultTheme, default:
''
With the following configuration, the variables --prefix-primary-suffix, --prefix-secondary-suffix, --prefix-brand-suffix will be created.
defaultTheme display the default color decorators/
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',
},
}, {
cssVariablePrefix: 'prefix-',
cssVariableSuffix: '-suffix',
defaultTheme:'my-dark-theme'
})
],
};Please share
