DEV Community

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

Posted on

2 1

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

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!

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay