Google Chrome’s forced dark mode for web pages is coming to all platforms

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

  1. Download Chrome Canary, the under-development version of the browser which gets updated every day with new and experimental features.
  2. Enter chrome://flags in the address bar. Here, you’ll find Chrome flags or toggles for experimental features in Chrome.
  3. In the search bar on the page, look for Force Dark Mode for Web Contents
  4. 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.
  5. 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.

Via: Techdows

Chrome Canary (Unstable)
Developer: Google LLC
Price: Free

About author

Tushar Mehta
Tushar Mehta

I am a Senior Editor at XDA. I have been reviewing gadgets for over five years and gained experience by working for prominent tech publications in India before joining XDA. I enjoy fiddling with all smart objects and my love for software customization dates back to the Symbian S60 days. I like to devote my spare time idealizing the romantic union of technology and philosophy or spacing out on Pink Floyd. You may email me at [email protected]

We are reader supported. External links may earn us a commission.