Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
Fak3 opened this issue Oct 26, 2024 · 10 comments
Closed

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

Fak3 opened this issue Oct 26, 2024 · 10 comments

Comments

@Fak3
Copy link

Fak3 commented Oct 26, 2024

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/[email protected]/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 GitHub Actions
Copy link

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.

@Fak3 Fak3 changed the title bug: checkbox theme controller broken if data-theme is not default bug: checkbox theme controller broken if data-theme equals input value Oct 26, 2024
@saadeghi
Copy link
Owner

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
Copy link
Author

Fak3 commented Oct 26, 2024

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
Copy link
Owner

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
Copy link
Author

Fak3 commented Oct 26, 2024

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

@Fak3
Copy link
Author

Fak3 commented Oct 26, 2024 •
edited
Loading

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
Copy link
Owner

saadeghi commented Oct 26, 2024 •
edited
Loading

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
Copy link
Owner

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
Copy link
Author

Fak3 commented Oct 26, 2024

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
Copy link
Owner

I will update the docs. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Fak3 @saadeghi