bug: OKLCH colors and themes not working on mobile

[99power]

What version of daisyUI are you using?

4.4.24

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://daisyui.com/docs/themes/

Describe your issue

It seems not even the fallback colors for the "light" theme are working, only dark theme.
Running on iPhone 7 (might this be phone related?)

• Firefox 121.0
• Chrome 120.0.6099
• Safari 15.6 (not the latest, but should work according to the docs)

Obviously a downgrade to 3.9.4 resolves the issue.

Personal note: While I love the much better colors, I think fallbacks should be complemented for all themes, maybe in a separate package. Not everyone updates their devices that regularly.

[github-actions]

Thank you @99power 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.

[kriskratz]

Is your phone set to dark mode? What happens if you change the phone to light mode? This happened to me too.

I'm not sure if the website has all of the theme fallbacks defined. My generated CSS only defines Light and Dark themes by default.

[99power]

I see. Yeah the phone's dark mode/light mode changes the theme, so your fallback works. But why would it show me that my browser is outdated?
Going forward - just my humble opinion - I think there should be a continued support for HSL for reason mentioned.

[saadeghi]

Running on iPhone 7

What is your iOS version?

[99power]

iOS 15.8

[ranjan-purbey]

It turns out that safari doesn't have support of numeric value for lightness oklch(0 0 0) but does support percentage value oklch(0% 0 0). This causes the @support query to fail and fallback styles from src/base/colors.css are used instead.

As a workaround, you can override these fallback custom css properties in your project with hex color values.

[saadeghi]

safari doesn't have support of numeric value for lightness oklch(0 0 0) but does support percentage value oklch(0% 0 0)

I didn't know that. According to MDN, Mix <percentage> and <number> syntax in parameters is supported by Safari 16.2+

I'm going to replace all percentages to numbers to avoid mixed syntax.

Thanks for digging the problem @ranjan-purbey

[ranjan-purbey]

On paper it does but appears to be a bug. We would need to replace number values with percentages (only for L. For C & H, numbers work fine)

[sadkebab]

I tried to work around this bug by overriding --fallback variables in the css but it does not work properly. Sometimes a oklch color gets opacity from another css variable, like --tw-text-opacity in the case of disabled buttons, and the fallback for that is to a variable declared in hex like this color: var(--fallback-bc, oklch(var(--bc)/var(--tw-text-opacity)));. This is not a proper way of falling back to colors when oklch is not supported, since it applies opaque colors when there should be transparency.

[sadkebab]

I also tried downgrading to 3.9.4 but it did not solve the issue for me. colors are still falling back on mobile and there is the same issue with opacity

[saadeghi]

@sadkebab Are you also using iOS 15.8?

[ayazalam]

so whats the solution here?

My website does not look good on safari I am using:
theme controller also not working on iOS I have checked on safari and chrome

iPhone 11
iOS 16.0

is there any workaround?

[ayazalam]

It turns out that safari doesn't have support of numeric value for lightness oklch(0 0 0) but does support percentage value oklch(0% 0 0). This causes the @support query to fail and fallback styles from src/base/colors.css are used instead.

As a workaround, you can override these fallback custom css properties in your project with hex color values.

hi where do I find this src/base/colors.css