Gradience – Change Colors & Custom CSS to GTK4 + LibAwaita Apps

People says theming is dead for GTK4 apps with LibAdwaita. But Adwaita Manager Team don't think so!
People says theming is dead for GTK4 apps with LibAdwaita. But Adwaita Manager Team don't think so!

For GNOME desktop fans, there’s now a configuration tool to apply custom CSS code and different color schemes to GTK4 app with Lib-Adwaita and GTK3 with Adw-gtk3 theme.

Just a few days ago, I wrote about an extension that changes GTK apps’ accent color automatically according to background wallpaper. Today, I’m going to introduce Adwaita Manager Gradience. It’s a simple tool allows to apply custom color scheme and CSS code to every part of your GTK applications.

Gradience

As you may know, GNOME is moving to GTK4. Plus Lib-Adwaita library, the applications UI are looking modern and stylish. But, it rejects the idea of applying a custom theme.

For those who wants to make some changes, the new project Gradience is available now. And, the team announced in the first release:

Some people are saying that theming is dead with libadwaita. But Adwaita Manager Team don’t think so, with this tool you can customize Adwaita and more with ease.

The app was originally called “Adwaita Manager”. A GNOME member asked to change the name as it looks like an official app, while it’s NOT. So, it’s now Gradience.

Customize GTK4 + LibAwaita app appearance

As the picture above shows, Gradience makes possible to change background and foreground colors of app window, header bar, buttons, on/off switches, check-boxes, labels, entries, popover menu, dialog, dropdown-list, and most other parts colors of app window.

For each, user can either click on ‘pencil’ icon and type color value manually, or use the built-in color picker. Which, also supports changing color opacity via a slider bar in custom (click ‘+’ to open) dialog.

Built-in color picker

As well, it supports generating Material Design 3 palette from given background image color via Monet engine.

In the last tab, advanced users can add custom CSS code to GTK4 or GTK3 applications. However, it may not work properly and even break some programs.

Before clicking on “Apply” button, the configuration window itself alters as live preview. It supports for saving changes as presets. And, there’s an option to reset applied color scheme.

Recent Updates

The software is keeping updated with more and more great new features. In the most recent release, user can click on the header-bar icon to open the presets dialog.

There, you may quickly switch between all available presets with a single mouse click. And, browse and install more presets under “Explore” tab.

Gradience Presets

For designers, there’s a little button in the left of header-bar with options to open the GTK4/LibAwaita demos, and widget factory. Which, may help you to well understand the GTK app appearances.

How to Get Gradience:

The app so far is still in earlier stage. It may or may NOT work properly!

The software package has been made into Flathub repository as universal Flatpak package that works in most Linux systems.

1. Setup Flatpak

Linux Mint, Fedora, Pop! OS, Rocky Linux and a few other Linux have Flatpak support out-of-the-box. Just go step 2.

For Ubuntu user, press Ctrl+Alt+T to open terminal and run command to install the daemon:

sudo apt install flatpak

Other Linux user can follow the official setup guide to get Flatpak support:

2. Install Gradience

Some Linux (e.g., Linux Mint) can directly search for and install the app from system software manager.

Though, the command below works in all Linux. First, search for and open terminal from start menu (‘Activities’ overview)

Next, run the single command below to install the tool:

flatpak install https://dl.flathub.org/repo/appstream/com.github.GradienceTeam.Gradience.flatpakref
Install Gradience

After installation, search for and open it from start menu and enjoy!

3. Setup Gradience for Flatpak apps

The recent update added a welcome dialog in first launch, with brief information about the app, options to automatically install Adw-gtk3 theme and configure your system.

I’ve tried it in Ubuntu 22.04, but it just does not work except for the app window itself. If you gonna try it out, don’t forget to enable Flatpak apps support either via command:

sudo flatpak override --filesystem=xdg-config/gtk-4.0:ro

or by using the graphical Flatseal management tool.

Merilyn Ne
Hi, I'm Merilyn Ne, a computer geek working on Ubuntu Linux for many years and would like to write useful tips for beginners. Forgive me for language mistakes. I'm not a native speaker of English.