Chrome’s Hidden “Auto Dark Mode” Feature

Bryan Ricker
4 min readMay 27, 2022

--

This article rendered with a dark background and light text, the inverse of Medium’s default theme.
This article with Chrome’s “Auto Dark Mode” flag enabled.

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.

The “Auto Dark Mode for Web Contents” menu item in Chrome’s “Experiments” menu.
Auto Dark Mode flag in the `chrome://flags` 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:

The Gmail UI rendered with dark icons and a dark background make the icons almost invisible.
Gmail’s “Dark” theme with Chrome’s “Auto Dark Mode” inverting the menu icons.

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:

  1. 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.
  2. 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.
The Gmail UI rendered with “light mode” icons on Chrome’s “Auto Dark Mode” background make the icons visible.
Gmail’s “Default (Light)” theme with Chrome’s “Auto Dark Mode”.

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.

This article rendered with a light background and dark text, Medium’s default theme, to contrast with the first image in this article.
This article without Chrome’s “Auto Dark Mode” flag enabled.

--

--