How can I create theme color from namespaced CSS varaibles?

[mrdulin]

I have declared the CSS varaibles in a selector, like this:

html[theme="dark"] {
   --theme-color-1: rgba(15,19,26,1);
   --theme-color-2:  rgba(128,51,63,1);
  // ...
}

The CSS variables are not declared in the :root selector.

And, there is a JS file contains these custom theme colors, the JS will create and inject a <style/> tag with above CSS varaibles.

What's the best way to create tailwindCSS theme colors from above CSS varaibles?

[T04435]

Does this help https://tailwindcss.com/docs/customizing-colors#using-css-variables

to add dark theme css-variables

// main.css
... example above
.dark {
  --theme-color-1: 15, 19, 26;
  --theme-color-2: 128, 51, 63;
}

[mrdulin]

I read this doc, I don't want to declare the variables manually again. Besides, I have my own way to switch the theme. I only want to create TailwindCSS theme colors, so that I can use text-theme-color-1 CSS class

[T04435]

If you define the css variables yourself the only thing todo is to add the variable names to your tailwind.config.js

module.exports = {
  theme: {
    colors: {
      theme: {
        color: {
          '1': 'hsl(var(--color-brand) / <alpha-value>)',
          '2': 'hsl(var(--color-primary) / <alpha-value>)',
        }
      }
    }
  },
  // ...
}

Would advice other names for your theme like shadcn/ui, anyways you do you 👍🏼