Chrome dark mode linux

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:

Dark mode in Chrome 75

  • 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

Use Classic, not GTK+

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.

Читайте также:  Linux red hat firewall

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:

  1. Copies Chrome’s system shortcut to the user shortcut
  2. 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

Original

Dark Reader modified

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 
  1. 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.

Читайте также:  Rust lang linux install

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.

Enabling force Dark mode in ubuntu

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

Go to settings in Google chrome

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

Setting appearance to GTK+ in Ubuntu

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.

Источник

Оцените статью
Adblock
detector