Skip to content

Latest commit

 

History

History
160 lines (114 loc) · 6.52 KB

HACKING.md

File metadata and controls

160 lines (114 loc) · 6.52 KB
Raw

Summary

  • Do not edit the CSS directly, edit the source SCSS files and the CSS files will be generated automatically when building with meson + ninja.
    • You'll need to have sassc installed.
  • Do not edit foo.<theme-name>.scss auto-generated by meson.
  • Do not edit the PNG directly, edit the source SVG files and run ./render-assets.sh.
    • You'll need to have inkscape and optipng installed.
  • To change the colors of SVG files, use a text editor instead of a image editor.

How to tweak the theme

SCSS

Like the upstream Adwaita, to keep it maintainable it's written and processed in Sass.

Here's a rundown of the "supporting" stylesheets, that are unlikely to be the right place for a drive by stylesheet fix:

File Description
_variables.scss Variables to allow easier definition of widget sizing/styling.
_color-palette.scss Material Design color palette definitions. We don't recommend editing this unless Google updates the color scheme.
_colors.scss Global color definitions. We keep the number of defined colors to a necessary minimum. 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.
_common*.scss Actual definitions of style for each widget. This is where you are likely to add/remove your changes.
_apps*.scss
_extensions.scss		 App/extension specific stylings.

You can read about Sass on its web page. Once you make your changes to the SCSS files, you can run ninja to generate the final CSS files.

SVG

In Materia, to keep it maintainable, SVG files are basically edited on text-based. So if you just want to change the colors of SVG files, it is recommended to use a text editor instead of a image editor.

Several SVG files are used to render the PNG assets. Once you make your changes to the SVG files, run the ./render-assets.sh script to render the PNG assets.

How to change the color scheme

To keep it maintainable, SVG files are basically edited on text-based.

So if you just want to change the SVG assets color, we recommend using a text editor instead of Inkscape. However, please note that Inkscape is required to render the PNG assets from the SVG files.

Here's an example to change the accent color:

  1. Open the following SVG files with a text editor.
  • ./src/gtk-2.0/assets.svg
  • ./src/gtk-2.0/assets-dark.svg
  • ./src/gtk/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
  1. 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

  1. Run ./render-assets.sh to render the PNG assets for gtk2 and gtk3.

Note: inkscape and optipng must be installed to run the script.

With script

To easily change the color scheme, you can use the change_color.sh script (or just use the oomox app).

Originally, change_color.sh and scripts/*.sh were implemented for oomox, but you can also run it on the command line without the app.

Note: This script doesn't support Chrome extensions for now.

For example, to change the color scheme to the previous Flat-Plat, run the script as follows:

For bash:

./change_color.sh -o Flat-Plat <(echo -e "BG=F5F5F5\nFG=212121\nMATERIA_VIEW=FFFFFF\nMATERIA_SURFACE=FAFAFA\nHDR_BG=455A64\nHDR_FG=FFFFFF\nSEL_BG=42A5F5\n")

For fish:

./change_color.sh -o Flat-Plat (echo -e "BG=F5F5F5\nFG=212121\nMATERIA_VIEW=FFFFFF\nMATERIA_SURFACE=FAFAFA\nHDR_BG=455A64\nHDR_FG=FFFFFF\nSEL_BG=42A5F5\n" | psub)

Manual

If you want to change the color scheme in more detail, edit the files where colors are defined.

SCSS

  • src/_sass/_color-palette.scss
  • src/_sass/_colors.scss

SVG

  • src/gtk/assets.svg
  • src/gtk-2.0/assets{,-dark}.svg
  • src/gnome-shell/assets{,-dark}/*.svg
  • src/unity/*.svg
  • src/unity/assets{,-light}/*.svg
  • src/xfwm4/assets{,-light}/*.svg
  • src/chrome/chrome-scrollbar{,-dark}/icons/*.svg
  • src/chrome/chrome-theme{,-dark,-light}/*.svg

Note: Do not forget to run ./render-assets.sh after changing the colors of src/gtk/assets.svg and src/gtk-2.0/assets{,-dark}.svg.

Misc

  • src/gtk-2.0/gtkrc{,-dark,-light}
  • src/metacity-1/metacity-theme-2{,-light}.xml
  • src/xfwm4/assets{,-light}/themerc
  • src/chrome/chrome-theme{,-dark,-light}/manifest.json

Note: The colors of manifest.json are defined in RGB format, so you need to convert your colors from HEX format to RGB format.

After all the steps, run ninja to rebuild the themes.

Useful Links

Upstream theme sources

For other upstream theme sources of apps/DEs, see the comments in the source code.

Tips