You know Google’s ‘Material You’ dynamic theming system introduced along with Android 12? GNOME desktop now has similar function using an extension.
To match the current background wallpaper, the extension automatically changes the accent colors of your GTK3 and GTK4 applications installed as either native package or universal Flatpak.
The parts of app window that change color automatically include:
- Header-bar color of focused window.
- In-app menu.
- Drop-down, input, and other selection box.
- on/off switch, check-box.
- Text highlight, underline, and more.
And, of course it works in both Light and Dark mode.
How to Install the Extension:
The extension so far supports only GNOME 42. Which means you needs Ubuntu 22.04, Fedora 36, Arch or Manjaro Linux.
Ubuntu 22.04 has out-of-box accent colors support! Switch light/dark and change accent color in 'Settings' will override the function.
In Fedora, Arch, Manajaro Linux, go to the link page below in your web browser, and turn on the slider icon to install the extension.
Don’t see the on/off switch? Click the in page link to install web browser extension and then refresh the page.
For Ubuntu 22.04, you may first search for and install ‘Extension Manager’ in Ubuntu Software. Then, use the tool to search for & install extension.
Enable the function for GTK3 & Flatpak apps:
The extension works by default for native GTK4 apps with LibAwaita theme. All others need a little modification.
1. Install & Apply Adw-gtk3 Theme:
Adw-gtk3 is an unofficial GTK3 port of GNOME’s LibAdwaita theme. To install it, first download the tarball from github releases page:
Then, extract and put the theme folders under “.themes” in your home directory. Press Ctrl+H to show/hide the hidden folders and create if it does not exist.
Finally, apply ‘Adw-gtk3‘ or ‘Adw-gtk3-dark‘ theme using Gnome Tweaks tool, which can be installed from Ubuntu Software or Gnome Software.
As mentioned, switch light/dark or accent color in Ubuntu 22.04 will override the settings here.
2. Enable the extension for GTK4 Flatpak Apps:
For Flatpak applications, first open terminal and run command to install the Flatseal configuration tool:
flatpak install https://dl.flathub.org/repo/appstream/com.github.tchx84.Flatseal.flatpakref
You must have already setup the flatpak daemon, or you don't have any Flatpak apps and you can simply skip this step.
Next, search for and open the app from ‘Activities’ overview screen.
Navigate to ‘All Applications‘ in the left, then scroll down in right and find out ‘Filesystem -> Other files‘. Finally click on the small folder icon, and type in xdg-config/gtk-4.0:ro.
This will enable GTK4 theming support for Flatpak applications. If you have any GTK3 app installed as Flatpak, also add xdg-config/gtk-3.0:ro.
For those familiar with Linux commands, this can be done easily by running the commands below in a terminal window:
sudo flatpak override --filesystem=xdg-config/gtk-4.0:ro
sudo flatpak override --filesystem=xdg-config/gtk-3.0:ro
Finally, change your wallpaper, log out and back in to see the magic!
In addition for chrome/chromium (non-snap package) browser, you need to go web browser’s ‘Settings -> Appearance‘ page and select use GTK to enable the fucntion.