@media (prefers-color-scheme: dark) CSS styles in my theme components are ignored if the user’s OS system is set to light mode and the user selects dark mode in the sidebar toggle. I also get weirdness if the user’s OS system is set to dark yet they select light in the sidebar toggle. Everything looks as intended when the OS system and toggle match modes. Has anyone else run into this issue and figured out how to get their light/dark mode CSS tweaks to apply when the OS settings and sidebar toggle settings do not match?
Do you have custom themes? Does the same problem happen when you are using foundation or horizon?
Hi Kayla! Were you able to figure this out on your own? If so, can you share the results here?
Prefers-color-scheme only considers the OS mode.
For the interface color selector to work properly for non-color-scheme colors and other CSS values, you must always use dark-light-choose instead like explained here Update themes and plugins to support automatic dark mode - #5 by pmusaraj
1 Like