10

Dark/Light mode toggle settings on websites and app are trending 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 the browser?

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;
    }
}
H2O
  • 23
  • 5
lazzy_ms
  • 1,169
  • 2
  • 18
  • 40
  • 5
    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 Jul 20 '20 at 06:42
  • 1
    @cloned I just don't want system to override my settings. – lazzy_ms Jul 20 '20 at 06:47
  • 2
    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 Jul 20 '20 at 06:49
  • 2
    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 Sep 15 '20 at 19:35
  • 1
    +bump, btw -- you may wish to also consider this: _assume_ people will be using either dark or light mode, and make your pages as readable as possible in those modes (ie, chrome:flags, edge:flags, etc) go through the modes at least for a few pages until you get the feel of how dark mode works against what you write, you'll get the hang of it after that. Embrace the idea of dark mode -- its not going anywhere any time soon and is a feature I personally had to wait 20 years for, many of us cannot read low-contrast and need to modify the content we read to our worn out eyes! – osirisgothra Nov 28 '21 at 16:53
  • @cloned `prefers-color-scheme` forces dark mode on users who use dark system theme who don't want websites automatically matching the system theme. – mchid Dec 12 '22 at 18:01

6 Answers6

19

Google has released an article explaining different methods for enabling forced dark mode, and strategies to handle them 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

hnilsen
  • 1,987
  • 2
  • 18
  • 28
8

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

Jeffrey Nicholson Carré
  • 2,950
  • 1
  • 26
  • 44
  • 4
    The user _**IS**_ King. If I have settings that force high-contrast modes it's probably because limits of my vision demand it; are you going to find a way to override that next? Force your website to be unreadable by me? The `!important` rule in CSS was created for _users_ to be able to override a site's styles, not the other way around. _"If you develop templates and have old items from 2017-2018, customers will ask for refunds when they have clients complaining."_ It is _literally_ **your** job to handle this, likely by keeping your templates updated and modern. – Stephen P Sep 15 '20 at 19:13
  • @StephenP, "updated and modern" I don't know what this means in regard to #enable-force-dark. I can work with --force-dark-mode (modern), detect it and modify whatever color/image needs to be changed with a "prefers-color-scheme:dark" . #enable-force-dark is brutal approach and tries to do it by itself. It is not perfect. – Jeffrey Nicholson Carré Sep 15 '20 at 22:28
  • 1
    All I mean is — "old" items need to be updated — that is, templates that one uses for site building should be _continuously_ revised to work with new tech, browser releases, OS features (like light/dark mode) while, of course, keeping a "reasonable" amount of backward compatibility. But if a user wants to use the sledgehammer of force-dark-mode there's no way to prevent it. Test with it turned on; educate the _client_ that it's not possible to control everything. Sorry, I don't think I'm being clear here. My main thing is the OP wants to _force_ a look, and the web _doesn't work that way._ – Stephen P Sep 16 '20 at 01:06
  • 1
    "Test with it turned on" this is definitely the best advice i think. – Jeffrey Nicholson Carré Sep 16 '20 at 20:27
  • 1
    This isn't an answer. – Coz May 19 '21 at 15:58
  • 1
    Yes it is an answer, and very well elaborated on. Don't shoot down someone's effort to help someone else without providing more than just a 4 word response, it's practically what they tell you _NOT_ to use as a comment. – osirisgothra Nov 28 '21 at 16:59
2

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;
}
bender
  • 236
  • 1
  • 3
1

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

kiransure
  • 11
  • 1
1

No JavaScript only CSS

You can "try" to override the user's preference for dark mode by adding this to your CSS file.

/* Firefox */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light;
    }
}

/* Chrome */
@media (forced-colors: active) {
    :root {
        color-scheme: light;
    }
}
ePi272314
  • 12,557
  • 5
  • 50
  • 36
0

For Reactjs apps, add the following line on index.html file,

<meta name="color-scheme" content="only light">

Note: Google doesn't recommend this approach, and encourages the developers to implement UI for dark mode on their websites. More information here.

Giri Madhan
  • 1
  • 1