12

I've been looking for hours for a solution (online and in the Chrome console) but without success.

The "right" way to implement dark mode is to use media queries with the "prefers-color-scheme" parameter:

body {
    color:#fff;
}

@media (prefers-color-scheme: dark) {
    body {
        color:#fff;
        background:#333333
    }
}
If you can read this text Dark Mode is Working

Some browsers (IE, Firefox Mobile, etc) or an app made with Xamarin are not able to pass this parameter in the correct way, so I'm looking for a way to change it manually. Possibly something like this:

screen.prefers-color-scheme = "dark"; //or
window.prefers-color-scheme = "dark"; //or
navigator.prefers-color-scheme = "dark";

I hoped it was a variable readable from the console but I wasted a lot of time looking for it with no success, I also read many posts about a meta named "color-scheme" but there's nothing like that in my projects (and the dark mode is working correctly)

This parameter is read in realtime on Windows and Mac osx, if you switch theme with the browser opened the dark mode will toggle.

Could this be saved in the session maybe? I'm losing my mind

Ares9323
  • 846
  • 1
  • 12
  • 20
  • You cannot set `prefers-color-scheme` using JavaScript in the webpage (as far as I know). However, if you just want to toggle the setting for debugging, you can do so from within Chrome DevTools. If you have DevTools open, open the "Run command" window. You can do this with Ctrl-Shift-P or Cmd-Shift-P. Then type in `Emulate CSS prefers-color-scheme: light` or `Emulate CSS prefers-color-scheme: dark`. – James Mishra Apr 14 '21 at 02:00
  • 5
    I'm glad that you have asked this, not specifically just "how can I toggle my colours based on preference", but "can I *change* that preference"? Whether you should or shouldn't isn't necessarily a debate that's needed, IMO. It's a good question and I would be interested to know if the answer ever changes. Obviously there's easy methods to detect preference and apply a class to your page. But what if you wrote a lot of modifications throughout your stylesheet based on `prefers-color-scheme: dark`, and then someone comes along and says they want to add a toggle? That's where I'm at... – Chris Dec 20 '21 at 11:04

1 Answers1

3

No, unfortunately you can’t set prefers-color-scheme manually. I looked for the same solution, but AFAIK is impossible to overwrite the browsers’ setting via JavaScript: there are several alternative solutions, mainly focused on CSS variables. This is bad, IMHO, because you have to choose between the right way to support both light and dark themes natively or emulate the native property with variables, but right now there are no ways to achieve this without a workaround.

EDITED: Plus… the dark mode, as it was intended to render on mobile, should be set directly from the smartphone’s settings: so the browser is just one of the elements involved. That’s why you can’t change this, I guess.

Federico Moretti
  • 527
  • 1
  • 11
  • 22
  • So what if you prefer all webpages you visit to be dark mode, but your OS can't bet set to dark mode for some reason? – Mark Jeronimus Jun 05 '21 at 14:45
  • @MarkJeronimus just make it the default stylesheet, without the specific media query, and manage the optional switch via JavaScript (e.g., overriding the default with a different, light mode, stylesheet). – Federico Moretti Jun 06 '21 at 13:37