10

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?

Enterprise
  • 12,802

1 Answers1

7

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

Content:

$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-PANABAKA
  • 23,291
  • 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 02 '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 02 '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 03 '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 ( https://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 04 '19 at 16:28