2

Does anybody by any chance know how to customize the color of the text in Chromium tabs? I know that Chromium loads these colors from the GTK theme that is used. I'm currently using the Arc theme.

I've spent a good few hours now trying to do that myself, editing the gtk.css file in /usr/share/themes/Arc/gtk-3.0, I even went into the source code for Chromium trying to get some clues as to what CSS selector I should use. However, I couldn't get it to change.

Any help with this attempt would be appreciated.

  • Is this Arc theme a compiled theme? Is there something like gtk.gresource and gtk.gresource.xml in the gtk-3.0 folder? – DK Bose Aug 25 '18 at 15:29
3

If you can edit gtk.css in your theme's gtk-3.0 subfolder, the line to edit is this:

@define-color theme_fg_color #aa55ff;

where #aa55ff is the new color.

Unfortunately, other aspects of the browser user interface will also be affected:

  • the text color of your bookmarks bar
  • the text color of items in folders of your bookmarks bar
  • the color of text in the Customize and control ... dropdown
  • the color of the back, forward, and home icons, and maybe more

Lilac tab text

And of course, all other gtk3 applications will be affected as well. If you don't want that to happen, make a copy of the theme with a different name and modify the copy. Then you can use

GTK_THEME=modified-theme-name chromium-browser

to run only chromium-browser with the modified theme.


Edit:

Even though you didn't ask about Firefox, I just like to point out that the Firefox user interface, even after Quantum, is currently far more customizable.

Here's what it looks like before tweaking the tab text color and tab background color:

before

And this is what it looks like after:

after

All I did was to create a userChrome.css file in the folder ~/.mozilla/firefox/profile_name/chrome. This folder doesn't exist by default. You need to create it.

The contents of userChrome.css to get the tab customization shown are:

tab { color: #000010 !important; font-size: 16px !important; font-family: Cousine !important; }
tab [selected] { font-family: Cousine !important; color: #ff00ff !important; font-weight: normal !important; font-size: 16px !important;  background: #444 !important; }

The advantage of tweaking the userChrome.css file is that no other aspects of the browser or other applications are affected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.