landwind icon indicating copy to clipboard operation
landwind copied to clipboard
verified publisher icon themesberg

Auto dark mode not working

Open brady-sewall opened this issue 3 years ago • 3 comments

Tested on desktop: macOS 13.1 Ventura on MacBook Pro

  • Chrome 108
  • Safari 16.2
  • Firefox Developer Edition 109

Tested on mobile: iOS 16.2 on iPhone 13 Pro Max

  • Chrome 108
  • Safari

Actions taken:

  1. System set to auto light/dark; system is in dark mode = no affect on website
  2. Manually set system to dark mode = no affect on website

brady-sewall avatar Jan 09 '23 07:01 brady-sewall

Same incorrect behaviour on Win10/Chrome.

image

  • Windows 10 Home 22H2
  • Chrome 109.0.5414.120 (Official Build) (64-bit)

Dark mode media query tested in console (see screenshot above).

ctheiss avatar Feb 05 '23 15:02 ctheiss

I believe to fix this, just add

darkMode: 'media',

to tailwind.config.js, per https://flowbite.com/docs/customize/dark-mode/#enable-dark-mode

ctheiss avatar Feb 17 '23 02:02 ctheiss

I believe to fix this, just add

darkMode: 'media',

to tailwind.config.js, per https://flowbite.com/docs/customize/dark-mode/#enable-dark-mode

More specifically, add what @ctheiss suggested and then compile updated Tailwind CSS + Flowbite. Works great now!

brady-sewall avatar Feb 17 '23 02:02 brady-sewall