Gathering detailed insights and metrics for @jipika/tw-colors
Gathering detailed insights and metrics for @jipika/tw-colors
Installations
npm install @jipika/tw-colorsDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
14.21.3
NPM Version
6.14.18
Releases
Unable to fetch releases
Languages
4
TypeScript
HTML
JavaScript
CSS
TypeScript (42.15%)
HTML (41.38%)
JavaScript (16.08%)
CSS (0.4%)
Developer
jipika
Download Statistics
Total Downloads
346
Last Day
1
Last Week
1
Last Month
11
Last Year
148
GitHub Statistics
MIT License
198 Commits
1 Branches
1 Contributors
Updated on May 13, 2025
Bundle Size
27.35 kB
Minified
9.70 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.2.6
Package Id
@jipika/tw-colors@1.2.6
Unpacked Size
58.33 kB
Size
12.67 kB
File Count
23
NPM Version
6.14.18
Node Version
14.21.3
Published on
May 23, 2023
Total Downloads
Cumulative downloads
Total Downloads
346
Last Day
0%
1
Compared to previous day
Last Week
0%
1
Compared to previous week
Last Month
-38.9%
11
Compared to previous month
Last Year
26.5%
148
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Peer Dependencies
1
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
1npm 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
1+ const { createThemes } = require('tw-colors'); 2 3 module.exports = { 4 content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], 5 theme: { 6 extends: { 7- colors: { 8- 'primary': 'steelblue', 9- 'secondary': 'darkblue', 10- 'brand': '#F3F3F3', 11- } 12 }, 13 }, 14 plugins: [ 15+ createThemes({ 16+ light: { 17+ 'primary': 'steelblue', 18+ 'secondary': 'darkblue', 19+ 'brand': '#F3F3F3', 20+ } 21+ }) 22 ], 23 }; 24
Apply the theme-light class anywhere in your app.
Alternatively you can use data attributes data-theme="light"
1- <html> 2+ <html class='theme-light'> 3 ... 4 <div class='bg-brand'> 5 <h1 class='text-primary'>...</h1> 6 <p class='text-secondary'>...</p> 7 </div> 8 ... 9 </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
1 const { createThemes } = require('tw-colors'); 2 3 module.exports = { 4 content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], 5 plugins: [ 6 createThemes({ 7 light: { 8 'primary': 'steelblue', 9 'secondary': 'darkblue', 10 'brand': '#F3F3F3', 11 }, 12+ dark: { 13+ 'primary': 'turquoise', 14+ 'secondary': 'tomato', 15+ 'brand': '#4A4A4A', 16+ }, 17+ forest: { 18+ 'primary': '#2A9D8F', 19+ 'secondary': '#E9C46A', 20+ 'brand': '#264653', 21+ }, 22 }) 23 ], 24 };
Switching themes
Simply switch the className.
1- <html class='theme-light'> 2+ <html class='theme-dark'> 3 ... 4 </html>
...or the data-theme attribute
1- <html data-theme='light'> 2+ <html data-theme='dark'> 3 ... 4 </html>
Advanced usage
Nested themes
1 <html class='theme-dark'> 2 ... 3 <div class='theme-light'> 4 ... 5 </div> 6 7 <div class='theme-forest'> 8 ... 9 </div> 10 </html>
Variants
Based on the current themes, specific styles can be applied with variants
1 <!-- Use "serif" font for the dark theme, "sans" font for all other themes --> 2 3 <div class='theme-dark font-sans theme-dark:font-serif'> 4 ... 5 <div>Serif font here</div> 6 </div> 7 8 <div class='theme-light font-sans theme-dark:font-serif'> 9 ... 10 <div>Sans font here</div> 11 </div>
Variants only work alongside theme declarations
❌ Does not work
1 <html class='theme-dark font-sans'> 2 ... 3 <div class='theme-dark:font-serif'> 4 ❌ Sans font here 5 </div> 6 </html>
✅ Works fine
1 <html class='theme-dark font-sans theme-dark:font-serif'> 2 ... 3 <div> 4 ✅ Serif font here 5 </div> 6 </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
1 <html class='theme-dark font-sans theme-dark:font-serif'> 2 ... 3 <div> 4 ✅ Serif is active 5 </div> 6 7 <div class="theme-light"> 8 ❌ Serif is still active, it got inherited from the parent theme 9 </div> 10 </html>
✅ Works as expected
1 <html class='theme-dark font-sans theme-dark:font-serif'> 2 ... 3 <div> 4 ✅ Serif is active 5 </div> 6 7 <div class="theme-light font-sans theme-dark:font-serif"> 8 ✅ Sans is active 9 </div> 10 </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
1 const { createThemes } = require('tw-colors'); 2 3 module.exports = { 4 // ...your tailwind config 5 plugins: [ 6 createThemes(({ light, dark }) => ({ 7 'my-light-theme': light({ 8 'primary': 'steelblue', 9 'secondary': 'darkblue', 10 'brand': '#F3F3F3', 11 }), 12 'my-dark-theme': dark({ 13 'primary': 'turquoise', 14 'secondary': 'tomato', 15 'brand': '#4A4A4A', 16 }), 17 })) 18 ], 19 };
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
1 module.exports = { 2 // ...your tailwind config 3 plugins: [ 4 createThemes({ 5 'my-light-theme': { 6 'primary': 'steelblue', 7 'secondary': 'darkblue', 8 'brand': '#F3F3F3', 9 }, 10 'my-dark-theme': { 11 'primary': 'turquoise', 12 'secondary': 'tomato', 13 'brand': '#4A4A4A', 14 }, 15 }) 16 ], 17 };
Example usage:
1.my-class { 2 color: hsl(var(--twc-primary)); 3 background: hsl(var(--twc-primary) / 0.5); 4}
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
1 module.exports = { 2 // ...your tailwind config 3 plugins: [ 4 createThemes({ 5 'my-light-theme': { 6 'primary': 'steelblue', 7 'secondary': 'darkblue', 8 'brand': '#F3F3F3', 9 }, 10 'my-dark-theme': { 11 'primary': 'turquoise', 12 'secondary': 'tomato', 13 'brand': '#4A4A4A', 14 }, 15 }, { 16 cssVariablePrefix: 'prefix-', 17 cssVariableSuffix: '-suffix', 18 defaultTheme:'my-dark-theme' 19 }) 20 ], 21 };
Please share
No vulnerabilities found.
No security vulnerabilities found.