Google Chrome’s forced dark mode for web pages is coming to all platforms
With the rising adoption of OLED smartphone displays, dark modes are gaining popularity across various platforms. Android Q brings a native dark mode and this has got many developers to dabble with native dark modes in their apps. Google itself has been adding individual toggles for dark modes in many of its apps including Google Search, Photos, Keep, Files, and many others. Meanwhile, there have been several attempts to render websites in dark mode on Google Chrome and due to the wider ambit of UI elements across the web, this seemed to have been taking longer compared to apps.
Back in April, Google added a Chrome flag to enable a dark mode in the beta version of the browser. This actually worked by simply inverting colors throughout the user interface of Chrome version 74. Eventually, with the update to Chrome 77, the dark mode got noticeably better with the additional exclusion of images from being inverted in the dark mode. But now, there’s a new Chrome flag that replaces earlier dark modes with a full-fledged option to force dark mode across all websites. This option enables a background on all websites without reverting colors or ripping the legibility of images.
How to enable forced dark mode for web pages in Google Chrome
- Download Chrome Canary, the under-development version of the browser which gets updated every day with new and experimental features.
- Enter chrome://flags in the address bar. Here, you’ll find Chrome flags or toggles for experimental features in Chrome.
- In the search bar on the page, look for Force Dark Mode for Web Contents
- Tap on the drop-down menu with Default as the selected option and set it to Enabled. I find the option “Enabled with selective inversion of non-image elements” working the best in my case on Android.
- You will be prompted to Relaunch the browser. Tap on Relaunch to see the changes applied.
This is most likely to change the background of the webpage to black and the text white while keeping the rest of the colored elements intact. As you can see above, all the colors except the background and the text remain unchanged.
If you wish to invert the colors of UI elements, you can also choose the color profiles from HSL and CIELAB based on which the color inversion will occur.
The feature is comping to all platforms including Android, Windows, Mac, Linux, and ChromeOS. For me, the feature appears to be stable and consistent on Android as well as a Mac, and I hope this is moved to Chrome’s dev channel soon.