LinuxQuestions.org - Editing GTK3 themes and using multiple versions at the same time

I'm not fond of the default Adwaita theme for GTK, particularly the colour scheme. So I thought I'd change it; I've been making my own customised themes for different widget sets and window managers since 2000 at least: not necessarily production quality, but good enough for my use.

Anyway, editing for GTK2 was fairly straight-forward enough: re-colour the widgets in Gimp and modify the gtkrc file.

Eventually, I also managed to find out how to do so for GTK3, having searched for, and found, various articles dealing with different versions. It was necessary to edit other files and process them to become CSS. Slightly more tricky.

So here's how I did it; hopefully it may benefit someone else. I've been using Slack 14.2 (stable, not current) which comes with XFCE 14.12.

Let's say we copy the default Adwaita theme from /usr/share/themes into our own $HOME/.themes directory, and edit index.theme changing the theme name to something different.

We'll pass over GTK2 just now; there are ample resources on how to modify themes for that.

Descending into the gtk-3.0 directory, we find a single file, gtk.css which isn't terribly helpful. There's nothing here to edit. Adwaita is baked into GTK3, so changing it is going to require the source.

We're on GTK 3.18.9, which you can get from the main GTK site or the Slack source directory. I unpacked it in a temporary location and extracted the contents of the folder gtk/theme/Adwaita into the directory gtk-3.0 of my soon-to-be customised theme.

The gtk.css file has been overwritten but its contents still tell GTK to use the inbuilt version of the theme.

Code:

@import url("resource:///org/gtk/libgtk/theme/Adwaita/gtk-contained.css");

Again, following instructions found after a bit of searching, I discovered that that line needs to be changed (below):

Code:

@import url("gtk-contained.css");

Now, it points to the version of that file in the current directory.

So far, so good.

Now we can start editing, the colours, anyway. The relevant files are those with the .scss extension--there are numerous warnings not to try and editing the CSS files directory.

_colors.scss contains the main colour definitions for the theme. So I modified the base, foreground, background colours, etc. as I wanted.

Now to convert it to CSS. There's a script in that folder to do that -- parse-sass.sh. Running it, I got an error:

Code:

./parse-sass.sh: line 3: bundle: command not found

After more digging, I found we needed another package, fortunately to be found on the slackbuilds.org site, rubygem-bundler". I'm not familiar with Ruby, but this was straightforward enough to install. (Note: the current bundler version on Slackbuilds is 1.15, but at the time I did this, it was 1.14.6.)

So, running ./parse-sass.sh again we get another error

Code:

bundler: command not found: sass

Install missing gem executables with `bundle install`

Heh. Another package to install from Slackbuilds: bundler-sass. This version 3.4.22.

Finally was able to process the scss files and test the theme.

Fast forward I few months. I'd started developing some programs in Ada, and also wanted to do some GUI work. The gtkada toolkit seemed to be most obvious choice.

I looked at building from source, and after a couple of days gave that up as a bad job, given the nature of its circular dependencies. I might gave it a go again someday.

Fortunately, the binary version distributed installed without trouble.

The only problem was the theme, as the most recent version of gtkada is built against GTK 3.14.

If I used the default Adwaita theme, everything looked file. But when I changed to my customised version, some elements wouldn't render correctly, and I got numerous errors, similar to this:

Code:

Gtk-WARNING **: Theme parsing error: gtk-contained.css:4149:25: Missing name of pseudo-class

So, I needed to find out if it were possible to have two different versions of my theme -- one for the default GTK 3.18 apps which came with Slack 14.2, and another for anything built with gtkada which used GTK 3.14.

And, once again, after more digging, and lots more trial and error, I found out I could, at least for those versions.

Now, as I understand it newer versions of the GTK3 themes can have their own subfolder, so in addition to the standard gtk-2.0, gtk-3.0 directories we can also have gtk-3.18, gtk-3.20, etc.

I tried this once I found it out, although working in reverse, and didn't get the result I wanted straightaway.

I attempted to create a new directory for the gtkada apps based on GTK 3.14, therefore calling it gtk-3.14. (I'd downloaded the source for 3.14 [to be precise 3.14.15], unpacking the Adwaita folder as before [from the downloaded source it's in a different subdirectory gtk/resources/theme/Adwaita].) I made my custom modifications to the colours.

But it didn't work.

I tried renaming it/creating a symbolic link to gtk-3.18 after seeing someone's suggestion on another forum.

It didn't work.

I tried moving it into the main gtk-3.0 folder, i.e. gtk-3.0/gtk-3.14.

That didn't work either.

And then I did it the other way around.

I put my customized colour scheme (I had made it slightly different so I would know which was which) for GTK 3.14 (gtkada apps) into the gtk-3.0 directory.

I put my customized colour scheme for GTK 3.18 (used by the default Slack 14.2 apps) into its own folder gtk-3.18.

And it worked.

Finally, I could create a theme which would be consistent across GTK2, and more than one version of GTK3 apps on the same system, ending up with the directory hierarchy $HOME/.themes/mytheme/{gtk-2.0,gtk-3.0,gtk-3.18} .

Though what happens when we have a new Slackware release I can only guess at for now.