Fallback colors do not work as expected

Question

Fallback colors do not work as expected

bstuff opened this issue 8 months ago · 5 comments

bstuff commented 8 months ago

What version of daisyUI are you using?

4.7.2

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/tDE4VRIUyy

Describe your issue

Opacity is not applied to fallback color, so in old browsers I have wrong colors.

Answer 1 · 2024-02-27T18:43:03.000Z

Thank you @bstuff for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

Answer 2 · 2024-02-29T13:05:28.000Z

Unfortunately there's no way to make it work. The hex colors are not for backward compatibility
They are "fallback" and because of the way Tailwind generates color opacity value, we can only use that opacity value once, which would be for the actual color.

To support OKLCH colors, please consider updating your browser and if for some reason you have to still support old browsers, you can stay on daisyUI version 3.x

There will be more new CSS features we're going to adapt in next daisyUI updates and we can't support old browsers forever.

Let me know if you have any questions

Answer 3 · 2024-04-18T14:27:26.000Z

Hi @saadeghi and sorry to resume this issue, but I didn't want to duplicate the topic.
My problem is not related to opacity, but actually, I'm not able to use the current version of daisyUI on old versions of Chrome (v87 to be precise). I saw on Can I use that the @support rule should work since v83, but it doesn't seem to work to me. Everything works fine but not the colors. The rule is just skipped and doesn't initialize the --fallback-[x] variables. Unfortunately, I can't force the client to update its electron app, so I have to support that old version... But I'd like to still use daisyUI v4 if possible. The library works perfectly after Chrome v111 (the version for oklch support) and the @support rules appear in the stylesheet. Do you know what it could be? And how can I solve this? Thanks for the amazing job, I hope I didn't make it wrong by resuming this issue, if you prefer I'll open a new one.

Answer 4 · 2024-09-01T14:24:23.000Z

It's bad behavior that there is no way to disable use of oklch. Even hex colors are converted, but fallback generated only for one theme, not all of them.

Answer 5 · 2024-09-01T14:35:44.000Z

Currently all browsers support P3 color models. I would suggest either update the browser or use daisyUI 3.

But if you can't update the browser, good news is after Tailwind CSS 4 release we will be able to have opacity variables on every color model so it is expected for daisyUI 5 to keep the color format as it is without converting them so your custom themes can have any format.