bug:

[davidek-dev]

What version of daisyUI are you using?

No response

Which browsers are you seeing the problem on?

Edge

Reproduction URL

https://daisyui.com/components/theme-controller/

Describe your issue

This Problem occurs, when you use the Theme Controller toggle as a controller for changing between dark & light mode. DaisyUI provides excelent support for defining a custom dark mode that is used automatically, whenever the user system is in dark mode. After the page automatically recognizes the user switching from light to dark, the theme is correctly changed into darkmode. unfortunetly the Theme Controller doesn't switch the theme to light mode anymore. I linked the official docs because this behaviour can be seen aswell on the official Docs website. In contrast to my personal implementation, the DaisyUI Docs Site seems to have a standard dark mode aswell as a custom one in the theme settings. That is why, the toggle on the DaisyUI Docs Site still does work. But like in my personal project, it does not change it to the original lightmode like what it did when the system was still in lightmode, instead the Theme Controller now switches between the custom nightmode theme and the standard nightmode theme. If this is a feature and not a bug, it definetly should be put into consideration that most likely people do not want this change to happen in night mode but instead want the standard behaviour (a toggle between light and night and not a toggle between custom night and standard night).

this is my tailwind.config.js:

export default {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  variants: {},
  mode: "jit",
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      {
        light: 
        {
          "primary": "#1f15e0",
          "secondary": "#b1aeef",
          "accent": "#838192",
          "neutral": "#0f0f3d",
          "base-100": "#f3f3fc",
        },
        dark: {
          "primary": "#6d1b83",
          "secondary": "#270a2f",
          "accent": "#b130d5",
          "neutral": "#340d3f",
          "base-100": "#23092a",
        },
      },
    ],
    darkTheme: "dark",
    base: true,
    styled: true,
    utils: true,
  },
};

and this is my personal implementation of the Theme Controller (i'm using this in an astro project):

import Navigation from './Navigation.astro';

const logo = "";

---
<header class="sticky top-0 z-50">
  <div class="navbar bg-base-100">
    <div class="flex-1">
      <a class="btn btn-ghost normal-case text-xl" href="/">Danek Dental Lab</a>
    </div>

      <label class="swap swap-rotate">

        <!-- this hidden checkbox controls the state -->
        <input type="checkbox" class="theme-controller" value="dark" />

         <!-- moon icon -->
         <svg class="swap-off fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/></svg>

        <!-- sun icon -->
        <svg class="swap-on fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>

      </label>

      <div class="dropdown dropdown-end" id="header-navigation">
        <label tabindex="0" class="btn btn-ghost rounded-btn">
          <svg class="swap-off fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"/></svg>
        </label>
        <ul tabindex="0" id="header-navigation-content" class="menu dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-52 mt-4">
          <Navigation/>
        </ul>
      </div>

    </div>
  </div>
</header> ``` 

[github-actions[bot]]

Thank you @davidek-dev 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.

[davidek-dev]

in the following i have a Recording of my steps using the windows buildIn Steprecording tool: stepRecording.zip

[saadeghi]

I see. Here's what's happening: You have dark + light themes in your config so at this point, the website adapts the OS settings. It will be dark on dark mode, it will be light on light mode.

And now you have a checkbox which can only be checked/unchecked. If it's not checked, nothing happens and the page will have system theme as I described above. If it's checked, it will apply dark theme.

Here's the problem. If the system is dark, you see dark theme on the page and then you check the checkbox to activate dark theme… so it's just dark/dark…

So, it's not logically possible to have 3 options (system, light, dark) using a binary checkbox that can be true or false.

• You can use radio inputs for 3 options.
• You can disable system theme. force light theme by default. and provide the checkbox for switching to dark: https://play.tailwindcss.com/6UvVPZFiTe?file=config

Let me know if you have a question.

[davidek-dev]

I'm sorry if I explained it confusingly. Your exactly right, i only want 2 option but with the implementation like on the official DaisyUI Site you have 3 for an binary switch, witch is wrong in my opinion. I think there should be either an option for or the standard behaviour to check/uncheck automatically the checkbox whenever the user changes its system mode settings

so the user experience would be like:

1. the site is in either dark or light mode (these can be modified in the config file)
2. with darkTheme = True it would switch to dark mode when the user system mode switches to dark mode and vice versa
3. if darkTheme is true and the user switches it, the Theme Controller state has to change such that it still works
4. because the checkbox gets checked without the theme changing, now the controlls are reversed and work fine

i hope you understand what i mean, i'm not that fluent in english and struggle explaining what i mean

[saadeghi]

As far as I know the scenario you described would need JS on runtime to dynamically change the checkbox value based on OS preference. Because the value of the HTML checkbox is not something we can control from tailwind.config.js at build time.