How can I customize my GTK theme?

Question

I would like to create a custom theme. Actually, this would be a modified Yaru theme.

I could change the headerbar main color, but I couldn't change the color of its buttons.

Original Yaru theme:

Modified theme:

I would like to change the grey color of the buttons to a different color. How can I do that?

My operating system is Ubuntu 20.04 LTS with GNOME 3.36.

Solution 1

You can download and customize the Yaru theme from Gitub.

Here are instructions to get you started.

Install prerequisite packages to clone the repository and build the source files:

apt install libgtk-3-dev git meson sassc

Download the repository from GitHub, and then build and install the theme:

# You can get the master branch using:
# git clone https://github.com/ubuntu/yaru.git

# You can get the branch for 20.04 using:
git clone --branch focal https://github.com/ubuntu/yaru.git
cd yaru

# Initialize build system (only required once per repo)
meson build
cd build

# Build and install
sudo ninja install

To customize the theme, before building and installing, you will need to modify various files. Take a look at the files in these directories...

.../yaru/gtk/src
.../yaru/gtk/src/default/gtk-3.20
.../yaru/gtk/src/default/gtk-3.0

.../yaru/gnome-shell/src
.../yaru/gnome-shell/src/gnome-shell-sass

I won't be able to give you specific instructions, since this is a complex topic, and it all depends on what you want to change.

However, definately take a look at the _ubuntu-colors.scss files in the above paths, if you are just interested in changing some basic colors.

Solution 2

I have modified a theme just by editing css files in the /usr/share/themes/<theme name> directory. However, it's quite a trial-and-error approach, as it is not very clear which CSS selector corresponds to what actual element on the screen.

I would recommend creating a copy of the theme first because if you edit the original theme your changes might be overwritten when the theme gets updated. In case of Yaru theme, you have to do it anyway, as it is delivered in a packed form and you need to unpack it if you want to modify it.

There is a gtk.gresource file in both gtk-3.0 and gtk-3.20 subdirectories of /usr/share/themes/Yaru. After creating a copy of the directory (say under the name /usr/share/themes/My Theme), you have to unpack both those files. Type

gresource list gtk.gresource

to list the contents of the file. It basically contains two files gtk.css and gtk-dark.css (that should replace the files already present in the directory) and an assets subdirectory with a bunch of files. You have to extract everything (you can write a simple script to do this, based on output of the above command). To extract a single file (say gtk.css) do the following:

gresource extract gtk.gresource /com/ubuntu/themes/Yaru/3.0/gtk.css >gtk.css

After extracting everything delete the gtk.gresource file. Also edit the index.theme file in /usr/share/themes/My Theme, as it contains the theme name).

To see the effect of your changes, you need to change your theme from "My Theme" to something other (may be standard Yaru, thus you will easily see the differences), and then back to "My Theme".

Comments

[kcpr]

One comment: do not remove "gtk.gresource" after extracting, at least if You haven't extracted "gtk-dark.css". If You do, You'll lose dark theme variant (which elements seems to be sometimes use even if You generally use light variant) I think. I had issues with "gnome-sushi" windows because of that I believe. And generally that's kind of a solution I've been looking for - without a need to compile everything be yourself, thank You!