I'd like to create a theme based on Adwaita.

I discovered that Adwaita no longer uses *.css files:

cat /usr/share/themes/Adwaita/gtk-3.0/gtk.css
/* Adwaita is now part of GTK+ 3, this file is no longer used */

I found the Adwaita source code on GitLab:

MASTER: https://gitlab.gnome.org/GNOME/gtk/tree/master/gtk/theme/Adwaita

VERSION 3.24.10: https://gitlab.gnome.org/GNOME/gtk/tree/3.24.10/gtk/theme/Adwaita

(UPDATE: The "master" branch on GitLab may be "buggy" since it is in development. Instead, a more stable branch such as 3.24.10 should be used).

Therefore, I can download the source files from Gitlab and modify the included *.scss files with the color changes I want.

Once I've made my changes, how do compile the source into a new theme, and deploy it on my machine?


Ubuntu 18.04

I Just tried it by understanding the README file from ~/Downloads/gtk-master/gtk/theme/Adwaita/ from the link you provided.. https://gitlab.gnome.org/GNOME/gtk/tree/master/gtk/theme/Adwaita

  1. Have downloaded the source code zip file..

enter image description here

  1. edited some colors (just to try) in the file ~/Downloads/gtk-master/gtk/theme/Adwaita/_colors.scss


$base_color: if($variant == 'light', #00FF00, lighten(desaturate(#241f31, 100%), 2%));
$text_color: if($variant == 'light', black, white);
$bg_color: if($variant == 'light', #0000FF, darken(desaturate(#3d3846, 100%), 4%));
$fg_color: if($variant == 'light', #2e3436, #eeeeec);

$selected_fg_color: #FF0000;

enter image description here

  1. Saved & Closed

  2. sudo apt install sassc

  3. cd ~/Downloads/gtk-master/gtk/theme/Adwaita

  4. sassc -M -t compact gtk-contained.scss MyCustomized.css

  5. copied this MyCustomized.css file into a newly created theme folder in /usr/share/themes/MyCustomized/gtk-3.0/ and renamed it as gtk.css

  6. copied the assets folder from ~/Downloads/gtk-master/gtk/theme/Adwaita/ to /usr/share/themes/MyCustomized/gtk-3.0/

  7. this MyCustomized theme can be selected from gnome-tweaks

and the result is

enter image description here

  • Pratap, this is a very clear answer, and it works to some extent... However, I think the assets are not generated. For example, after I follow your instructions, the check-mark and radio-button-dot images are missing inside check boxes and radio buttons. To see what I mean, try opening the Screenshot application after you've selected your custom theme, and notice that the selected check-boxes or selected radio-buttons are rendered as red squares. Is there another step that is needed to produce the corresponding assets?
    – Enterprise
    Sep 2 '19 at 21:02
  • One more question, how is the corresponding /usr/share/gnome-shell/gnome-shell-theme.gresource file generated from the custom theme files? (Is it simply a matter of running glib-compile-resources on ALL files in the ...gtk/theme/Adwaita directory downloaded from GitLab?)
    – Enterprise
    Sep 2 '19 at 21:11
  • Pratap, interestingly, my /usr/share/themes/Adwaita/gtk-3.0 doesn't have an assets sub-directory. (I also have a /usr/share/themes/Default directory, which also does not have an assets sub-directory). Nevertheless, I've copied the the assets directory from the source code into my new ...gtk-3.0 directory, as you suggested, and it worked. Please add this after step 7 in your answer so it helps others, as well.
    – Enterprise
    Sep 3 '19 at 23:03
  • I noticed that getting the source from the "master" branch on GitLab produced a theme with visual "quirks", as you described. Then I used version "3.24.10" from GitLab ( gitlab.gnome.org/GNOME/gtk/tree/3.24.10/gtk/theme/Adwaita). This version is a closer match to GTK version 3.24.8, that is currently installed in Ubuntu 19.04, and doesn't have the visual "quirks". I guess the "master" branch is "beading edge" and will probably be buggy.
    – Enterprise
    Sep 4 '19 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.