Home / ubuntu / Questions / 1170151
Accepted
Enterprise
Asked: 2019-09-02 19:08:43 +0800 CST

Help creating a new theme based on Adwaita?

  • 772

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?

gnome themes css

1 Answers

  1. Best Answer

    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

    • 7