@jipika/tw-colors NPM

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-colors

Take 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

❌ 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

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>

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);
}

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

tailwind tailwindcss color colors theme themes dark

color flat lodash.foreach

@everything-registry/sub-chunk-489

1.2.6

12 months ago