Chrome’s Hidden “Auto Dark Mode” Feature

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.

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:

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.
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 without Chrome’s “Auto Dark Mode” flag enabled.

--

--

--

Engineering

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Your Website design Guide: Exactly what You Need To Know for Bristow 74010

5 Tips to Design an Effective Dashboard

Upgrade Your Home Décor with LiveTrends Living Decor

Top 20 Amazing Web Design Inspirations #1

READ/DOWNLOAD$ Fashion Designer’s Handbook for Adobe Illustrator FULL BOOK PDF & FULL AUDIOBOOK

5 visual effects Canva uses to thrill users

Project 1 — News Analysis

The 1st Annual “What Men (Like Me) Want But May Not Know Exist” Gift Guide.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bryan Ricker

Bryan Ricker

Engineering

More from Medium

Let’s make accessibility boring again

Southampton Special Purpose Workshop viewed from the front, a white building with grey shutters.

The Significance of Context in UI/UX

Abstract Image to represent context

Answering Questions About the DoJ Weighing in on Web Accessibility

Graphic with icons representing various people with disabilities.

Accessibility Project: Emory Transportation