flowbite
flowbite copied to clipboard
themesberg
Light mode toggle not working when browser is in dark mode
Describe the bug I have a similar issue as described in issue #145 when I use the code shown here: https://flowbite.com/docs/customize/dark-mode/
To Reproduce Steps to reproduce the behavior:
- Set browser/os to dark mode
- Toggle light mode
- Dark mode is still shown
Expected behavior It should show light mode.
Desktop (please complete the following information):
- OS: macos
- Browser: chrome
- Version: 110
Smartphone (please complete the following information):
- Device: iPhone 14
- OS: iOS 16
- Browser safari
- Version 16.0
Hey @QuixThe2nd,
Thanks for reporting - the guide there shows the class strategy where you need to add the dark class to the <html> tag. Did you try removing the class from the Tailwind configuration?
Cheers, Zoltan
I'm using the Tailwind development environment:
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.2/flowbite.min.css" rel="stylesheet">
<script async defer src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.2/flowbite.min.js"></script>
Is it possible to change Tailwind configuration in a development environment?
Hey @QuixThe2nd,
I think that you need to set the tailwind.config.js dark mode settings to media.
Cheers, Zoltan
Thanks for the response. I actually got it working by setting it to class
hey guys, if i have darkMode on media or on class it gives me the same issue: my dark/light mode goes only when i set my browser on light mode. If it's on the settings of my mac or in dark mode, after i click the button it stay in dark mode, suggest?
