DaisyUI prefers-color-scheme Not Working in Chrome

[frst-mg]

Hi everyone,

I'm having an issue with DaisyUI where the prefers-color-scheme setting works correctly in Brave and Firefox but not in Chrome.

In Chrome, it only applies the dark mode theme regardless of the browser's prefers-color-scheme setting. Has anyone else encountered this issue or have any suggestions on how to fix it?

@import 'tailwindcss';
@plugin "daisyui";

Using :
"tailwindcss": "^4.0.7"
"daisyui": "^5.0.0-beta.8",

Thanks in advance for your help!

[saadeghi]

Can you try with incognito mode?
Do you have any Chrome extension that may effect the styles?

[frst-mg]

I tried incognito it dosen't work, i have those extensions:

Disabled ColorZilla since next js throws errors because of it.

[saadeghi]

It's hard to guess without seeing the project.
Do you have data-theme in the HTML setting a specific theme?
Can you try changing Chromes prefers-color-scheme from devtools?

1.mp4

[frst-mg]

I dont have a data-theme in the html i only have this in css:

@import 'tailwindcss';
@plugin "daisyui";

@plugin "daisyui/theme" {
  name: 'light';
  default: true;
  --color-primary: #2a5099;
}

@plugin "daisyui/theme" {
  name: 'dark';
  prefersdark: true;
  --color-primary: #2a5099;
}

input[type='text'] {
  @apply focus:outline-none;
}

@theme {
  --breakpoint-xs: 30rem;
}

I can toggle like you show in the video.

[saadeghi]

I can toggle like you show in the video.

So it's working correctly. It will be light if Chrome and/or you OS is light mode.
You can change Chrome's "mode" from chrome://settings/appearance
You can change the OS theme from OS settings.

Let me know if you have a question.