l-blondy / tw-colors Goto Github PK

foreground-500': 'rgba(255, 255, 255, 0.3) in config turns into .text-foreground-500 hsl(var(--twc-foreground-500) / var(--tw-text-opacity)) in the css class.

This color worked fine when it was in the regular part of the Tailwind color config.

Hey, first of all let me thank you for this great library, made implementing multiple color themes really easy. There is one thing I wanted to ask though.

Is there a way to obtain the css variables for primary colors of themes other than the currently being used? I want to implement a theme switcher where user sees examples of the primary colors and can pick one of them. The hsl(var(--twc-primary) variable works great for currently used theme, but I couldn't figure if I can obtain other themes this way too. Let's say something like --twc-dark-primary?

Thanks a lot and have a great day =)

Everything works on 3.1.1 but breaks on 3.1.2. I'm using Next.js and this is the relevant part of my tailwind.config.ts:

import type { Config } from "tailwindcss";
import colors from "tailwindcss/colors";
import { createThemes } from "tw-colors";

const config: Config = {
    content: ["./app/**/*.{ts,tsx}", "./src/components/**/*.{ts,tsx}"],
    plugins: [
        createThemes({
            light: {
                white: colors.white,
                black: colors.black,
                slate: colors.slate
            },
            dark: {
                white: colors.black,
                black: colors.white,
                slate: colors.slate
            }
        })
    ],
};

export default config;

If I downgrade back to 3.1.1 without touching the code, everything works as intended again. I think the changes made to support NativeWind in 3.1.2 is probably what broke it for me.

Thanks in advance for your work on this library!

Request to make this happen

Also is there a way to do this without declaring a theme on every component ?

Amazing plugin! Thank you!

When I use a portal and put content in there that uses a color that is defined using your plugin, the color variables won't work. Any ideas how I can get around that?

I tried to install it in my angular project with tailwindcss installed and I'm getting the following error:

Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Unable to parse color from string: at new Color (/app/node_modules/color/index.js:49:10) project | at Color (/app/node_modules/color/index.js:24:10) project | at /app/node_modules/tw-colors/dist/lib/index.js:52:70 project | at /app/node_modules/lodash.foreach/index.js:221:11 project | at baseForOwn (/app/node_modules/lodash.foreach/index.js:153:20) project | at /app/node_modules/lodash.foreach/index.js:190:14 project | at forEach (/app/node_modules/lodash.foreach/index.js:290:10) project | at /app/node_modules/tw-colors/dist/lib/index.js:48:38

example:

html:

<div class="text-mysite/base-primary">TestDiv</div>

Tailwind config:

plugins: [
        createThemes({
            ro: {
                "mysite/base-primary": "red",
            },
            hu: {
                "mysite/base-primary": "pink",
            },
        }),
    ],

I got this error in the rendered page on a style place:

   ! .text-mysite\/base-primary {
    --tw-text-opacity: 1;
    color: hsl(var(--twc-mysite/base-primary) / var(--twc-mysite/base-primary-opacity, var(--tw-text-opacity)));
   }

Tailwind support this classname format. Can you help me? How can I fix this? Thanks :)

The hex value I'm using is not turning into my expected rgb value. Is this due to the conversion to hsl and the rounding that occurs? Is it possible to use more precision on the hsl values?

In my case #E10A0A is ending up as rgb(224, 11, 11) instead of my expected rgb(225, 10, 10)

Hey there, great plugin, definetly a game changer for me. Guess I'll make the first post here :)

I'm using it on a test project, where I have multiple themes defined inside my tailwind.config.js file.
But I would like to know if there's any method I can apply in ReactJS that returns an array of themes defined at createThemes() function.

I'll post my code bellow for better understanding.

//tailwind.config.js
const withMT = require("@material-tailwind/react/utils/withMT");

const { createThemes } = require("tw-colors");

module.exports = withMT({
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    screens: {
      sm: "480px",
      md: "768px",
      lg: "976px",
      xl: "1270px",
    },
    fontFamily: {
      robotoBold: ["Roboto-Bold", "sans-serif"],
      robotoMedium: ["Roboto-Medium", "sans-serif"],
      robotoRegular: ["Roboto-Regular", "sans-serif"],
      alkatraSemiBold: ["Alkatra", "cursive"],
    },
    extend: {},
  },
  plugins: [
    createThemes({
      Default: {
        primary: "#6DAA8A",
        secondary: "#fff",
        third: "#333",
        fourth: "#E65858",
        fifth: "#F7F8F9",
      },
      Custom1: {
        primary: "#2A9D8F",
        secondary: "#fff",
        third: "#333",
        fourth: "#E65858",
        fifth: "#F7F8F9",
      },
      Custom2: {
        primary: "#264653",
        secondary: "#fff",
        third: "#333",
        fourth: "#E65858",
        fifth: "#F7F8F9",
      },
    }),
  ],
});

///App.js file

import React, { useState, useEffect } from "react";

//import array of themes here

function App() {
  const allThemes = //array of themes
  const activeTheme = //first index of allThemes array

  return (
    <div className="theme-${activeTheme}" >
      <h1>Hello World</h1>
      {allThemes.map((themeName) => {
        <h2>{themeName}</h2>
      })}
    </div>
  )
}

export default App;

Would this be possible to make? If so could you help me out?

PS: I'll attach a picture of my project structure.

I have following config

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
// eslint-disable-next-line
const plugin = require('tailwindcss/plugin');
const formKitTailwind = require('@formkit/themes/tailwindcss');
const { createThemes } = require('tw-colors');

const darkColors = {
    50: '#ffffff',
    100: '#e6e6e6',
    200: '#333334',
    300: '#D1D5DB',
    400: '#9CA3AF',
    500: '#4EA5D9',
    600: '#22272D',
    700: '#1D2028',
    800: '#0E1117',
    900: '#01040A',
};

const actionTypeColors = {
    create: colors.green,
    delete: colors.orange,
    update: colors.orange,
    error: colors.red,
};

/** @type {import("@types/tailwindcss/tailwind-config").TailwindConfig } */
module.exports = {
    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: 'class',
    safelist: [
        {
            pattern: /(bg|text)-(actionType).*/,
        },
        {
            pattern: /rounded-r-(md|none)/,
        },
    ],
    theme: {
        extends: {
            screens: {
                landscape: {
                    raw: '(orientation: landscape) and (max-height: 480px)',
                },
                statsxxl: '1500px',
                tk: '2000px',
                xxl: '2500px',
                xxxl: '3200px',
            },
        },
        fontFamily: {
            sans: [...defaultTheme.fontFamily.sans],
            serif: [...defaultTheme.fontFamily.serif],
            mono: [...defaultTheme.fontFamily.mono],
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/line-clamp'),
        require('@tailwindcss/aspect-ratio'),
        require('tailwindcss-debug-screens'),
        formKitTailwind,
        createThemes({
            'deep-koamaru': {
                primary: {
                    50: '#f3f5ff',
                    100: '#e9edfe',
                    200: '#d5dcff',
                    300: '#b4c0fe',
                    400: '#8996fc',
                    500: '#5962f9',
                    600: '#3837f0',
                    700: '#2a25dc',
                    800: '#221eb9',
                    900: '#1f1b97',
                    950: '#111279',
                },
                secondary: colors.gray,
                dark: darkColors,
                actionType: actionTypeColors,
            },
            'fountain-blue': {
                primary: {
                    50: '#f2fbfa',
                    100: '#d3f4f1',
                    200: '#a6e9e4',
                    300: '#72d6d3',
                    400: '#59c3c3',
                    500: '#2c9ea0',
                    600: '#217c80',
                    700: '#1e6467',
                    800: '#1c5053',
                    900: '#1c4245',
                    950: '#0a2629',
                },
                secondary: colors.gray,
                dark: darkColors,
                actionType: actionTypeColors,
            },
        }),
    ],
};

When using tw-colors my breakpoints aren't working

Hello! This is an awesome package.
I am curious why values are converted to HSL. When using the theme properties as variables, you have to do this:

<body class='bg-[hsl(var(--custom-body))]'>

as opposed to this if it were to be a hex value:

<body class='bg-[--custom-body]'>

Could there be an option to skip the HSL conversion? Or maybe an option to not store the raw HSL values, but store them already interpreted using hsl()

My app uses javascript to dynamically set some CSS variables, like a --brand color (in HSL).

It would be great if we could reference these in tw-colors:

createThemes({
   'light': light({ 
      'button-primary-bg': 'var(--brand)',
   }),
   'dark': dark({ 
      'button-primary-bg': 'steelblue',
   }),
})

hello and thank you for the nice job

i used tw-colors in nuxt.js but it isn't work on error.vue page !

Can you add this new feature ?

I didn't see a Discussion section so I am asking here. Forgive me if I overlooked something. How can I create a theme with light & dark variants? For example, Halloween Theme with Light & Dark variants.
I am confused as to how to nest the variants. Does the theme name take an array of light & dark functions?

Thanks in advance.

I want to use the default tailwind color as a theme but I dont want to copy past the hex code. Is there any way to achieve the above code:

   const { createThemes } = require('tw-colors');

   module.exports = {
      // ...your tailwind config
      plugins: [
         createThemes((theme) => {
             light: { 
               'emerald': theme('emerald.600'),
               'blue': theme('blue.600'),
            },
         })
      ],
   };
``

when colors are defined in standard way:

  theme: {
    extend: {
      colors: {
        gray: {
          50: '#f8f9fa',
          100: '#e9ecef',
          200: '#dee2e6',
          300: '#ced4da',
          400: '#adb5bd',
          500: '#6c757d',
          600: '#495057',
          700: '#343a40',
          800: '#212529',
          900: '#121212',
        },
      },
    },

we can assign color to scss variable in this way:

$shade200: theme('colors.gray.100');

but in this approach:

createThemes({
   'light': { 
      'primary': 'steelblue',
   },
   'dark': { 
      'primary': 'turquoise',
   },
}, {
   defaultTheme: 'light' // 'light' | 'dark'
})

if we try to add similar its not possible:

$shade200: theme('colors.primary');

Is it possible to implement some sort of default color to this library?

If say i have a neutral color that is the same across all of my theme, i need to redeclare that color on each theme like so

createThemes({
  light: {
    primary: "white",
    neutral: "#333",
  },
  dark: {
    primary: "black",
    neutral: "#333",
  },
}),

If i only have 2 themes and only one same color it is no problem, but if there are many themes or many neutral color it will become harder to manage and easy to miss updating color. Maybe you can add default color like this

createThemes({
  light: {
    primary: "white",
  },
  dark: {
    primary: "black",
  },
}, {
  defaultColor: {
    neutral: "#333",
  },
}),

And if you need to override just define it on the color

createThemes({
  light: {
    primary: "white",
  },
  dark: {
    primary: "black",
    neutral: "#ccc",
  },
}, {
  defaultColor: {
    neutral: "#333",
  },
}),

Also cool library, definitely help making theming easier in tailwind. Thanks for your hard work!

Hi,
this plugin looks very promising for creating themes without duplicating work in the markup. However, I instantly ran into an issue when trying it out: So I have a bunch of color object definitions I want to to handle in a theme. That syntax is supported in Tailwind CSS color definition, but didn't work with tw-colors.

Example:

colors: {
    foreground: {
        1000: 'rgba(255, 255, 255, 1)',
        700:  'rgba(255, 255, 255, 0.7)',
        600:  'rgba(255, 255, 255, 0.5)',
        500:  'rgba(255, 255, 255, 0.3)',
        200:  'rgba(255, 255, 255, 0.2)',
        100:  'rgba(255, 255, 255, 0.1)',
        50:  'rgba(255, 255, 255, 0.06)',
    },
}

I suppose I could flatten the values (foreground-100,foreground-200, ...), but ideally it should work just as Tailwind CSS config definition, right? What do you think?

I looked into the code to see if I could figure out how add this functionality, but couldn't figure it out.

I know this is unrelated since you use external library from https://www.npmjs.com/package/color
The library is not being well maintained, it's hard to say.

How about using https://github.com/LeaVerou/color.js instead?

Sample:

• Using hex: #884A39 resulting 12.899999999999977 40.9% 37.8% (close to #7c6a51) which is very different color visually

Sample config:

sepia: {
  primary: '#884A39',
  secondary: '#653B12',
  text: '#5E4636'
},

hi!
how can use two different class one for dark and on for light in one element
for example
<hr class="border-primary-700 theme-light:border-red-200" />
Because in some cases, in two different themes, the colors for one part may not be the same

After updating to 1.2.5 I'm getting warnings about the package from the addition of cross-var. Going back to 1.2.4 solves the issue for now.

Hi,

Is it possible to get the theme CSS variables set on the :root or html, rather than on the element that the theme is specified? I realise that this would break nested themes, but I was hoping to be able to pass through a flag so it can be turned on / off in the tailwind config. In my use case, I'm not nesting themes.

Maybe something like:

plugins: [
    createThemes(
        {
            light: { 
                ...
            }
        },
        {
            // I'm useless at naming things..
            onRoot: true
        }
    )
],

My issue is that I need the variables accessible on the html and body, but I don't have access to the markup to add the theme declaration to them.

Instead, I have to add them to a HTML element inside the body, but this only makes them accessible inside that element.

Hello, here is my config that fails to parse.

Because tailwindcss config accept declarations like this:

// tailwind.config.ts
{
    corePlugins: {
        textOpacity: false,
    },
    colors: {
        black: "hsl(0 0% 0% / 100%)",
        white: "hsl(0 0% 100% / 100%)",
        grey: "hsl(240 15% 84% / 100%)",
        link: "hsl(209 75% 50% / 100%)",
    }
}

Is it possible use declaration like this in tw-colors ? hsl(0 0% 0% / 10%)

// tailwind.config.ts
{
  plugins: [
    createThemes(
        () => {
            const light = {
                text: "hsl(215 23% 15% / 70%)",
                border: "hsl(230 28% 21% / 20%)",
                disabled: "hsl(0 0% 0% / 10%)",
                background: "hsl(240 24% 96% / 100%)",
            };
    
            const dark = {
                text: "hsl(0 0% 100% / 70%)",
                border: "hsl(220 39% 79% / 20%)",
                disabled: "hsl(0 0% 100% / 10%)",
                background: "hsl(240 22% 4% / 100%)",
            };
            
            return {
                light,
                dark,
                custom: light,
            };
        },
        {
            produceThemeClass: (themeName: string) => `${themeName}-mode`,
        },
    ),
  ]
}

I'm currently using Tailwind CSS v3.3.3 with the "tw-colors" plugin version v3.3.1. The default configuration setup still works correctly without using the prefix option in the tailwind.config.js file. However, when I attempt to add the prefix "zc-" to the prefix option, all CSS variables for colors are not generated; the color is missing.

Here is my configuration without the "zc-" prefix:

module.exports = {
 dark modee: ['class'],
  content: [
    './src/**/*.{ts,tsx}',
  ],
 theme: {// some theme config},
  plugins: [createThemes(themeColor, {
    produceCssVariable: (colorName) => `--zc-${colorName}`,
  })],
};

With this configuration, all the CSS color variables are generated correctly:

After attempting to enable the prefix option with the value "zc-":

module.exports = {
 dark modee: ['class'],
  content: [
    './src/**/*.{ts,tsx}',
  ],
 theme: {// some theme config},
 plugins: [createThemes(themeColor, {
    produceCssVariable: (colorName) => `--zc-${colorName}`,
  })],
 prefix: 'zc-'
};

The classes are generated correctly, but the CSS color variable --zc-gray-500 are not generated.

I'm working on my own UI library using TailwindCSS, and I want to add prefixes for all tailwind classes.

I've been trying and trying but no matter what I do I can't seem to get this working with NativeWind. I'm not sure if I'm doing something wrong or if this plugin just fundamentally wouldn't work. But it does precisely what I'm needing out of tailwind in my project.

Just thought I would ask, has this been tested in NativeWind?

Currently the format for css variables is : --twc-[color name]

Can we add option to modify the variables as per user needs?

Is it possible to make it work with the default tailwind light and dark classes?
I currently use class="dark" and class="light"

It seems that colors defined inside themes lose their color decorators (a little square box by the actual className indicating the color). I realized how much I needed them when I lost them 😭.

Or maybe there is somewhere a little config to enable them?

I defined a whole new color with

const colors = {
    "english-violet": {
        "DEFAULT": "#514663",
        "100": "#ffffff",
        "99": "#eeedef",
        "95": "#dcdae0",
        "90": "#a8a3b1",
        "80": "#857e92",
        "70": "#625973",
        "60": "#514663",
        "50": "#493f59",
        "40": "#41384f",
        "30": "#393145",
        "20": "#312a3b",
        "10": "#18151e",
        "0": "#000"
    }
};

Then added it to the theme:

  plugins: [
    createThemes({
                   light: {
                      'primary': colors["english-violet"],
                      'secondary': 'darkblue',
                      'brand': '#F3F3F3',
                   }
                })
  ],

If I'm using bg-primary with the theme applied, I don't get any color. Other variations works :

            <div class="bg-primary">
                Doesn't work
            </div>
            <div class="bg-primary-60">
                Works as intended
            </div>
            <div class="bg-primary-DEFAULT">
                Works also
            </div>

Without using the theme, the following also work as intended :

            <div class="bg-english-violet">
                Works as intended
            </div>

I am running into a weird issue, likely caused by a potentially bad theme configuration:

brand1: {
    page: '#ffffff',
    section: '#f7f7f7',
    brand: {
        DEFAULT: '#0c4e19',
        '50': '#f0faeb',
        '100': '#dcf4d3',
        '200': '#bceaac',
        '300': '#92db7b',
        '400': '#6cca51',
        '500': '#4daf33',
        '600': '#388b25',
        '700': '#2d6b20',
        '800': '#0c4e19',
        '900': '#24491e',
        '950': '#0f270c',
    }
}

when using the brand1 theme and an element with bg-brand1 the effective color value used in the document is a few shades "dimmer":

expected value:

'#0c4e19

actual value:

#234c20

Any insight into what may be causing this would be much appreciated.

Hi there

Just stumbled across this plugin and wanted to say thanks, has saved me a heap of time on providing switchable themes on the my site.

I appreciate that this is aimed specifically at switching colours, but I wondered if you had any insights on if it is possible to extend the plugin to switch base font families as well.

Any thoughts / ideas greatly appreciated.

Thanks one again!

All application with dark mode just use class="dark" class="light".