With the rising adoption of OLED smartphone displays, dark modes are getting popular across various platforms. Android Q brought a native dark-mode that has got many developers to dabble with native dark-modes 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.
Back in April, chrome flag was added by Google to enable a dark mode in the beta version of the browser. It worked by inverting colours 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 colours 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 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 coloured elements will remain intact. As you can see above, all the colours except the background and the text have not changed.
To invert the colours of UI elements, you will have to choose the colour profiles from HSL and CIELAB through which the colours 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.