[DarkMode] [Dark mode class not working with Chrome's default dark theme.]

[Praveen0369]

Dark mode class not working with Chrome's default dark theme. As a user, I would expect the darkMode class to consistently apply dark styles regardless of the browser's default theme. If possible, adjustments to the darkMode class or additional guidance on handling default browser themes could help address this issue.

To Reproduce Steps to reproduce the behavior:

1. Create a website using Tailwind CSS.
2. Implement a darkMode class to enable dark theme on the site.
3. Load the website in Chrome with its default dark theme enabled.
4. Observe that the darkMode class does not apply consistent dark styles as expected.

Expected behavior When using the darkMode class to enable dark theme on my site, the dark styles should be applied consistently across different themes, including Chrome's default dark theme

Actual behavior The dark mode styles, applied using the darkMode class, are not functioning correctly when Chrome's default dark theme is active. The styles are not being applied as expected, leading to inconsistent appearance and conflicts with other div elements intended for dark themes.

Show your code `<div className={darkMode ? "dark" : "light"} >

TWRECKS

• setDarkMode(!darkMode )} className=' cursor-pointer text-2xl dark:text-gray-300 ' />
• Resume

Praveen Prabhakaran

Developer and Designer

Eager fresher seeking dynamic work environment to apply skills, learn, and contribute effectively. Adaptable, motivated, and ready to make a positive impact

[juujisai]

Hi I'm not sure if I uderstand correctly. We do not support adding the dark class to a single element. Some of the components have content that is added at the end of body (like Select, Datepicker, Timepicker) and that would make the darkmode not to work properly.

If you want to change the theme, add (or remove) the dark class to the html element if you are using the darkMode: "class" setting in tailwind.config.js.