HOWTO Customize GTK themes

[machinebacon]

This is just a short write-up about how to change gtk-2.x themes. Note that it does not work on qt and KDE.

Needed packages:
- gtk2-engines (optionally gtk2-engines-*)
- lxappearance or gtk-chtheme
- gcolor2 + $EDITOR (leafpad, nano, emacs, vi, ...) OR geany

Lazy people jump to the short version

Long version:
1) Firstly, choose a theme using the GTK theme chooser application. We need the name of the theme we want to customize. In this example, I take the 'Mist' theme.

2) Create a copy of the theme, lets call it BarbieQ; and place it either as normal user into ~/.themes/BarbieQ or as root into /usr/share/themes/BarbieQ

Code: Select all

sudo mkdir /usr/share/themes/BarbieQ
sudo cp -R /usr/share/themes/Mist/* /usr/share/themes/BarbieQ

3) Open up your editor (I'll use Leafpad, so I also open up the color picker gcolor2) and load the file /usr/share/themes/BarbieQ/gtk-2.0/gtkrc

Code: Select all

sudo leafpad /usr/share/themes/BarbieQ/gtk-2.0/gtkrc

4) Now open your color picker dialog, and pick a color you want to use as the background ("bg_color:") for your GTK windows. The number, for example #2D2D2D you place into the gtkrc file. We replace, in our example, the #eaeaea of Mist with the new value. The head of the line looks like this:

Code: Select all

gtk-color-scheme = "bg_color:#2D2D2D\ [...etc...]

5) For fun, save the file, open up LXappearance and select the "BarbieQ" entry. Click Apply. Quite dark, especially the text on the window is low on contrast.

6) We do the same as in step 4) for the next values. nfg is the normal foreground colour of the window, so let's change it to something bright, like #DDDDDD. The line now looks like this:

Code: Select all

gtk-color-scheme = 
"bg_color:#2d2d2d\nfg_color:#DDDDDD\  [...etc...]

7) Save and change to LXappearance, click on any other theme, then again on "BarbieQ". Looks neat.

8) The nbase color is the color of the background in text fields. I leave it white now. The ntext is the text color for text fields. Be sure that these two values are 'far' from each other in contrast, to make reading easier.

Code: Select all

gtk-color-scheme =  
"bg_color:#2d2d2d\nfg_color:#DDDDDD\nbase_color:#fff\ntext_color:#000\  [...etc...]

9) nselected_fg_color: stands for the color of text in a selection. I leave it black for now. Let's get to the next and last entry:

10) Finally, we set the most important color, the selection color. it's blue now, which is quite low contrast on a dark grey background. Let's make it light grey: #9A9A9A

Code: Select all

gtk-color-scheme =  
"bg_color:#2d2d2d\nfg_color:#DDDDDD\nbase_color:#fff
\ntext_color:#000\nselected_fg_color:#fff\nselected_bg_color:#9A9A9A"

11) Save and pick the new theme in LXappearance.



Short version:

Code: Select all

sudo apt-get install gtk-theme-config

But this is much less fun :D Seriously, do it manually, you will also learn to use an editor ;)

So this was a very rough and quick HOWTO, not detailing the stuff like shading and contrasting inside of the theme.

Also, this is not applicable 1:1 for Openbox window decorations and the root menu. I'll cover that on another occasion.

Hope it helps some who are new to Linux.

[dkeg]

great share Jules. Good to know I've been doing the manly way this whole time. :D