how to prevent force dark mode by system?

Question

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;
    }
}

Answer 1

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".

• Custom CSS may fail when Chrome's #enable-force-dark flag is enabled
• whitelist "force dark mode" on certain website
• App Specific Override Force Dark
• A Complete Guide to Dark Mode on the Web

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!)

Answer 2

Google has released an article explaining different methods for enabling forced dark mode, and strategies to handle dem both by JavaScript and CSS.

https://developer.chrome.com/blog/auto-dark-theme/#detecting-auto-dark-theme

By forcing dark mode in Chrome you can do dark mode detection, and they have included an opt-out CSS property.

:root {
  color-scheme: only light;
}

Or on specific items:

#my-onlylight-element {
  color-scheme: only light;
}

This is seemingly also supported by Safari (Chrome information in this table is outdated, bug has been reported on that): https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

Answer 3

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;
}

Answer 4

A workaround i found is by using svg image for the background that was switching colors in dark mode