DEV Community

loading...
Cover image for Help? Debugging CSS Dark Mode @media prefers-color-scheme

Help? Debugging CSS Dark Mode @media prefers-color-scheme

KurzGedanke
Flexibel, belastbar, innovativ, kreativ, teamfähig, begeisterungsfähig und kreativ. 🏳️‍🌈Pronoun: Es/It🏳️‍🌈 #podcasting #photography #python #student
・1 min read

Hi everyone,

I recently started developing my blog with the @media (prefers-color-scheme: $THEME) in mind. Like this:

@media (prefers-color-scheme: dark) {
  body {
    color: #eee;
    background: #121212;
  }

The great thing is, due to this option the theme is corresponding with system color theme and automatically switches.

But I can't find a great way to debug these query and would like to ask the dev community if they know something. In the past I manually switch in my system preferences.

MacOS System Preferences Screenshot

But this is somewhat laborious and changes the whole color theme of my computer...

Are there maybe any browser addons for Firefox/Safari/Chrome which might help me with those querys and just changes what my browser things color theme is on?

Thank you very much for your help!

Discussion (0)