With the rising adoption of OLED smartphone displays, dark mode is getting popular across various platforms. Android Q brought a native dark mode that has got many developers to dabble with the native dark mode in their apps. Google has always kept adding individual toggles for dark modes in many of its apps, which includes Google Search, Photos, Keep, Files, and many more. Meanwhile, there were several attempts made to render websites in dark mode on Google Chrome, but due to the wider ambit of UI elements across the web, this has taken longer as compared to apps. So in this article, we will be going to lean How To Enable Google Chrome’s Forced Dark For Web Pages.
Back in April, a chrome flag was added by Google to enable a dark mode in the beta version of the browser. It worked by inverting colors throughout the user interface of Chrome version 74. Since chrome 77 has been updated, the dark mode has got noticeably better with the additional exclusion of images from being inverted in the dark-mode. But now, a new chrome flag has replaced the earlier dark-modes with a full-fledged option to force dark-mode across all websites. This option has enabled a background on all sites without reverting colors or ripping the legibility of images.
How To Enable Google Chrome’s Forced Dark For Web Pages
1. Download Chrome Canary, the under-development version of the browser which is updated every day with new and experimental features.
2. After entering Chrome://flags in the address bar, you’ll find Chrome flags or toggles for experimental features in Chrome.
3. Look for Force Dark Mode for Web Contents in the search bar on the page.
4. Tap on the drop-down menu with Default as the selected option and set it to Enabled. The option “Enabled with selective inversion of non-image elements” has worked the best in my case on Android.
5. You will be prompted to Relaunch the browser. Tap on Relaunch to see the changes that have taken place.
It will change the background of the webpage to black and the text white while the rest of the colored elements will remain intact. As you can see above, all the colors except the background and the text have not changed.
To invert the colors of UI elements, you will have to choose the color profiles from HSL and CIELAB through which the colors will be inverted.
The feature is has proved to be competitive to all the platforms, including Android, Windows, Mac, Linux, and ChromeOS. For me, the feature seems to be stable and consistent on Android as well as a Mac. I hope this is moved to Chrome’s dev channel soon.
For more tutorials visit our How to section.