search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.13k stars 1.3k forks source link

bug: checkbox theme controller broken if data-theme equals input value #3251

Closed Fak3 closed 3 weeks ago

Fak3 commented 3 weeks ago

What version of daisyUI are you using?

v4.12.13

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://fak3.github.io/daisy-test/checkbox.html

Describe your issue

If data-theme value of \<html> is the same as theme-controller checkbox, then it does not work. Example: https://fak3.github.io/daisy-test/checkbox.html

HTML snippet:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"
  data-theme="retro"
>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.13/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script dsrc="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <input type="checkbox" value="retro" checked name="theme" class="toggle theme-controller"/>
  </body>
</html>

Expected behavior: unchecking checkbox should reset theme to default. Observed behavior: checkbox does not do anything at all.

In contrast, radio theme switch works as expected: https://fak3.github.io/daisy-test/radio.html

github-actions[bot] commented 3 weeks ago

Thank you @Fak3 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 commented 3 weeks ago

Thanks for the reproduction link.
Here: https://fak3.github.io/daisy-test/checkbox.html

  1. Your default theme is light
  2. Then you override retro using data-theme=retro
    So until here, the theme is retro
  3. and when you check the toggle, it switches to retro (same)

It is working as expected. theme-controller switches theme to its value (value="retro") when checked, it doesn't do anything when it is unchecked. There's no difference between an unchecked theme-controller and removing it from the page. it applies styles when it's checked.

Let me know if you have a question.

Fak3 commented 3 weeks ago

This surprising behavior should be documented. When the data-theme and checkbox value match, then the checkbox does nothing. Docs should guide users to use radio button instead.

saadeghi commented 3 weeks ago

If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input's value.

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

Maybe I can rephrase that to be more clear.

Fak3 commented 3 weeks ago

Even funnier is that if both radio and checkbox controller exist on the same page, then both work properly.

Fak3 commented 3 weeks ago

Even funnier is that if both radio and checkbox controller exist on the same page, then both work properly.

Oh, it is not correct - if the checkbox is not checked, then radio controller work fine. If the checkbox is checked then the radio stops responding. But if the radio is set to 'retro', then checkbox does not work.

saadeghi commented 3 weeks ago

Here's how it works: 

:root:has(input.theme-controller[value=retro]:checked) {
}

it means if page has a <input value="retro" checked> it will get retro theme. That's it and that's the expected behavior.

There's no magic, or JS script to check what was the previous theme.
If you put multiple theme-controllers in one page (Why?) they will override each other based on the order of themes in CSS, because they have the same CSS specificity.

You only need one theme-controller in page, which switches from current theme to the one you set as value.

Let me know if you have a question.

saadeghi commented 3 weeks ago

If you put multiple theme-controllers in one page (Why?) they will override each other based on the order of themes in CSS, because they have the same CSS specificity.

Honestly I don't see a situation that multiple theme selectors in one page would be needed, otherwise I would mention that in the docs.

Fak3 commented 3 weeks ago

If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input's value.

This should expand on the handling of data-theme. It is common that theme preference for a user is stored on the server and applied via data-theme on the page. In this case it is not possible to use checkbox to switch back to the default theme, and only radio buttons will work.

saadeghi commented 3 weeks ago

I will update the docs. Thanks