[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"} > <main className=' px-8 md:px-20 lg:px-40 bg-white dark:bg-gray-800'> <section className=' min-h-screen dark:bg-gray-90'><nav className='py-10 mb-12 flex justify-between'> <div className=' bg-cover bg-center background'> <h1 className='text-3xl px-5 font-semibold mix-blend-lighten text-black bg-white'>TWRECKS <ul className='flex items-center'>

<BsFillMoonStarsFill onClick={() => setDarkMode(!darkMode )} className=' cursor-pointer text-2xl dark:text-gray-300 ' />

<a className=' bg-gradient-to-r from-cyan-500 to-teal-500 text-white px-4 py-2 rounded-md ml-8 shadow-sm shadow-teal-400' href="#">Resume

<div className=' text-center p-10 '> <h2 className='text-4xl py-2 font-medium text-teal-500 md:text-5xl'> Praveen Prabhakaran <h3 className='text-2xl py-2 md:text-3xl dark:text-gray-300 '>Developer and Designer <p className='text-md py-5 leading-8 dark:text-gray-300 text-gray-800 md:text-xl max-w-lg mx-auto'>Eager fresher seeking dynamic work environment to apply skills, learn, and contribute effectively. Adaptable, motivated, and ready to make a positive impact <div className='text-5xl justify-center gap-16 py-3 flex dark:text-gray-400'> <AiFillFacebook/> <AiFillLinkedin /> <AiFillInstagram /> `

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome
• Version 115.0.5790.110
• tailwind css v3.3.3

Smartphone (please complete the following information):

• Device: Any Android device
• OS: Android 11
• Browser chrome, duck duck go
• Version 115 (115.0.5790.166)

[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.