bug: Failed to switch themes in mobile browser.
DataSciSorcerer opened this issue · comments
What version of daisyUI are you using?
v4.4.19
Which browsers are you seeing the problem on?
Chrome Android
Reproduction URL
http://8.130.146.80/#/index/register
Describe your issue
☝🏻☝🏻☝🏻☝🏻☝🏻The theme can be switched normally and the background is black
☝🏻☝🏻☝🏻☝🏻☝🏻When I open it on the mobile browser, I cannot switch the theme and the background color does not take effect. I am using Vue+Vite.
This is project url
Thank you @DataSciSorcerer
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.
What's the version of your "mobile browser"? Because it's working for me.
Record_2024-03-21-04-05-15.mp4
Only the button's rounded corners have changed
This is how theme-controller works: it switches between the current theme and the theme specified for its value (dracula in your code)
And by default, daisyUI provides automatic dark mode based on OS/browser settings. So when the OS/browser is in dark mode, the theme-controller will switch from dark theme and dracula theme (both are dark)
You can force the theme to be light and then you can use theme-controller to switch it to dark.
Add darkTheme: false config to disable the automatic dark mode. This way the page will be light by default and it will be dark when theme-controller is clicked.
Let me know if you have a question.