how to prevent force dark mode by system?

4
votes

Dark/Light mode toggle settings on websites and app are tredning and there is a some system default theme mode also available like chrome dev-tools provide force dark-mode, but I want my website to be view in the way it has been built. So, How do I prevent the force dark-mode, applied by chrome?

I have tried prefers-color-scheme media query, but I guess, I'm doing something wrong or missing something.

@media (prefers-color-scheme: dark) {
    body {
        background: #fff;
    }
}
2
javascriptcssgoogle-chrome
You can't force anything on users. If they prefer to view it with their own styles they can view it in their own (dark) styles. - cloned
@cloned I just don't want system to override my settings. - lazzy_ms
That's what I said: You can't force your settings on the user. If the users system is set to override your site then there is nothing you can do about it. - cloned
I often have to tinker with web sites using dev-tools and/or my Stylus or Stylebot plugins because "in the way it has been built" is unreadable to me. Your small font-weight:lighter grey-on-white text may look pretty cool to you, but I can't read it. That is why the end-user will always be allowed and able to override your "settings". - Stephen P

2 Answers

2
votes

TL;DR It is impossible as of now

Why we need this?

There seems to be Android phones where Chrome has this enabled by default based on the theme mode they choose for the phone (light vs dark).

If you develop templates and have old items from 2017-2018, customers will ask for refunds when they have clients complaining. It is almost impossible to diagnose if you did not know such a feature exist. In many cases the website in un-readable.

It invalidates the dark/light toggle experience on websites (destroys the experience on CSS websites on how to do it). Not being able to detect when this happens is also not helping, we could remove the toggle and serve the dark theme directly or warn the user that something is wrong.

No Solution

There is no way to change it as of now, they even change the background on the images and they do a good job too, .jpeg... 🤣😂. It is not just a simple color swap.

I think they go with "the user is king" approach. If the user wants to enforce it they will side with the user.

It is getting better and better on each update.

It messes up with the color picker in the dev-inspection-tool too...

Even if they were to add a "fix" it would not be available on old browsers. I dont think they even thought of implementing a way to bypass or "white list".

But

There is a conceptual approach here: https://stackoverflow.com/a/60462984/1427338

I had mixed results with the css. In a simple page it works but in more complex projects there were too many edge cases to handle them all, and no fix for the image(... it replaced the background in image!)

0
votes

I found a workaround (at least for me):

If the background-color of the body is set to black and background-image: linear-gradient with bright colors is added (to override the background-color), chrome seems to be tricked in thinking everything is fine and it stops touching/recoloring the other elements. At least as of today (Chrome version 86) - Maybe this helps…

body { 
   background-image: linear-gradient(#ffffff, #ffffff); 
   background-color: #000000;
}