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[bot]]

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

[ruibaby]

It doesn't seem to work under Chromium 102 on Desktop.

[saadeghi]

It doesn't seem to work under Chromium 102 on Desktop.

Can you share your tailwind.config.js?

[ruibaby]

Can you share your tailwind.config.js?

/** @type {import('tailwindcss').Config} */
const { Icons } = require("tailwindcss-plugin-icons");
module.exports = {
  content: ["./templates/**/*.html", "./src/**/*.ts"],
  darkMode: "class",
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/aspect-ratio"),
    Icons(() => ({
      ri: {
        includeAll: true,
      },
      simpleIcons: {
        includeAll: true,
      },
      tabler: {
        includeAll: true,
      },
    })),
    require("daisyui"),
  ],
  daisyui: {
    themes: true,
  },
  safelist: [
    "i-ri-mail-line",
    "i-ri-wechat-2-line",
    "i-ri-qq-line",
    "i-ri-weibo-fill",
    "i-ri-zhihu-line",
    "i-ri-douban-line",
    "i-ri-bilibili-line",
    "i-ri-tiktok-line",
    "i-ri-telegram-fill",
    "i-ri-facebook-box-line",
    "i-ri-instagram-line",
    "i-ri-linkedin-box-line",
    "i-ri-twitter-line",
    "i-ri-slack-fill",
    "i-ri-discord-line",
    "i-ri-youtube-line",
    "i-ri-steam-fill",
    "i-ri-github-fill",
    "i-ri-gitlab-line",
    "i-ri-rss-fill",
    "i-simple-icons-matrix",
  ],
};

[saadeghi]

@ruibaby it should work. I need a reproduction repo so I can see what's going on.

[ruibaby]

@ruibaby it should work. I need a reproduction repo so I can see what's going on.

Repo：https://stackblitz.com/~/github.com/ruibaby/daisyui-color-issue

Video：

https://github.com/saadeghi/daisyui/assets/21301288/f455a915-2ab9-4a70-b794-3ad5ff405868

If there is any information missing, please let me know, thx.

[saadeghi]

@ranjan-purbey Update the browser. Chrome 102 is an old version.

[ranjan-purbey]

@ranjan-purbey Update the browser. Chrome 102 is an old version.

I think you meant to tag @ruibaby

Anyway, this affects iOS Safari versions before 16.4

[mctwistyup]

Hi all !

I can confirm that we encouters the same problem on safari desktop and mobile before 16.4 All DaisyUI component are "black and white" I can see that oklch value is not loaded on safari :

good version :

bad version ;

I will push any update i can here

[mctwistyup]

Here if i replace the value --p 0.75 by the value in percentage it's ok Someone know how i can force this value to be in percentage ?

[mctwistyup]

@saadeghi

It seems that the supported format for oklch by all browsers is "xx% x.xx x.xx" instead of "x.xx x.xx x.xx" the oklch() function you use from culori package return new oklch code without percentage for the first number.

What do you think if we change the function in src/theming/functions.js:

colorObjToString:function (input) { const { l, c, h } = input return `${cutNumber(l)} ${cutNumber(c)} ${cutNumber(h)} },

In

colorObjToString: function (input) { const { l, c, h } = input return `${cutNumber(l)*100+"%"} ${cutNumber(c)} ${cutNumber(h)} },

I'm not sure its the best way and need your advice before forking.

Thanks

[millette]

@99power Actually, you need Safari 16.2 and above in order to support that syntax (decimal numbers instead of percentages) according to https://caniuse.com/mdn-css_types_color_oklch_mixed_type_parameters

[xpluscal]

Any update on this?

[Psli]

Any solution fallback for iOS 15?

[mctwistyup]

@xpluscal @Psli we downgraded to 3.9.4 waiting for an update of @saadeghi everything is working from our side on this version