Tweaking newer GTK3 themes

The Numix theme is available by installing shimmer-themes from the software center. It is installed by default in Xubuntu.

In 14.04, I was able to modify some aspects of the theme by directly editing files such as usr/share/themes/Numix/gtk-3.0/gtk.css or usr/share/themes/Numix/gtk-3.0/gtk-widgets.css.

Even in 15.10, the solution as described in How to set a custom text highlighting colour could be easily applied.

But in 16.04, the same approach does not seem possible. I looked at the README.md file in the developer's page here: https://github.com/numixproject/numix-gtk-theme. A couple of quotes from there:

If you want to hack on the theme, make sure you have the inotifywait command available, which is used for watching and automatically building the files.

and

If you change any assets, you'll need to regenerate the gtk.gresource.xml and gtk.gresource files. You can use grrr to do it easily.

So how can a normal, average user change any aspect of the Numix theme available for 16.04? Can someone familiar with gtk3 themes that use scss rather than only plain css please explain the procedure?


Solution 1:

After a bit of reading on the subject and then re-reading the readme.md at the numix project I realised they actually do explain how to manually install and make changes to their theme.
The thing is that the instructions assume alot of prerequisite knowledge - basically that you are a C developer who knows CSS.
I'm assuming you know that source code for languages like C get compiled into binary executables and/or library files, and that SASS/SCSS is a pre-compiler (a kind of "higher" language) that gets compiled to CSS which is source code that is interpreted - and not compiled to a binary form. From what I can tell the overview is like this:

                          +--------------------------------------------------------------+
 +------+                 |  +---------------------+                                     |
 |      |   you need to   |  | CSS files           |         Numix theme                 |
 |SASS  |   "compile"     |  | ordinary text (code)|         i.e. files in               |
 |files |   SASS to CSS   |  |                     |         /usr/share/themes/Numix Daily/gtk-3.0
 |    +------------------------->             <------------------------------------------+----------+
 |      |                 |  +---------------------|                                     |          |
 |      |                 |   +------------------------+                                 |          |
 +------+                 |   | gtk.resource           |                                 |          |
 If you change this       |   | (compiled binary    <-----+                              |          |
 you need to recompile    |   | file)                  |  |                              |          |
 (update the CSS          |   +------------------------+  |                              |          |
                          +--------------------------------------------------------------+          |
 files)                      +----------------------+     |                                         |
                             | GTK library          |     |  +---------------------------+          |
+--------------------+       | (binary library)     |     |  |  GTK and C developer tools|          |
| Application        |       |                      |     |  |  used to recompile        |          |
| e.g. Gnome terminal|       | Configured to use    |     |  |  gtk.gresource            |          |
| Nautilus etc       |       | Numix Theme          |     |  |                           |          |
| that uses GTK      |       |                      |     +----+                         |          |
| library            |       |                      |        |                           |          |
| (binary            |       |                      |        |                           |          |
| executable)        |       |                      |        +---------------------------+          |
+--------------------+       |                      |                                               |
                             |Makes call to         +                                               |
                             |gtk_css_provider_load_from_file() +----------------------------------->
                             |
                             +----------------------+

So the Numix theme and I guess many/all GTK-3.0 themes comprise of binary resources and CSS code which is parsed by the function call gtk_css_provider_load_from_file() which seems to be a new addition to GTK-3.0.
The numix project suggests you only need to recompile the gtk-gresource if you change any assets. So I wouldn't bother with that - unless you really need to. If you really need here is an introduction to building a GTK binary resource

Useful resources

  • GtkCssProvider - this is responsible for parsing the CSS - it seems to really be the foundation for making GTK applications able to read CSS. particularly how GTK will read CSS code for a theme on startup:

An application can cause GTK+ to parse a specific CSS style sheet by calling gtk_css_provider_load_from_file() and adding the provider with gtk_style_context_add_provider() or gtk_style_context_add_provider_for_screen().
In addition, certain files will be read when GTK+ is initialized. First, the file $XDG_CONFIG_HOME/gtk-3.0/gtk.css is loaded if it exists.
Then, GTK+ tries to load $HOME/.themes/theme-name/gtk-3.0/gtk.css, falling back to datadir/share/themes/theme-name/gtk-3.0/gtk.css, where theme-name is the name of the current theme (see the "gtk-theme-name" setting) and datadir is the prefix configured when GTK+ was compiled, unless overridden by the GTK_DATA_PREFIX environment variable.

  • A good introduction to GTK themes - http://www.linux.org/threads/installing-obtaining-and-making-gtk-themes.8463/
  • Gnome docs on theming