- Enable dark mode on chrome’s internal pages
- 8 Answers 8
- Works with GTK+
- Glossary
- How to Enable Dark Mode in Chrome on Ubuntu (No Code, Apps, Themes)
- Enable Dark Mode in Chrome on Ubuntu
- Step 1
- Step 2
- Step 3
- All web pages will be automatically rendered by Chrome using dark mode
- The good and the bad
- Do You Own a Website? You Should Implement a Dark Mode Version Soon
- That’s a Wrap
- About Radu
- How to Enable Dark Mode in Chrome on Ubuntu(No Code, Apps, Themes).
- Enable Dark Mode in Chrome on Ubuntu
- Step 1.
- Step 2.
- Step 3
- Step 4
Enable dark mode on chrome’s internal pages
I have dark mode working on chrome’s internal pages in Windows 10. Is it not implemented in the Ubuntu version? I’m using chrome version 75.0. My theme is Adwaita-dark .
8 Answers 8
Note: as of chrome Version 78.0.3904.87 (Official Build) (64-bit) you can easliy turn chrome’s internal pages to dark mode, its under chrome flags by default
- run chrome://flags in the url
- search for dark and you should see this option Force Dark Mode for Web Contents enable it and relaunch chrome.
for those who don’t have the above option under flags, to enable dark mode on Ubuntu, you need to edit the google-chrome.desktop file.
If you use GNOME desktop, run the command below which opens up the required file in editable format. If not, open the file in a text editor of your choice.
sudo -H gedit /usr/share/applications/google-chrome.desktop
All you have to do is search for two lines and add a dark mode flag in front of them.
Exec=/usr/bin/google-chrome-stable %U
Exec=/usr/bin/google-chrome-stable %U --force-dark-mode
Exec=/usr/bin/google-chrome-stable
Exec=/usr/bin/google-chrome-stable --force-dark-mode
Once you have done these changes, try restarting chrome. If that doesn’t work, rebooting your Ubuntu system should do the job.
For me rebooting my Ubuntu 18.04 system worked. Also note that if you update the chrome app, the changes will be gone, since the file will be overwritten and you will have to redo the steps.
Instead of modifying /usr/share/applications/google-chrome.desktop , the file can be copied into ~/.local/share/applications/google-chrome.desktop and modified without root access. This file will take precedence over the global desktop file.
Works on Lubuntu 20_04. The font is now different than before and less readable. But I am happy because I heard that this mode is fair better for my eyes.
On my system, I have the dark mode active:
- launch the browser using google-chrome-stable —enable-features=WebUIDarkMode —force-dark-mode and
- set the browser to use the Classic option rather than GTK+ as shown in the image below. Doing so makes the choice your GTK theme irrelevant:
Use Classic, not GTK+ in chrome://settings/?search=themes
Unfortunately, not all internal pages are themed. Opening many of the urls in chrome://chrome-urls/ will confirm that. It’s not clear if or when they’ll ever get round to that!
For those who don’t want to launch Chrome from the terminal every time, you can edit the .desktop file (sudo vim /usr/share/applications/google-chrome.desktop) and add the «—enable-features=WebUIDarkMode —force-dark-mode» switches to the end of every «Exec=» line. That will make it launch in dark mode by default.
in the search bar, and in the opened page, search for ‘dark’ and find
Force Dark Mode for Web Contents
Enable this thing, and you’re done.
Now you’ve got the dark mode.
This is not the system dark mode, this only emulates dark mode by inverting colors of web pages. It can break readability of some websites.
This is the only solution I’ve found that makes the Chrome Web Store and the Settings backgrounds both dark. For normal web pages you can use a plugin like Dark Reader. Works in Chromium 110 / ungoogled version.
I made a script for it, just run:
bash -c "$(curl -fsSL "https://raw.githubusercontent.com/felipecassiors/dotfiles/master/scripts/enable_chrome_dark_mode.sh")"
We will: - Create the file '/home/felipesantos/.local/share/applications/google-chrome.desktop' Do you confirm? (Yy)y All done. Please make sure you fully close Google Chrome before opening a new instance. To uninstall, run: $ rm -f /home/felipesantos/.local/share/applications/google-chrome.desktop
It currently uses the method described by DK Bose’s answer, but I might change in the future if it stops working. Basically, it:
- Copies Chrome’s system shortcut to the user shortcut
- Edits the options on the executable for you
There is no need to change Chrome’s theme in my tests tough.
I would highly recommend installing Dark Reader which intelligently scans the CSS of the page to keep background dark and adjust foreground colors accordingly. Here is a snippet showing dark reader in action
Original
Dark reader
@Jeanba for one, extensions can’t modify internal and protected pages, so Chromium settings pages will remain light.
note also that while this «intelligently scans pages», it’s not intelligent to detect when a page is already dark, making the majority of dark themes provided by the sites themselves useless
@somebody not true. You might have had issue with one or two sites. But the vast majority of sites that provide dark themes are rendered fine. It keeps them dark and legible. Thats what matters.
Works with GTK+
cp /usr/share/applications/google-chrome.desktop ~/.local/share/applications/google-chrome.desktop
gedit ~/.local/share/applications/google-chrome.desktop
- Search for Exec and append —enable-features=WebUIDarkMode —force-dark-mode to the end of the line each time it appears (about 3 times)
# Before Exec=/usr/bin/google-chrome-stable %U # After Exec=/usr/bin/google-chrome-stable %U --enable-features=WebUIDarkMode --force-dark-mode
Glossary
.desktop file: A shortcut to an application that will appear when searching applications. Contains config information on how the shortcut will look and how to launch the application. Any exectable can have a GUI shortcut by adding a .desktop file to ~/.local/share/applications/
Exec: The actual CLI command that launchs the application executable. Command line options can be added here.
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
- 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.
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.
About Radu
I’ve been working online, from home, for over 9 years. I learned a lot of different stuff related to websites. My main expertise is WordPress, but for some time, I started focusing more on web development.
How to Enable Dark Mode in Chrome on Ubuntu(No Code, Apps, Themes).
If you set Windows to use dark mode, Chrome will also switch to dark mode. Unfortunately, setting Ubuntu to dark mode will not automatically set Chrome as well. It’s not that straightforward, but it’s still pretty simple.
Enable Dark Mode in Chrome on Ubuntu
Step 1.
Step 2.
- 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 and tabs are still in light mode. That’s because only web contents/internal pages are being rendered in dark mode, not the whole browser.
Step 3
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 4
Select Appearance and click on the Use GTK+ button, in the Theme section.
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.
That’s a Wrap!
If some info is outdated or incorrect, or you have anything to add, ask ping me via Twitter or add it in a comment section.