Help creating a new theme based on Adwaita?

Question

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?

Answer 1

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..

2. 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;

3. Saved & Closed

4. sudo apt install sassc

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

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

7. 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

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

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

and the result is