Using custom properties for colors

[canvasplay]

I'm guessing it can't be so clean and simple so here is my question.
I'm planning into using CSS custom properties for defining colors and apply different themes to it e.g.

:root{
  --card-color: white;
}
.t-dark{
  --card-color: black;
}

I've done a quick test extending tailwind.config.js like the following and it apparently works:

module.exports = {
  theme: {
    extend: {
       color: {
           card: "var(--card-color)"
       }
    }
  }
}

So I can later use regular tailwind classes like bg-card or color-card and switch the color by a container class t-dark.

Is there any reason for not doing this? any alternatives?
I am also thinking if this could be a way of handling the "dark" mode without the suggested dark: classes approach... but probably you guys have also thinked about it and there should be a good reason for not doing it so.

Thanks in advance.

[mainej]

It sounds like you want to manually toggle dark mode by changing a single container class. I think that is already supported. That said, there are other scenarios where you may want to "theme" an app—that is, toggle a single parent class and have it change many colors. I think CSS variables are a good way to do that, and I proposed adding official Tailwind support in #1978. The Tailwind team decided not to implement it, but it is possible to implement yourself.

[canvasplay]

Thanks for the quick reply!
No, I don't want to manually toggle dark theme. In fact I would like to prevent the need of having to add custom dark:* classes all around.
Also interesting your proposal in here #1978

[simonswiss]

Hey,

Yep, that's a valid way to go around it if you need to support more "themes" and not only the built in darkMode that is currently supported.

You can see a simple example that Adam did a fair while ago, which takes the exact approach you are talking about.

It uses custom properties for colors in the config file, and then redefines these properties for each theme, scoped in a class name.

[canvasplay]

Thanks for the links! It gives me some hints.