{"id":65,"date":"2025-05-05T08:13:28","date_gmt":"2025-05-05T06:13:28","guid":{"rendered":"https:\/\/linuxundich.de\/en\/?p=65"},"modified":"2026-10-03T21:49:52","modified_gmt":"2026-10-03T19:49:52","slug":"libadwaita-accent-colors-in-gnome-47-a-unified-look-for-gtk-apps-like-firefox-and-gimp","status":"publish","type":"post","link":"https:\/\/linuxundich.de\/en\/gnu-linux\/libadwaita-accent-colors-in-gnome-47-a-unified-look-for-gtk-apps-like-firefox-and-gimp\/","title":{"rendered":"Libadwaita accent colors in GNOME 47+: a unified look for GTK apps like Firefox and GIMP"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">I always like it when apps follow a consistent style instead of each looking different. With GTK3 apps like <a href=\"https:\/\/linuxundich.de\/tag\/firefox\/\" data-type=\"post_tag\" data-id=\"73\">Firefox<\/a> or <a href=\"https:\/\/linuxundich.de\/tag\/gimp\/\" data-type=\"post_tag\" data-id=\"181\">GIMP<\/a> in particular, it wasn&#8217;t possible until now to pick up the individually configurable accent color of the current GNOME toolkit Libadwaita, introduced with <a href=\"https:\/\/release.gnome.org\/47\/\">GNOME 47<\/a>, and so blend these apps into the GNOME design. The <em>adw-gtk3 Colorizer GNOME Extension<\/em> is now a solution to this problem.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li class=\"\"><a href=\"#colorizer-gnome-extension\">Colorizer GNOME Extension<\/a><\/li><li class=\"\"><a href=\"#installation-der-erweiterung\">Installing the extension<\/a><\/li><li class=\"\"><a href=\"#verwendung-der-erweiterung\">Using the extension<\/a><\/li><li class=\"\"><a href=\"#deinstallation-der-erweiterung\">Uninstalling the extension<\/a><\/li><li class=\"\"><a href=\"#flatpak-kompatibilitat\">Flatpak compatibility<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"colorizer-gnome-extension\">Colorizer GNOME Extension<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This GNOME Shell extension makes sure the system accent color is automatically applied to the <a href=\"https:\/\/github.com\/lassekongo83\/adw-gtk3\">adw-gtk theme<\/a> and thus also to &#8220;older&#8221; GTK apps. By &#8220;old&#8221; I don&#8217;t mean abandoned or obsolete programs, just apps that are built on the GNOME libraries GTK3 or GTK4 but whose developers haven&#8217;t adopted <a href=\"https:\/\/gnome.pages.gitlab.gnome.org\/libadwaita\/\">Libadwaita<\/a> yet. That affects quite a few programs, because a full switch to Libadwaita takes time \u2013 and developer resources. The Colorizer extension steps in here and provides visual coherence, even if the app&#8217;s technical foundation isn&#8217;t up to date yet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The prerequisite is that the Adwaita GTK3 theme, or adw-gtk3 for short, is installed on your system. Only then can the extension do its job and apply the design changes correctly. The following command takes care of that on Arch Linux and derivatives like Manjaro, where it&#8217;s already in the &#8220;official&#8221; repositories. Installation on other distributions like Fedora or Debian is described on the project&#8217;s <a href=\"https:\/\/github.com\/lassekongo83\/adw-gtk3?tab=readme-ov-file#repositories\">GitHub page<\/a> (for Debian you&#8217;d have to add an external repository). The documentation helps here and makes the setup manageable even for less experienced Linux users.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$ &lt;strong&gt;sudo pacman -S adw-gtk-theme&lt;\/strong&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"installation-der-erweiterung\">Installing the extension<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The easiest way to install the extension is through the GNOME Extensions website: <a href=\"https:\/\/extensions.gnome.org\/extension\/8084\/adw-gtk3-colorizer\/\">adw-gtk3 Colorizer on GNOME Extensions<\/a>. You can enable the extension there with a single click, provided the GNOME integration for your browser is set up. The extension is still quite young and gets updated fairly often. New features and bug fixes land on GitHub at short intervals. If you don&#8217;t want to wait until the latest release trickles through the publishing process on the GNOME Extensions website, you can also install the extension by hand.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For that, you need to clone the repository and run the install script. The last step can also be done through GNOME&#8217;s extension manager. In general, keep in mind that you may have to log out of GNOME and back in after running the script. Alternatively, restarting the GNOME Shell is enough in some cases, for example with <kbd>Alt<\/kbd> + <kbd>F2<\/kbd> \u00bb <kbd>R<\/kbd> \u00bb <kbd>Enter<\/kbd> (X11 only, not on Wayland). That loads the new extension and makes its effect visible.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$ &lt;strong&gt;git clone https:\/\/github.com\/NiffirgkcaJ\/adw-gtk3-colorizer.git&lt;\/strong&gt;\n$ &lt;strong&gt;cd adw-gtk3-colorizer&lt;\/strong&gt;\n$ &lt;strong&gt;.\/install.sh&lt;\/strong&gt;\n$ &lt;strong&gt;gnome-extensions enable adw-gtk3-colorizer@NiffirgkcaJ.github.com&lt;\/strong&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"verwendung-der-erweiterung\">Using the extension<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once the extension is installed and enabled, it automatically picks up the accent color set in the GNOME settings and applies it to the <em>adw-gtk3<\/em> theme. This happens in the background, without you having to do anything. Changes to the accent color should take effect immediately, although in some cases you may need to restart the affected GTK3 apps. That mainly applies to programs that don&#8217;t reload their UI dynamically. Once they&#8217;re adjusted, though, the apps keep the new look for good.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"deinstallation-der-erweiterung\">Uninstalling the extension<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can uninstall the extension either through the GNOME Extensions app or from the command line. The latter is especially handy if you like working with scripts or manage several systems quickly. Either way gets you there reliably:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$ &lt;strong&gt;gnome-extensions disable adw-gtk3-colorizer@NiffirgkcaJ.github.com&lt;\/strong&gt;\n$ &lt;strong&gt;gnome-extensions uninstall adw-gtk3-colorizer@NiffirgkcaJ.github.com&lt;\/strong&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If you chose the manual installation, you can remove the extension by deleting its folder. This is a good idea especially if the extension doesn&#8217;t show up in the graphical tools or you prefer a clean removal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$ &lt;strong&gt;rm -rf ~\/.local\/share\/gnome-shell\/extensions\/adw-gtk3-colorizer@NiffirgkcaJ.github.com&lt;\/strong&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"flatpak-kompatibilitat\">Flatpak compatibility<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">GTK3 apps installed as Flatpaks don&#8217;t have access to the configuration directory <code>~\/.config\/gtk-3.0\/<\/code> by default, so you have to grant that access for the extension to work with these apps too. Without it, the Flatpaks simply can&#8217;t read the theme adjustments. This works with the following command, which applies globally to all Flatpak programs:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$ &lt;strong&gt;sudo flatpak override --filesystem=xdg-config\/gtk-3.0&lt;\/strong&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This makes sure all Flatpak apps can access the directory where the extension edits the CSS file. The Colorizer then works there as well \u2013 no matter whether you use Firefox, GIMP or other GTK apps via Flatpak. You can also limit the change to individual apps by giving the name of the program instead of using a global override.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac183cf31e4c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac183cf31e4c\" class=\"wp-block-image wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/linuxundich.de\/wp-content\/uploads\/2025\/04\/gtk3-accent-colors1-1280x720.webp\" alt=\"Without the extension: the accent colors of Firefox and the desktop don't match.\" style=\"width:100%\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Without the extension: the accent colors of Firefox and the desktop don&#8217;t match.<\/figcaption><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac183cf321a1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac183cf321a1\" class=\"wp-block-image wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/linuxundich.de\/wp-content\/uploads\/2025\/04\/gtk3-accent-colors2-1280x720.webp\" alt=\"With the extension: selected text (and other details) now follow the accent color.\" style=\"width:100%\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">With the extension: selected text (and other details) now follow the accent color.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">So the <em>adw-gtk3 Colorizer GNOME Extension<\/em> is a practical fix for a problem many GNOME users like to complain about online: the lack of visual consistency between GTK4 and GTK3 apps. It was no different back in the GTK2 days. Installation is quick, and the extension makes GTK3 apps look better for as long as they aren&#8217;t ported to the current version of the GTK toolkit, which will probably take forever. So if you want a homogeneous, modern desktop experience on GNOME, you&#8217;ll hardly get around this small but effective extension.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A consistent GTK look on GNOME 47: with the new adw-gtk3 Colorizer extension, older GTK3 apps like Firefox and GIMP now automatically follow the modern Libadwaita accent colors.<\/p>\n","protected":false},"author":2,"featured_media":64,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"lui_source_id":44569,"lui_source_hash":"0c623531b74eab7b61f122009d0a9e9148acfb5666237cab724a1d135f134ba2","lui_source_translated":"2026-10-03","lui_source_reviewed":true,"lui_via_url":"","lui_via_label":"","lui_source_url":"","lui_source_label":"","footnotes":""},"categories":[2],"tags":[],"class_list":["post-65","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gnu-linux"],"_links":{"self":[{"href":"https:\/\/linuxundich.de\/en\/wp-json\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxundich.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxundich.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxundich.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxundich.de\/en\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":1,"href":"https:\/\/linuxundich.de\/en\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/linuxundich.de\/en\/wp-json\/wp\/v2\/posts\/65\/revisions\/78"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/linuxundich.de\/en\/wp-json\/wp\/v2\/media\/64"}],"wp:attachment":[{"href":"https:\/\/linuxundich.de\/en\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxundich.de\/en\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxundich.de\/en\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}