empty
Summary
Do not edit the CSS directly, edit the source SCSS files and process them with SASS (run
./parse-sass.shwhen you have the required software installed, as described below)
To be able to use the latest/adequate version of sass, install ruby, gem, sass & bundle. On Fedora 25, this is done with
sudo dnf install rubygems && gem install bundle && bundle installfrom the same directory thisHACKING.mdresides in.
How to tweak the theme
Flat-Plat is a complex theme, so to keep it maintainable it's written and processed in SASS.
It is very likely your change will happen in the _common.scss file. That's where all the widget
selectors are defined. Here's a rundown of the "supporting" stylesheets, that are unlikely to be the
right place for a drive by stylesheet fix:
_colors.scss
global color definitions. We keep the number of defined colors to a necessary minimum, most colors are derived form a handful of basics. It covers both the light variant and the dark variant.
_colors-public.scss
SCSS colors exported through gtk to allow for 3rd party apps color mixing.
_drawing.scss
drawing helper mixings/functions to allow easier definition of widget drawing under specific context. This is why Flat-Plat isn't 15000 LOC.
_common.scss
actual definitions of style for each widget. This is where you are likely to add/remove your changes.
You can read about SASS at http://sass-lang.com/documentation/. Once you make your changes to the
_common.scss file, you can either run the ./parse-sass.sh script or keep SASS watching for changes as you
edit. This is done by running bundle exec sass --watch --sourcemap=none . If sass is out of date, or is
missing, you can install it with bundle install.
How to change the assets color
To keep it maintainable SVG files are basically edited on text-based.
So if you just want to change the SVG assets color, I recommend using a text editor instead of Inkscape. But please note that in some cases Inkscape is needed to render PNG assets.
Here is an example to change the _accent color_:
Open the following
.svgfiles with a text editor.
- ./src/gtk-2.0/assets.svg - ./src/gtk-2.0/assets-dark.svg - ./src/gtk-3.0/gtk-common/assets.svg - ./src/gnome-shell/3.18/assets/checkbox.svg - ./src/gnome-shell/3.18/assets/more-results.svg - ./src/gnome-shell/3.18/assets/toggle-on.svg - ./src/gnome-shell/3.18/assets-dark/checkbox.svg - ./src/gnome-shell/3.18/assets-dark/more-results.svg - ./src/gnome-shell/3.18/assets-dark/toggle-on.svg
Search
#FF4081(default accent color) and replace with your favorite color.
- The recommended color palette is: https://material.io/guidelines/style/color.html#color-color-palette
For gtk2 and gtk3, delete all png assets before redrawing them.
sh
rm -v ./src/gtk-2.0/assets/*.png
rm -v ./src/gtk-2.0/assets-dark/*.png
rm -v ./src/gtk-3.0/gtk-common/assets/*.png
Render png assets with scripts. (Inkscape is required to run the scripts.)
- for gtk2:
sh
cd ./src/gtk-2.0
./render-assets.sh
./render-assets-dark.sh
- for gtk3:
sh
cd ./src/gtk-3.0/gtk-common
./render-assets.sh
Useful Links
Upstream theme sources:
Tips:
1
Summary
2
-------
3
- Do not edit the CSS directly, edit the source SCSS files and process them with SASS (run
5
`./parse-sass.sh` when you have the required software installed, as described below)
6
- To be able to use the latest/adequate version of sass, install ruby, gem, sass & bundle.
8
On Fedora 25, this is done with `sudo dnf install rubygems && gem install bundle && bundle install`
9
from the same directory this `HACKING.md` resides in.
10
How to tweak the theme
12
----------------------
13
Flat-Plat is a complex theme, so to keep it maintainable it's written and processed in SASS.
15
It is very likely your change will happen in the `_common.scss` file. That's where all the widget
17
selectors are defined. Here's a rundown of the "supporting" stylesheets, that are unlikely to be the
18
right place for a drive by stylesheet fix:
19
- `_colors.scss`
21
global color definitions. We keep the number of defined colors to a necessary minimum,
23
most colors are derived form a handful of basics. It covers both the light variant and
24
the dark variant.
25
- `_colors-public.scss`
27
SCSS colors exported through gtk to allow for 3rd party apps color mixing.
29
- `_drawing.scss`
31
drawing helper mixings/functions to allow easier definition of widget drawing under
33
specific context. This is why Flat-Plat isn't 15000 LOC.
34
- `_common.scss`
36
actual definitions of style for each widget. This is where you are likely to add/remove your changes.
38
You can read about SASS at http://sass-lang.com/documentation/. Once you make your changes to the
40
`_common.scss` file, you can either run the `./parse-sass.sh` script or keep SASS watching for changes as you
41
edit. This is done by running `bundle exec sass --watch --sourcemap=none .` If sass is out of date, or is
42
missing, you can install it with `bundle install`.
43
How to change the assets color
45
------------------------------
46
To keep it maintainable SVG files are basically edited on text-based.
48
So if you just want to change the SVG assets color, I recommend using a **text editor** instead of **Inkscape**.
50
But please note that in some cases Inkscape is needed to render PNG assets.
51
Here is an example to change the _accent color_:
53
1. Open the following `.svg` files with a **text editor**.
55
- ./src/gtk-2.0/assets.svg
57
- ./src/gtk-2.0/assets-dark.svg
58
- ./src/gtk-3.0/gtk-common/assets.svg
59
- ./src/gnome-shell/3.18/assets/checkbox.svg
60
- ./src/gnome-shell/3.18/assets/more-results.svg
61
- ./src/gnome-shell/3.18/assets/toggle-on.svg
62
- ./src/gnome-shell/3.18/assets-dark/checkbox.svg
63
- ./src/gnome-shell/3.18/assets-dark/more-results.svg
64
- ./src/gnome-shell/3.18/assets-dark/toggle-on.svg
65
2. Search `#FF4081` (default accent color) and replace with your favorite color.
67
- The recommended color palette is: https://material.io/guidelines/style/color.html#color-color-palette
69
3. For gtk2 and gtk3, delete all png assets before redrawing them.
71
```sh
73
rm -v ./src/gtk-2.0/assets/*.png
74
rm -v ./src/gtk-2.0/assets-dark/*.png
75
rm -v ./src/gtk-3.0/gtk-common/assets/*.png
76
```
77
4. Render png assets with scripts. (Inkscape is required to run the scripts.)
79
- for gtk2:
81
```sh
83
cd ./src/gtk-2.0
84
./render-assets.sh
85
./render-assets-dark.sh
86
```
87
- for gtk3:
89
```sh
91
cd ./src/gtk-3.0/gtk-common
92
./render-assets.sh
93
```
94
Useful Links
96
------------
97
Upstream theme sources:
99
- [GTK+ 4](https://github.com/GNOME/gtk/tree/master/gtk/theme/Adwaita)
100
- [3.22.x](https://github.com/GNOME/gtk/tree/gtk-3-22/gtk/theme/Adwaita)
101
- [3.20.x](https://github.com/GNOME/gtk/tree/gtk-3-20/gtk/theme/Adwaita)
102
- [3.18.x](https://github.com/GNOME/gtk/tree/gtk-3-18/gtk/theme/Adwaita)
103
- [GTK+ 2](https://github.com/GNOME/gnome-themes-standard/tree/master/themes/Adwaita/gtk-2.0)
104
- [GNOME Shell](https://github.com/GNOME/gnome-shell/tree/master/data/theme)
105
- [Sass sources](https://github.com/GNOME/gnome-shell-sass)
106
Tips:
108
- [Unity/Theming](https://wiki.ubuntu.com/Unity/Theming)
109
- [Material Design Guidelines](https://www.material.io/guidelines/)
110
- [Personal CSS Guidelines](https://github.com/nana-4/Flat-Plat/wiki/CSS-Guidelines)
111