Use CSS variable in custom theme?

[maybebansky]

I need to define colors in my CSS file and use them in my theme, similar to ShadCN works.

I have a color in my CSS file:

@layer base {
  :root {
     --primary: 64.8% 0.15 160;
  }
}

But it doenst work when I try to use it in my tailwind config:

  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["light"],
          primary: "oklch(var(--primary))",
        },
      },
    ]

Should this be possible?

[saadeghi]

There are already CSS variables for each color name:
https://daisyui.com/docs/colors/
https://unpkg.com/browse/daisyui@4.9.0/dist/themes.css
And you can use or change these CSS variables on runtime.

It's currently not possible to put the existing CSS variable value in another CSS variable because daisyUI needs to know the value of the color so it can apply the color opacity to them the way Tailwind CSS plugin API needs.
According to the alpha release of Tailwind CSS 4, this limitation will probably be fixed in Tailwind CSS 4 and daisyUI will ve able to allow you put the CSS variable in another CSS variable if you really have to do that.

Let me know if you have any questions