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
Score
72.6
Supply Chain
98
Quality
74.3
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
2
TypeScript
JavaScript
TypeScript (98.59%)
JavaScript (1.41%)
Developer
jipika
Download Statistics
Total Downloads
289
Last Day
2
Last Week
3
Last Month
9
Last Year
118
GitHub Statistics
102 Commits
1 Branches
1 Contributors
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
Publised On
23 May 2023
Total Downloads
Cumulative downloads
Total Downloads
289
Last day
0%
2
Compared to previous day
Last week
200%
3
Compared to previous week
Last month
-18.2%
9
Compared to previous month
Last year
-31%
118
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Peer Dependencies
1
Versions
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.