Getting started with GTK theming?

Hey! I’ve been having a few issues with getting off the ground with GTK theming. It appears there’s zero documentation for doing so, and trying to edit the SCSS (and then compiling it) in Adwaita produces no change.

I’d appreciate any help I can get. Thanks!

Trying to edit Adwaita as first shot isn’t what I’d recommend.

You first should try GTK Inspector. You could try using with Widget Factory.

For example, you’d install gtk-3-examples on Ubuntu and then run

GTK_DEBUG=interactive gtk3-widget-factory

then on the styles tab of the inspector, you can try stuff out. Ex.

button { color: red; }  /* color text is now red */

For others, a good, though not perfect, resource is online. (No enrolment fee necessary).
The tutorials on there can really help a person with the basics and in getting started. While that site is for WebBuilding and gtk3 is different in many respects, the basics are the same and it can solve many mysteries that will get you are first.
And, playing with css and seeing what happens when you save and refresh is a great teacher, too. Use existing themes as templates and elbullazul gave excellent pointers to help you figure out what does what and how it relates to the .css you have in the file. It takes getting used to and can appear to be daunting at first, but getting in and getting dirty are key to getting used to it and starting to understand it. Lastly- Ask; on forums here and elsewhere.
It is true that there is not a lot of documentation, but there can be a lot of help from the community.

If i were a beginner i personally would start with ambiant or radiant mate.Use a CSS based theme for starters. Or start with azurra framework or test color definitions in oomox.

The advantage of using adwaita is that it gets rendered 100% like the gnome devs want it. Cause its the standard gtk3 theme. But the problem is that this code itself is very complicated. And its really asked to much from someone who starts theming to edit adwaita. Also you need to theme gtk2 and gtk.Forget it. This code looks for similar to a spaghetti coding at first look. Later you see why its done this way and that this design does make sense but even the scss is far away from beeing easily human readable.

1 Like