Ubuntu – How to customize the GTK theme

20.04gtk3themes

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:

Original Yaru theme headerbar

Modified theme:

Modified Yaru theme headerbar

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.

Best Answer

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.

Related Question