bug: error in daisyUi themes

[NAB-TAG]

What version of daisyUI are you using?

v4.4.20

Which browsers are you seeing the problem on?

No response

Reproduction URL

https://nando-shop.vercel.app/

Describe your issue

Hello, on some devices (the older ones) the themes do not work

[github-actions]

Thank you @NAB-TAG 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.

[saadeghi]

Old browsers do not support OKLCH colors.
There's a fallback for dark and light themes but not for other themes because it would increase the CSS size dramatically.

We will also remove the fallbacks in the future (daisyUI 5) so either update the browser or downgrade to daisyUI 3.x

There are many new or upcoming CSS features and we can not support old browsers forever.

Let me know if you have any questions

[NAB-TAG]

Thank you very much, I have another question, how do you know that the browser version is not compatible? On your page, when using an old browser, a message automatically appears asking you to update the browser.

The issue is that I want to use it in react so that when it detects that the browser is old it does not directly show me its dropdown with the themes, just like you do.

Thank you very much in advance and happy holidays.

[saadeghi]

This [@supports(color:oklch(0_0_0))]:hidden Tailwind class will hide an element if it supports oklch colors. so you can put this toast on your page and will be hidden if browser supports oklch

<div class="toast toast-center z-10 [@supports(color:oklch(0_0_0))]:hidden">
  <div class="alert alert-warning grid-cols-[auto] py-2 text-xs">
    <span>
      <a class="link" rel="nofollow, noreferrer" target="_blank" href="https://www.wikihow.com/Update-Your-Browser">Please upgrade your browser</a>
    </span>
  </div>
</div>

Let me know if you have a question.

[NAB-TAG]

Thanks very much