You Got A Question? Ask    GNOME Community!


How To Hack GNOME’s Adwaita GTK Theme

GNOME’s Adwaita Theme is really great. But we can easily make it greater. So if you want to make some slightly changes, or to create a new theme from scratch this is how to.


Issues With GTK Themes

There are some issues with how GNOME GTK Theming works.

Placement

For system-wide installation, you just need to copy your theme under:

/usr/share/themes

For user-specif installations you need to copy the GTK3

~/.local/share/themes

and GTK2 variant in

~/.themes

Annoying bug..

CSS Properties & Pseudo-Classes

GTK’s CSS isn’t standards-compliant with CSS standards. It is more or less a set of CSS, with some additional or missing features. Documentation is also missing and you need to check on how Adwaita does it to find all the available properties.

Moreover if you want to maintain your theme for GNOME future versions, you need to follow the Adwaita development in GNOME Git.

GTK2

About GTK2 themes .. I won’t even get bothered ;)


Requirements

This guide is made for GNOME 3.10 and I’m not sure if it will work for earlier versions.

  1. Adwaita Theme Engine in case that you don’t have GNOME (ie Ubuntu)
  2. Tweak Tool. To select your new Theme

Get Started

Making themes for GNOME is a boring rather hard work. You just need time. Adwaita is a 5000+ CSS lines.

Adwaita Binary

If you open

/usr/share/themes/Adwaita/gtk-3.0/gtk.css

You’ll see

@import url("resource:///org/gnome/adwaita/gtk-main.css");

That’s because Adwaita is a binary mostly made for performance reasons. You can see this post for more info. So we can’t hack our pre-installed Adwaita.


1. Download

First step is to download the current Adwaita Theme.

Get it from: http://ftp.gnome.org/Public/GNOME/sources/gnome-themes-standard/3.10/

and unzip it.


2. Move It

Navigate inside the unzipped content and grub Adwaita folder. Rename Adwaita to myAdwaita ( to can recognize your theme from the default )

and move it to

~/.local/share/themes/myAdwaita

Delete all the rest files.


3. Further Cleanups

Open myAdwaita and delete the un-necessary files. In the myAdwaita root directory keep

[ gtk-2.0, gtk-3.0, metacity-1, index.theme ]

Inside myAdwaita/gtk-3.0 delete all the building files {c, h, am etc}. Do the same for the rest [ gtk-2.0, metacity-1 ].

Cleanup isn’t mandatory. If you don’t know what you have to delete, just let all the files.


4. Remove The Resource

Open

myAdwaita/gtk-3.0/gtk.css

Replace

@import url("resource:///org/gnome/adwaita/gtk-main.css");

With

@import url("gtk-main.css");

Do the same for the Dark Variant.


5. Select Your Theme

Open Tweak Tool and select your newly created theme.

tweak-myadwaita


6. Test it

You won’t notice any changes since your theme is identical with the default Adwaita. So let’s test it.
Edit gtk-main.css

/* Default color scheme */
@define-color theme_base_color #ffffff;
@define-color theme_bg_color red;
@define-color theme_selected_bg_color #4a90d9;
@define-color theme_text_color #2e3436;
@define-color theme_fg_color @theme_text_color;
@define-color theme_selected_fg_color #ffffff;
....

To apply your changes, you should either kill/start the application you want to test, or you can switch and switch back themes in Tweak Tool.

myadwaita-red

That’s a nice improvement over default Adwaita ;)

$ gtk3-widget-factory

Will help you to see all GTK Widgets in a single application. More over you can use GTK-Parasite for live editing your CSS.


I guess you can do the GTK2 yourselves, so I am not going over there. If you are going to create a new theme it is important to hack on Adwaita and don’t hack someone’s else theme.


 
  We can't watch comments unless G+ provides an API or if you send a notification, e.g +World Of Gnome
     Sometimes is better to place your questions on GNOME Community