Changing colors on runtime?

[NathanTe]

Hey guys,

quick question is there a way to dynamically change colors on runtime? I would like to be able to call my api get color values and change the colors of daisyui?
I know it is possible to define different themes but I don't know the colors in advance so this is not an option.

any help would be appreciated .
@saadeghi

[saadeghi]

Each color is a CSS variable with HSL values.
You can see the colors of all built-in themes here: https://unpkg.com/browse/daisyui@2.14.3/dist/themes.css
And here you can see the list of all color names and their variable name.

And you can change the color on runtime by changing the value of CSS variable.
If your color has a different format like hex, RGB, etc... you need a JS function (or a node package) to convert the format and extract the HSL values.

[NathanTe]

So I would be able to override the --p variable and te primary color would change everywhere?

[saadeghi]

Yes.
https://play.tailwindcss.com/uTdCPT4NWj?file=css

[NathanTe]

Thx for the example got it working :)

[Torbet]

@saadeghi I see you now use oklch instead of HSL, I'm struggling to find a good library to convert between hex and lch, any suggestions?

[saadeghi]

This is a really good package:
https://culorijs.org/

By the way, lch is different from oklch. daisyUI 4 uses oklch