Custom theme problem

Hello. I’m a new user of Ubuntu Mate 16.04 LTS and have hit one small problem – not sure if it is a bug or just my missing something. I have created some custom themes, using the Mate Appearance tool. These work fine except that they only partly work in Firefox and Thunderbird. The windows in both adopt the custom theme colours, but other elements, ie toolbars, pop-up boxes such as Preferences and Address Book, and (in the case of Thunderbird) the panels, do not. These elements do seem to adopt the custom controls style: it is only the colours that are affected.
This only affects my custom themes. It does not affect the pre-installed themes which work fully in all the elements of Firefox and Thunderbird.
The problem also affects some other applications eg Chromium browser and some pop-up tools such as Mate Tweak and Printing. But Caja works fine; so does Libre Office (except the panels of the opening page).
Advice would be welcome.

Hi, and welcome! Kinda new here myself so I won’t be great at explaining the why and how, but there are Arc and Numix themes made especially for Firefox and Thunderbird so they blend in better, so I figure that is just the way things are.

Sure there will be some more (proper) help on the way soon.

When you use Appearance > Customize to modify colors then only GTK 2 applications are affected. All those applications you mentioned are GTK 3 and that’s why they don’t pick up your changes. I think Libre Office uses something called VCL to adapt to native look.

If you want consistent look across all applications you have to modify /usr/share/themes/“your theme”/gtk-3.0/gtk.css

This is what Traditional Ok looks like in MATE 1.18 (I’m on Windows so I don’t remember the exact version)


  • This section can be modified to create color variants of the theme. *


  • color scheme *

@define-color theme_base_color #ffffff;

@define-color theme_bg_color #edeceb;
@define-color theme_fg_color #000000;

@define-color theme_selected_bg_color #86abd9;
@define-color theme_selected_fg_color #ffffff;

@define-color theme_tooltip_bg_color #f5f5b5;
@define-color theme_tooltip_fg_color #000000;

@define-color theme_text_color #1a1a1a;

@define-color link_color #0000ee;
@define-color visited_link_color #551a8b;


  • core colors *

/* Core colors are only used in the current file, as bases for other
color declarations. */

@define-color core_color_a #a4c2e8; /* Core color for blue widgets in TraditionalOK. /
@define-color core_color_b #edeceb; /
Core color for gray widgets in TraditionalOK. */


  • End of configuration for color variants. *

You have to edit the colors under the heading * color scheme *.

It was some time ago I did this so I don’t remember exactly which color defines what, but it’s not too complicated to figure out through trial and error. Hope this helps.

1 Like

Thanks for the advice. I’m no expert, so I usually stick to graphic tools like the Appearance tool. The pre-installed themes work, so I had assumed that customised versions of those themes would work too. I can see that customising creates a file in the user’s .themes directory. This specifies a pre-installed theme to use plus a ‘GtkColorScheme’ entry that lists the chosen custom colours (which presumably tells the system to override the theme colours). The selected theme already includes a gtk-3.0/gtk.css file, but this doesn’t seem to be enough. If I understand you correctly the only way to get round it would be to create a complete new theme folder with a css file modified as you advise in the usr/share/themes directory??
But I see that Mate 1.18 installed in Ubuntu 17.04 is now GTK3 only, so maybe that has solved the problem??

I’m still on Windows for various reasons, one of them being Skype, which is less than stellar on Linux. I’ll try to answer because I have the theme folders on a Windows partition so no problem.

The reason I pointed you to /usr/share/themes folder is that this is the only way to have a consistent look when using Synaptic, Gparted and other applications that require root privilege. If you modify files in your .themes folder in your home directory then root applications won’t be affected.

The best way is to leave the original theme intact and make a copy of the whole theme folder (in usr/share/themes). Rename the copied folder (come up with a new name for the theme you want to create), then open the index.theme file that is within the folder. Here is the index.theme file for a theme called Tribute (it’s Traditional Ok with two lines changed):

[Desktop Entry]
Comment=Port of Clearlooks-Phenix
Comment[am]=Port of ለ ንፁህ መመልከቻ-Phenix
Comment[be]=Адаптацыя Clearlooks-Phenix
Comment[bg]=Адаптация на Clearlooks-Phenix тема
Comment[ca]=Adaptació de Clearlooks-Phenix
Comment[ca@valencia]=Adaptació de Clearlooks-Phenix
Comment[cs]=Port Clearlooks-Phenix
Comment[da]=Port af Clearlooks-Phenix
Comment[de]=Übertragung von Clearlooks-Phenix
Comment[el]=Θύρα του Clearlooks-Phenix
Comment[en_AU]=Port of Clearlooks-Phenix
Comment[en_GB]=Port of Clearlooks-Phenix
Comment[es]=Porte de Clearlooks-Phenix
Comment[es_CO]=Portado de Clearlooks-Phenix
Comment[fr]=Adaptation de Clearlooks-Phenix
Comment[gl]=Versión de Clearlooks-Phenix
Comment[hr]=Prenesena tema Clearlooks-Phenix
Comment[hu]=A Clearlooks-Phenix asztaltéma egyik változata
Comment[id]=Porting dari Clearlooks-Phenix
Comment[it]=Porting di Clearlooks-Phenix
Comment[kk]=Clearlooks-Phenix темасының нұсқасы
Comment[ko]=클리어룩스-피닉스 계열
Comment[lt]=Perkelta Clearlooks-Phenix
Comment[ms]=Port Clearlooks-Phenix
Comment[nb]=Port av Clearlooks-Phenix
Comment[nl]=Port of Clearlooks-Phenix
Comment[oc]=Adaptacion de Clearlooks-Phenix
Comment[pl]=Port motywu Clearlooks-Phenix
Comment[pt]=Versão MATE do tema Clearlooks-Phenix
Comment[pt_BR]=Porte do Clearlooks-Phenix
Comment[ro]=Portul de Clearlooks-Phenix
Comment[ru]=Порт Clearlooks-Phenix
Comment[sk]=Port témy Clearlooks-Phenix
Comment[sl]=Priredba Clearlooks-Phenix teme
Comment[sr]=Изведба Феникса чистог изгледа
Comment[sv]=Portering av Clearlooks-Phenix
Comment[tr]=Clearlooks-Phenix uyarlaması
Comment[uk]=Порт Clearlooks-Phenix
Comment[zh_CN]=Clearlooks-Phenix 的移植版本
Comment[zh_TW]=Clearlooks-Phenix 的移植版本


I have marked the two lines I changed in bold.

When I open Appearance I now have a new theme called Tribute installed. This way you don’t have to worry that an update to Traditional Ok will eradicate your changes. Your new theme will be unaffected by all updates as long as you stick to a LTS release.

MATE is GTK 3 only now. It doesn’t solve the problem, because you can no longer make color changes in Appearance (functionality has been removed). That’s part of the reason I showed you this, because this is how you have to do it in the future. So, first copy a theme that you like and rename folder and adjust index.theme file. Then modify gtk.css as in the post above. And if you want a complete theme without Appearance tweaks also modify gtkrc file in gtk-2.0 folder.

It’s not hard, but yes it would be easier with a GUI. No wonder I’m a GTK 2 die-hard. :wink:

mrtribute / Very clear and helpful advice. Thank you. I now have a working custom theme in the usr/share/themes directory (I think you also have to change the GTK2 gtkrc file if you are using 16.04LTS with its mix of GTK2 and GTK3).

Glad to hear it worked out for you. :+1: GTK 2 properties can be changed in the gtkrc file or (since you are using 16.04) you can adjust the GTK 2 properties of your custom theme in Appearance > Customize > Colors.

If you upgrade to a newer version of Ubuntu MATE the latter option will no longer be there, but there might still be some GTK 2 applications in the mix so then your only option is to edit the gtkrc file. I’m using Pale Moon browser which still is GTK 2, but most applications are GTK 3 by now.

One thing to be aware of is that you can’t copy your custom theme and drop it into a newer version of Ubuntu MATE because GTK 3 themeing changes between releases. This is the curse of GTK 3, but now you are good as long as you use 16.04.