Edit "prefers-color-scheme" value to force Dark Mode

Question

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 😒

Answer 1

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.