Skip to content

bug: prefersdark: true causes any attempt of switching themes to fail #3754

@jeffoxd

Description

@jeffoxd

Reproduction URL (Required)

Stackblitz page not given due to v4 tailwindcss not working on it, sorry for that!! 😭 i dont think it requires it though

What version of daisyUI are you using?

^5.0.12

Which browsers are you seeing the problem on?

All browsers

Describe your issue

So after hours of scratching my hair out, i've found out for custom themes that setting prefersdark: true on my dark custom theme, causes any attempts of switching themes futile (if my browser is on dark mode), is this intended? Though i think if it's intended, could the docs be clearer on this to save developers some time?

I have a simple button with the onclick func below

function toggleDarkMode() {
  document.documentElement.classList.toggle("dark");
  if (document.documentElement.getAttribute("data-theme") === "custom-light") {
    document.documentElement.setAttribute("data-theme", "custom-night");
    localStorage.theme = "dark";
    return;
  }
  document.documentElement.setAttribute("data-theme", "custom-light");
  localStorage.theme = "light";
}
</script>

default custom theme:

@plugin "daisyui/theme" {
  name: "custom-light";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  ...
}

dark theme


@plugin "daisyui/theme" {
  name: "custom-night";
  default: false;
  prefersdark: true;
  color-scheme: "dark";
  ...
}

issue is solved by setting prefersdark to false.

Tailwind ver: ^4.1.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions