# @axub/tw-colors
> Tailwind plugin for switching color theme with just one className
Latest version **1.2.8** (published 2023-06-23) · MIT license · 0 weekly downloads
## Install
```sh
npm install @axub/tw-colors
pnpm add @axub/tw-colors
yarn add @axub/tw-colors
bun add @axub/tw-colors
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.2.8 |
| Published | 2023-06-23 |
| First published | 2023-06-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 55.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Laurent Blondy |
| Maintainers | axub |
| Keywords | tailwind, tailwindcss, color, colors, theme, themes, dark |
## Links
- npm: https://www.npmjs.com/package/@axub/tw-colors
- Repository: https://github.com/AXub/tw-colors
- Homepage: https://github.com/AXub/tw-colors#readme
- Issues: https://github.com/AXub/tw-colors/issues
- npm.io page: https://npm.io/package/@axub/tw-colors
## Dependencies (3)
- [flat](https://npm.io/package/flat.md) ^5.0.2
- [color](https://npm.io/package/color.md) ^4.2.3
- [lodash.foreach](https://npm.io/package/lodash.foreach.md) ^4.5.0
## Alternatives
- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads
## Recent versions
- 1.2.8 (latest) — 2023-06-23
- 1.2.7 — 2023-06-23
- 1.2.6 — 2023-06-23
## README
# Welcome to [tw-colors](https://github.com/L-Blondy/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!
## 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][tailwind-intellisense-url] support** 🔥🔥🔥
## The Gist
```bash
npm i -D tw-colors
```
Take an existing tailwind config and move the colors in the `createTheme` plugin, giving it a name (e.g. light).
*tailwind.config.js*
```diff
+ 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"`
```diff
-
+
...
...
```
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*
```diff
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.
```diff
-
+
...
```
...or the *data-theme* attribute
```diff
-
+
...
```
## Advanced usage
### Nested themes
```diff
...
...
...
```
### Variants
Based on the current themes, specific styles can be applied with variants
```html
```
Variants only work alongside theme declarations
❌ Does not work
```html
...
❌ Sans font here
```
✅ Works fine
```html
...
✅ Serif font here
```
*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
...
✅ Serif is active
❌ Serif is still active, it got inherited from the parent theme
```
✅ Works as expected
```html
...
✅ Serif is active
✅ Sans is active
```
### 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*
```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][mdn-color-scheme] 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*
```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:
```css
.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: `''`
With the following configuration, the variables `--prefix-primary-suffix`, `--prefix-secondary-suffix`, `--prefix-brand-suffix` will be created.
*tailwind.config.js*
```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'
})
],
};
```
Please share
[![][tweet]][tweet-url]
[tweet]: https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Fsaadeghi%2Fdaisyui
[tweet-url]: https://twitter.com/intent/tweet?text=tw-colors%0ATailwind%20color%20themes%20made%20easy!%0Ahttps://github.com/L-Blondy/tw-colors
[tailwind-intellisense-url]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
[mdn-color-scheme]: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
---
_Source: https://npm.io/package/@axub/tw-colors · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._