Chrome’s Hidden “Auto Dark Mode” Feature
I recently discovered an experimental Chrome flag that causes Chrome to intelligently render all websites in “Dark mode”. After using it for a few weeks, I can tell you that it works almost flawlessly. If you prefer everything to be in dark mode (as I do), you should try it out.
Enable Chrome’s “Auto Dark Mode”
To enable the flag, enter chrome://flags
into Chrome’s URL bar. This is a menu that exposes experimental features in Chrome. Most of them are niche features that you don’t need, with the notable exception of the #enable-force-dark
flag. Find this flag (you can search for “Auto Dark Mode for Web Contents”) and enable it by selecting one of the options from the menu.
Each option is subtly different, and none of them are perfect. After all, this is an “experimental” feature. Instead of trying to explain the differences between the options, I encourage you to experiment, find the one that works best for you, and leave a comment on this article with your experience, your preference, or any notable differences between the options. I’ll document what I’ve learned to give you a starting point.
Selective Image Inversion with Auto Dark Mode
One of the most common issues I run into is how icons are inverted. Chrome offers the option to invert icon colors (called “selective image inversion”). Notably, this does not invert “editorial” images (like the image at the top of a Medium article). If you only use a “light” theme on every website you visit, then this option is great. The contrast is preserved, so dark icons on a light background become light icons on a dark background.
On the other hand, if you already use a “dark” theme on websites that support it, or visit a website that only offers a dark theme, you may find that Chrome’s color inversion clashes with the the website’s own dark theme.
Here’s an example using Google’s own Gmail web app with its “Dark” theme and “selective image inversion” enabled:
Because Gmail’s “Dark” theme already provides inverted (light) icons, when Chrome auto-inverts them, they are effectively “double-inverted”. The result, as you can see, is low-contrast icons. Note that Chrome’s “Auto Dark Mode” does not “double-invert” the background.
There are two options to work around this. Neither are perfect:
- Select an “Auto Dark Mode” option that does invert images, and use the website’s “light” theme when possible. This allows Chrome to control how colors are inverted, avoiding the “double-inversion” scenario. The main downside here is that you’ll still get the light theme on different browsers and devices.
- Select an “Auto Dark Mode” option that does not invert images, and use the website’s “dark” theme when possible. This may be a good option to preserve dark mode across browsers or devices, but you will run into the “double-inversion” problem more often.
Configuration Granularity
Chrome does not currently provide a way to selectively enable or disable “Auto Dark Mode” on individual websites. The ability to do so is one of the necessary improvements before this feature is moved out of the “experimental” phase.
Alternatives
There are many third-party browser extensions that offer similar functionality, often with more features.
Dark Reader, the only third-party tool I’ve used for this functionality, is a browser extension that inverts web pages into dark mode. It is highly configurable and works on all major browsers. I used it for a while but did not like it and ultimately uninstalled it. There were many small things I didn’t like that all added up to one big problem: It did not feel like a native experience (because, well, it’s not). In contrast, Chrome’s “Auto Dark Mode” feels native (because, well… it is). I almost always forget that the website I’m looking at does not provide its own dark theme.
For comparison, here’s what this article looks like without “Auto Dark Mode” enabled. I needed sunglasses to take this screenshot.