How to set your browser to Dark Mode

Google Maps tips & tricks
,
1

Cover photo showing an illustration of a person sat in a dark room using their mobile phone. The only illumination is coming from the phone. There is a text "Dark Mode: How-to Guide For Your Browser" set over the image
Cover photo showing an illustration of a person sat in a dark room using their mobile phone. The only illumination is coming from the phone. There is a text "Dark Mode: How-to Guide For Your Browser" set over the image1280×720 86.9 KB

Update (11 Dec): I’ve updated this post quite considerably with different solutions for Chrome, Edge and Firefox browsers.

I hope you’re all enjoying the newly redesigned Connect! It’s great but it can be a bit too bright especially if you’re sat in a dark room. So, here’s a quick guide if you want to set Dark Mode.

:pushpin: This solution is for the Chrome browser (desktop and mobile). It will apply to all websites that you browse to and is not site specific!

If you’re on the desktop, you should be able to find popular browser extensions such as Dark Reader that you can install and enable. The Dark Reader extension can apply Dark Mode to all or specific sites, and you can toggle it ON/OFF quite easily. However, Chrome extensions are not supported on the mobile version.

So, this trick below will work on both mobile and desktop Chrome and it does not involve installing any extensions. I’ve written the instructions below based on a Chrome mobile experience on an Android device but it should be similar for the desktop version as well:

  1. Launch the Chrome browser.

  2. In the address bar, enter this text chrome://flags and tap Enter. It should then load up a special page with a list of flags that you can enable/disable.

:information_source: Chrome flags are “a collection of experimental settings within the Google Chrome browser that allow users to enable or disable features that are not yet officially released or are hidden by default”. You can read more about it here.

  1. In the Search Flags search box, type in dark and then tap on Enter to begin searching.

  2. You should see two results: “Auto Dark Mode for Web Contents” and “Darken websites checkbox in themes setting”. By default, both flags would be set to Default.

  3. Under either of the flags, tap on Default and change it to Enabled. It doesn’t matter which flag you choose, it will work when you enable either of them.

  4. You should see a Relaunch button pop up at the bottom of the screen. Tap on it and the new setting will take effect. All your websites that you browse on your Chrome browser will now be set to Dark Mode.

And that’s it!

So, from my personal use, I find that I prefer looking at spreadsheets in Light Mode so I have to go back into the Chrome flags section and disable the flag (set it back to Default) to undo Dark Mode.

And eventually, we should have this Light/Dark Mode feature baked into Chrome properly in future versions which I hope means that I can easily toggle Light/Dark Mode from the overflow (three dots) menu. :crossed_fingers:

:pushpin: This solution is for the Edge browser (desktop). It will apply to all websites that you browse to and is not site specific!

I have only tested this on desktop. If anybody can verify this on the mobile version of Edge, do let me know in the comments! The instructions below are written based on a desktop Edge browser experience:

  1. Launch the Edge browser.

  2. In the address bar, enter this text edge://flags/#enable-force-dark and tap Enter. It should then load up a special page with a list of flags that you can enable/disable, and it should already be focused on the “Auto Dark Mode for Web Contents” flag.

  3. Under the “Auto Dark Mode for Web Contents” flag, tap on Default and change it to Enabled.

  4. You should see a Restart button pop up at the bottom of the screen. Tap on it and the new setting will take effect. All your websites that you browse on your Edge browser will now be set to Dark Mode.

Done :smile: Also, desktop Edge browser also supports extensions so you can install Dark Reader if that’s your preferred method. By the way, the Edge browser is actually based on the Chromium open source project which is what Chrome is built on so that’s why they share a very similar set of features and also share a similar set of extensions.

:pushpin: This solution is for the Firefox browser (desktop and mobile) and involves installing a browser extension.

I did some digging online and tried various methods including changing some preferences/flags in the about:config but the only method that worked involves installing an extension! Thankfully, extensions are supported on mobile Firefox and I would recommend using Dark Reader.

Unfortunately, I tried looking for solutions on the Safari browser and there doesn’t seem to be a way to force dark mode. I have my system (iPad) set to Dark but the Connect website does not support Dark Mode natively.

Anyway, I hope the solutions above will work for you. Do let me know in the comments below if you have a better solution for Firefox or Safari, or any other suggestions. Thanks! And kudos to @Trail_blazer for the Chrome trick

13 Likes
2

Bummer!
I use Microsoft Edge, but will explore the possibility of setting the dark theme.

[UPDATE]
OK, so it was a simple switch under Settings - Appearance - Mode - Dark
But changed nothing in Connect.

It is only the Edge UI elements like the bookmarks bar, address bar, and title bar that appear dark.

Connect pages look normal.

2 Likes
3

Thanks @AdrianLunsong I use dark theme almost everywhere. The excessive use of screen does cause some strain to eye so it’s better to keep the brightness low as much as possible. We have lots of text here on the connect so it’s come handy there however for some image and icons this mode can be little weird as some images looks like negatives and in some cases we may not see some texts so I suggest people use it with pinch of salt and they adapt once familiar it’s should be easy and nice. :+1:t2:

1 Like
4

Ah, yes, this is exactly what I needed! Thanks so much for this tip @AdrianLunsong ! I know a few months ago you shared a tip like this for another browser, but considering I’m on Android I found it hard to leave Chrome :sweat_smile:. I’ve enabled this and so far so good across LGC and some other frequented sites.

1 Like
5

@TusharSuradkar I’ve updated the post with details for the Edge browser. Hope that helps.

6

Thank you for sharing the information @AdrianLunsong

1 Like
7

You’re welcome!

I’m trialling Dark Mode on my computer/mobile but not sure if I really like it because it’s really dark! :sweat_smile: If only there’s a Semi Dark Mode! :rofl:

Certain parts are okay being in Dark Mode but certain things (e.g. emojis) don’t always show up too well with a black background :slightly_frowning_face:

1 Like
8

Ya you are right :sweat_smile: