How to Enable Dark Mode in Chrome on Ubuntu (No Code, Apps, Themes)

Since I started having vision problems, I began using dark mode wherever possible: browsers, apps, operating systems, and so on.

If you set Windows 10 to dark mode, then Chrome will inherit that preference automatically, and it will set itself to dark mode, too.

And websites that have a dark mode version ready will use the preference set by Chrome. It’s kind of a dark mode chain reaction, which is nice.

So, since I just switched to Ubuntu from Windows 10, I wanted dark mode everywhere there, too.

Unfortunately, setting Ubuntu on dark mode won’t set Chrome as well. Thus, it’s not that straightforward as on Windows 10, and it will work a bit differently, but it’s still simple to set up.

Enable Dark Mode in Chrome on Ubuntu

As I mentioned in the title, I’m using a method that doesn’t involve coding, 3rd party apps (e.g. Gnome Tweak Tools), or themes for Chrome. I don’t like installing 3rd party stuff unless it’s really necessary.

I’m using Ubuntu Desktop 20.10, not the LTS version. Just so you know.

Now, let’s get to the main point.

Step 1

Open Chrome and:

• Type chrome://flags in the address bar;
• Type “dark mode” in the search bar;
• Select Enabled for Force Dark Mode for Web Contents.

You’ll notice that the address bar, tabs, and others are still in light mode. That’s because it only renders web contents/internal pages using dark mode, not the whole browser.

Step 2

To go full dark mode, access Chrome’s settings by clicking on the 3 vertical dots, in the top-right corner, and selecting Settings.

Step 3

Select Appearance and click on the Use GTK+ button, in the Theme section.

As explained by someone in the comments (when they were available), GTK+ is a free and open-source cross-platform widget toolkit for creating graphical user interfaces (GUIs).

You’ll notice that Chrome has gone into full dark mode now, not just the web contents/internal pages.

If you want the scrollbar and form controls to be dark, too, then you can enable the second flag in Chrome - Web Platform Controls Dark Mode (see step 1).

All web pages will be automatically rendered by Chrome using dark mode

The flag that enables the dark mode in Chrome is implemented for all web pages, not just the ones that have a version created especially for the dark mode preference.

Normally, website owners that also want to have a dark mode design, as I do, along with the light one, create additional styles in CSS and use the @media (prefers-color-scheme: dark) feature to activate them only when dark mode is detected in Chrome or other browsers.

The porblem is that if Chrome doesn’t inherit Ubuntu’s Dark mode setting, it also doesn’t make use of @media (prefers-color-scheme: dark) feature. Firefox does, for example.

The good and the bad

So, with that flag enabled in Chrome, it means that every website that doesn’t have its own dark mode version will now have one created automatically by Chrome, using whatever color scheme it thinks it’s best.

As a user, this is good for me - and most of you, I think - because most websites don’t have a dark mode version available.

For the most part, Chrome does a good job at rendering websites in dark mode automatically. As an example, here’s my former blog, which was converted into this one, Radu.link:

As another example, here’s how it rendered my former website.

Not that bad, right?

The problem is that some websites might not have good design practices, or might have some features that prevent Chrome to properly create a dark mode design automatically.

So, some websites might end up looking like this:

This is an SEO blog that I read frequently – Search Engine Roundtable.

You can see from the screenshot that the menu’s contrast is affected and there are several white spaces and sections.

This affects the readability and can be annoying for some of you, or you might think that the website is broken if you forget that you enabled the experimental flag in Chrome.

If this bothers you too much, you might want to search for other methods to enable dark mode in Chrome on Ubuntu. I’m ok with this one for now.

Do You Own a Website? You Should Implement a Dark Mode Version Soon

This dark mode flag for web contents is experimental in Chrome. This means that, at some point, it might go live in every user’s settings.

And if you don’t want Chrome to render your website using dark mode however it sees fit, add your own dark mode version, and it will use that.

Leaving Chrome to do the job for you might also make your website look broken, as you can see from the above screenshot. That’s a scary thought.

That’s a Wrap

I hope that the tutorial was hopeful, and you like this way of enabling dark mode in Chrome on Ubuntu.

If some info is outdated or incorrect, or you have anything to add, say or ask, please contact me via Twitter or email.