CSS Dark Theme Media Queries not working on Firefox and Chrome?

user_15194965 0
Viewed 610

I recently switched my site to use media queries to change the site's theme from light mode to dark mode.

It works on the Edge browser for desktop and mobile, but doesn't work on Firefox and Chrome (desktop and mobile).

Why aren't these media queries working on Firefox and Chrome, and how can I troubleshoot this issue?

OS Windows 10 system theme is light Chrome Version 90.0.4430.212 Firefox Version Version 88.0.1

body {
  /* Black-on-white by default */
  background: #fff;
  color: #000;
}

@media (prefers-color-scheme: dark) {
  /* White-on-black if user prefers dark color scheme */
  body {
    background: #000;
    color: #fff;
  }
}
<p>Hello, StackOverflow!</p>

darkmode media-queries css
1 Answers

Chrome and Firefox also look at the theme preference of your operating system.

If you are on Windows with your operating system theme set to light, even if Chrome and Firefox are dark theme, they will not load webpages in dark theme.

If you change your Windows operating system theme to dark theme, then Chrome and Firefox will change.

user_151949650
Related