How to modify the colours of GTK-2 themes (at least)

Here is where you can post tips and tricks to share with other users of MX. Do not ask for help in this Forum.
Post Reply
Message
Author
User avatar
handy
Posts: 611
Joined: Mon Apr 23, 2018 2:00 pm

How to modify the colours of GTK-2 themes (at least)

#1 Post by handy »

Note: Please let me know if there are any problems with the following:

Introduction

Something you may not be aware of, is that you can modify the '''gtkrc''' to relatively easily (though not necessarily quickly) change the colours of most if not all of your GTK-2 (sometimes GTK-3) engined themes.

Where is this gtkrc file

The gtkrc file resides nested inside of the GTK-2 theme(s) that you use:

These can be found in different locations depending on the distro that you are using (or even how long the distro you are using has been installed - which can be years on rolling release distros). It seems that the powers that be upstream, sometimes make decisions that effect multiple distros downstream which can cause locations of certain packages to change.

Anyway, in antiX/MX the themes are kept in /usr/share/themes you will find quite a number of them in there.

Depending on the DE/WM that you are using, there will be a Control Panel of some description. I use Openbox, so I have the Openbox Configuration Manager (obconf) & the Customize Look and Feel (LXAppearance) tools to manage the front end of the Openbox WM.

When you have identified the theme that you want to edit, copy it one way or another into the ~/.themes directory. This directory likely won't exist, so you will need to create it. Don't forget the "." at the beginning of its name, as it likes to remain hidden.

Once you have done that you should have what looks something like the following:

~/.themes/<theme.name.directory>/<gtk-2.0/gtkrc

So the above on my machine is literally the following:

~/.themes/Aero/gtk-2.0/gtkrc

It is quite common to see more than one GTK+ engine directory listed inside of your theme (as well as sometimes other directory name/files as well. This how-to is focused on the gtk-2.0/gtkrc file.

How are the colours written into the gtkrc?

In the '''gtkrc''' file, the colours are identified in hexadecimal (hex), like so:

Code: Select all

  fg[NORMAL]        = #bcbcbc        # Main Menu TEXT colour
  fg[PRELIGHT]      = #b1b1b1        # slightly darker than main text   
  fg[ACTIVE]        = #d8d8d8        # lighter again than above   
  fg[SELECTED]      = #000000        # black was white - #ffffff
  fg[INSENSITIVE]   = #757f90        # Inactive menu entries & inactive highlight)
   
  bg[NORMAL]        = #3E3E3E        # Main Menu BACKGROUND colour - was #424242
  bg[PRELIGHT]      = #5058a0        # active highlight
  bg[ACTIVE]        = #2b2b2b        # darker secondary b'ground - rarely used - where (Firefox scroll bar)??
  bg[SELECTED]      = #5058a0        # active highlight - was -> #5058a0
  bg[INSENSITIVE]   = #575757        # lighter minor background     
 
  text[NORMAL]      = #ABABAB        # Main Text, including fields
  text[PRELIGHT]    = #ABABAB        #   "    "       "       "   
  text[ACTIVE]      = #ababab        #   "    "       "       " 
  text[SELECTED]    = #ababab        #   "    "       "       " 
  text[INSENSITIVE] = #757f90        # inactive highlight - was #6F6F6F
 
  base[NORMAL]      = #2b2b2b        # darker - secondary background colour
  base[PRELIGHT]    = #5058a0        # active highlight & menu entries
  base[ACTIVE]      = #757f90        # inactive highlight
  base[SELECTED]    = #5058a0        # active highlight
  base[INSENSITIVE] = #575757        # lighter minor background
Not all theme creators will use the same format, but you see a hex number in the following format - #50f94c know that it is a colour.

Also, the above is from my modified Aero theme. I added all of the comments to the right of the hex colours to make my life easier for whenever I come back & have another tweak of the colours. (There is only so much of this stuff I can take. You may have more tolerance for it than I...?)

Use GColor2 to easily handle this hex colour stuff

If gcolor2 isn't installed on your machine, then grab it from the repos, or for a more featured interface you may want to install Agave which brings some other colour scheme design benefits with it - your choice. GColor2 makes pretty easy work of playing with colours in hex. Any colour that you choose from its colour wheel is identified in hex plus, a real lifesaving bonus is that you can use the GColor2 eyedropper cursor to select any colour on your desktop & GColor2 will give you its hex name. Very cool indeed.

So GColor2 is the key to being able to identify what a colour on your desktop is called in hex & matching it up to the one in your gtkrc so you can then change it to the colour that you have created/identified in hex.

Note: Expect to find slight variations between
the hex identity found via GColor2 of a colour
in your unmodified desktop theme & the same
colour's identity written in the gtkrc file. I
think that this is caused by variations in the
GPU/display screen settings & therefore colour
output between what we are using & what the
creator of the theme was using. So we have to
work around that, which isn't too hard.

A colour I want to change isn't listed in the gtkrc

I've only used the above method to modify a theme to suit my eyes better. The Aero theme (quite modified these days) that I use has some 3d elements incorporated into it. Colours seem to be attached with some of these elements that are not listed in gtkrc file anywhere. Fortunately in my case this doesn't cause too much trouble, though I would like to change those colours, I don't know how to (I learned this lot by trial & error).

It isn't hard, & it gets easier...

If the theme that you use has comments identifying the colours you will save yourself the time spent identifying them & adding the comments yourself. Which it should go without saying, is obviously a very good idea.

Once you have all of the colours identified in comments it is just a matter of replacing the previous colour with your new choice - I usually leave a copy of the previous colour's hex in the comment, for just in case. Saving the gtkrc file & logging out/in of your DE/WM environment so you can see how it looks. You can see how this isn't technically hard, but it most certainly can, before you know it, eat many hours...
1_MSI: MAG B560 TORP', i5, RAM 16GB, GTX 1070 Ti 12GB, M2 238GB + USB, MX-23 Fb to Openbox
2_Lenovo: Ideapad 520S, i5, RAM 8GB, GPU i620, HDD 1TB, MX-21 - Openbox
3_Clevo: P150SM-A, i7, RAM 16GB, nVidia 8600, 2x 1TB HDD & M.2 256 GB, MX-21 - Openbox

User avatar
asqwerth
Developer
Posts: 7226
Joined: Sun May 27, 2007 5:37 am

Re: How to modify the colours of GTK-2 themes (at least)

#2 Post by asqwerth »

Your descriptions/comments on the right are very helpful for identifying the element being colourised.

As a further comment, I use geany as my text editor because it has a built-in colour picker, eyedropper and all.
Desktop: Intel i5-4460, 16GB RAM, Intel integrated graphics
Clevo N130WU-based Ultrabook: Intel i7-8550U (Kaby Lake R), 16GB RAM, Intel integrated graphics (UEFI)
ASUS X42D laptop: AMD Phenom II, 6GB RAM, Mobility Radeon HD 5400

User avatar
handy
Posts: 611
Joined: Mon Apr 23, 2018 2:00 pm

Re: How to modify the colours of GTK-2 themes (at least)

#3 Post by handy »

@asqwerth, wow! I didn't know that about Geany. That's fantastic.

Thanks for posting that important info' man. :number1:
1_MSI: MAG B560 TORP', i5, RAM 16GB, GTX 1070 Ti 12GB, M2 238GB + USB, MX-23 Fb to Openbox
2_Lenovo: Ideapad 520S, i5, RAM 8GB, GPU i620, HDD 1TB, MX-21 - Openbox
3_Clevo: P150SM-A, i7, RAM 16GB, nVidia 8600, 2x 1TB HDD & M.2 256 GB, MX-21 - Openbox

Post Reply

Return to “Tips & Tricks by users”