bug: v.4.x - custom themes not working on iOS

[mbbirkel]

What version of daisyUI are you using?

v.4.4.19

Which browsers are you seeing the problem on?

Safari iOS

Reproduction URL

https://github.com/mbbirkel/daisyui4-theme-bug

Describe your issue

Daisyui 4 seems to have broken custom themes on iOS. It seems the default daisyui theme colors are used instead of the custom theme, but only on iOS safari. The custom themes work just fine on any other browser i have tested.
I tested that this behavior occurs on both 4.0.0, and 4.4.19. The theme colors work on iOS on daisyui 3 with this example.

I provided an example repository where this occurs.

When the page is opened on iOS with daisyui 4, the button colors seem to use the default daisyui light theme. The dashboard_light theme colors do apply when using any other browser however.

Chrome output (daisyui v.4):

Chrome iOS output (daisyui v.4):

Chrome iOS output (daisyui v.3):

This is my daisyui-configuration in tailwind.config.ts:

  plugins: [require("daisyui")],
  daisyui: {
    base: true,
    themes: [
      {
        dashboard_light: {
          primary: '#00b37e', // light green from laddel logo
          secondary: '#039d6f', // dark green from laddel logo
          'secondary-content': '#000',
          'primary-content': '#fff',
          accent: '#b8eddd',
          neutral: '#fff', // background for components
          'base-100': '#f4f4f4', // background
          'base-200': '#fcfcfc', // lighter background - navbar
          'base-300': '#b4b4b4', // icons
          info: '#00AAFF',
        },
        dashboard_dark: {
          primary: '#00c288', // light green from laddel logo
          secondary: '#00b37e', // dark green from laddel logo
          'primary-content': '#fff',
          'secondary-content': '#fff',
          accent: '#343f3b',
          neutral: '#222', // background for components
          'base-100': '#1a1a1a', // background
          'base-200': '#222', // lighter background - navbar
          'base-300': '#cdcdcd', // icons
          info: '#3ABFF8',
        },
      },
    ],

[github-actions]

Thank you @mbbirkel 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]

daisyUI 4 uses OKLCH color format which provides a wider range of colors. It works on Chrome 111+, Safari 15.4+, Firefox 113+

Older browsers only show fallback colors for the default light/dark themes. Only to prevent the UI to break on old browsers.

These are the fallback colors: https://github.com/saadeghi/daisyui/blob/master/src/base/colors.css
daisyUI doesn't provide fallback colors for all themes because it increases the CSS size a lot, just to support a small percentage of browsers who don't support OKLCH.

• You can update your browsers
• You can add fallback colors for custom themes manually in CSS like this
• Or you can use daisyUI 3.x if you can' update your browser

Let me know if you have a question.