HACKING.md: Improve legibility and comprehensibility

HACKING.md

@@ -1,65 +1,59 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            1  
                                            ## Summary
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            2  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        3 -
                                        - Do not edit the CSS directly, edit the source SCSS files and run `./parse-sass.sh`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 -
                                        - To be able to use the latest/adequate version of Sass, install `sassc`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        5 -
                                        - Do not edit the PNG directly, edit the source SVG files and run `./render-assets.sh`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 -
                                        - To be able to render the PNG assets, install `inkscape` and `optipng`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 -
                                        - To change the SVG assets color, use a text editor instead of a image editor
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        3 +
                                        - Do not edit the CSS directly, edit the source SCSS files and run `./parse-sass.sh`.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 +
                                          - You'll need to have `sassc` installed.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        5 +
                                        - Do not edit the PNG directly, edit the source SVG files and run `./render-assets.sh`.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                          - You'll need to have `inkscape` and `optipng` installed.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                        - To change the colors of SVG files, use a text editor instead of a image editor.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            8  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 -
                                        ## How to tweak the CSS/SCSS
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                        ## How to tweak the theme
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 -
                                        Like the upstream Adwaita, this theme is written and processed in Sass.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 +
                                        ### SCSS
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 -
                                        You can read about Sass at http://sass-lang.com/documentation/. Once you make
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 -
                                        your changes to the SCSS files, run the `./parse-sass.sh` script to rebuild the
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 -
                                        CSS files.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 +
                                        Like the upstream Adwaita, Materia is a complex theme, so to keep it
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 +
                                        maintainable it's written and processed in Sass.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 -
                                        Here's a rundown of the _supporting_ stylesheets:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 +
                                        Here's a rundown of the "supporting" stylesheets, that are unlikely to be the
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                        right place for a drive by stylesheet fix:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            18  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 -
                                        - `_variables.scss`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 +
                                        | File | Description |
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                        | :-- | :-- |
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 +
                                        | `_variables.scss` | Variables to allow easier definition of widget sizing/styling. |
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                        | `_color-palette.scss` | Material Design color palette definitions. We don't recommend editing this unless Google updates the color scheme. |
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                        | `_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. |
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                        | `_colors-public.scss` | SCSS colors exported through gtk to allow for 3rd party apps color mixing. |
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                        | `_drawing<-version>.scss` | Drawing helper mixings/functions to allow easier definition of widget drawing under specific context. |
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 +
                                        | `_common<-version>.scss` | Actual definitions of style for each widget. This is where you are likely to add/remove your changes. |
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                        | `_apps<-version>.scss` <br> `_extensions.scss` | App/extension specific stylings. |
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            28  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 -
                                          variables to allow easier definition of widget sizing/styling.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 +
                                        You can read about Sass on its [web page](http://sass-lang.com/documentation/).
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 +
                                        Once you make your changes to the SCSS files, run the `./parse-sass.sh` script
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 +
                                        to rebuild the CSS files.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            32  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 -
                                        - `_color-palette.scss`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 +
                                        ### SVG
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            34  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 -
                                          material design color palette definitions. We don't recommend editing this
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 -
                                          unless Google updates the color scheme.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 +
                                        In Materia, to keep it maintainable, SVG files are basically edited on
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 +
                                        text-based. So if you just want to change the colors of SVG files, it is
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 +
                                        recommended to use a **text editor** instead of a image editor.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            38  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 -
                                        - `_colors.scss`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 -
                                          global color definitions. We keep the number of defined colors to a necessary
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 -
                                          minimum. It covers both the light variant and the dark variant.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 -
                                        - `_colors-public.scss`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 -
                                          SCSS colors exported through gtk to allow for 3rd party apps color mixing.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 -
                                        - `_drawing.scss`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        38 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        39 -
                                          drawing helper mixings/functions to allow easier definition of widget drawing
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 -
                                          under specific context.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        41 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        42 -
                                        - `_common.scss`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        43 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 -
                                          actual definitions of style for each widget. This is where you are likely to
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 -
                                          add/remove your changes.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 -
                                        - `_apps.scss` or `_extensions.scss`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 -
                                          app/extension specific stylings.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        39 +
                                        Several SVG files are used to render the PNG assets. Once you make your changes
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 +
                                        to the SVG files, run the `./render-assets.sh` script to render the PNG assets.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            41  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            42  
                                            ## How to change the color scheme
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            43  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 -
                                        ### With script
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 +
                                        ### Script
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            45  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            46  
                                            To easily change the color scheme, you can use the `change_color.sh` script (or
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            47  
                                            just use the [oomox](https://github.com/actionless/oomox) app).
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            48  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        58 -
                                        Originally `change_color.sh` (and the `scripts/` dir) was implemented for oomox,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        59 -
                                        but you can also run it on the command line without the app as follows:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 +
                                        > Originally, `change_color.sh` and `scripts/*.sh` were implemented for oomox,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 +
                                        but you can also run it on the command line without the app.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            51  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            52  
                                            > Note: This script doesn't support Chrome extensions for now.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            53  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 +
                                        For example, to change the color scheme to the previous Flat-Plat, run the
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 +
                                        script as follows:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        56 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            57  
                                            For `bash`:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            58  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            59  
                                            ```bash
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -72,39 +66,49 @@ For `fish`:

                                
                                
                                
                            
                                
                                    
                                        
                                            66  
                                            ./change_color.sh -o Flat-Plat (echo -e "BG=F5F5F5\nFG=212121\nTXT_BG=FFFFFF\nTXT_FG=212121\nBTN_BG=FAFAFA\nBTN_FG=616161\nMENU_BG=455A64\nMENU_FG=FFFFFF\nSEL_BG=42A5F5\nSEL_FG=FFFFFF\nACCENT_BG=FF4081\nMATERIA_STYLE_COMPACT=False\n" | psub)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            67  
                                            ```
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            68  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        75 -
                                        ### Manually
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        69 +
                                        ### Manual
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            70  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        77 -
                                        If you want to change the color scheme in more detail, edit the following files
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        78 -
                                        that define color:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        71 +
                                        If you want to change the color scheme in more detail, edit the files where
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        72 +
                                        colors are defined.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        73 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        74 +
                                        #### SCSS
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            75  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            76  
                                            - `src/_sass/_color-palette.scss`
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            77  
                                            - `src/_sass/_colors.scss`
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        82 -
                                        - `src/chrome/chrome-scrollbar{,-dark}/icons/*.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        83 -
                                        - `src/chrome/chrome-theme{,-dark,-light}/*.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        84 -
                                        - `src/chrome/chrome-theme{,-dark,-light}/manifest.json`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        85 -
                                        - `src/gnome-shell/assets{,-dark}/*.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        78 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        79 +
                                        > Note: Do not forget to run `./parse-sass.sh` after changing the colors of SCSS
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        80 +
                                        files.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        81 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        82 +
                                        #### SVG
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        83 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            84  
                                            - `src/gtk/assets.svg`
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            85  
                                            - `src/gtk-2.0/assets{,-dark}.svg`
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        88 -
                                        - `src/gtk-2.0/gtkrc{,-dark,-light}`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        89 -
                                        - `src/metacity-1/metacity-theme-2{,-light}.xml`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        90 -
                                        - `src/metacity-1/metacity-theme-3{,-light}.xml`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        86 +
                                        - `src/gnome-shell/assets{,-dark}/*.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            87  
                                            - `src/unity/*.svg`
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            88  
                                            - `src/unity/assets{,-light}/*.svg`
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            89  
                                            - `src/xfwm4/assets{,-light}/*.svg`
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        94 -
                                        - `src/xfwm4/assets{,-light}/themerc`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        90 +
                                        - `src/chrome/chrome-scrollbar{,-dark}/icons/*.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        91 +
                                        - `src/chrome/chrome-theme{,-dark,-light}/*.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        92 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        93 +
                                        > Note: Do not forget to run `./render-assets.sh` after changing the colors of
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        94 +
                                        `src/gtk/assets.svg` and `src/gtk-2.0/assets{,-dark}.svg`.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            95  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        96 -
                                        NOTES:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        96 +
                                        #### Misc
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        97 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        98 +
                                        - `src/gtk-2.0/gtkrc{,-dark,-light}`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        99 +
                                        - `src/metacity-1/metacity-theme-2{,-light}.xml`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        100 +
                                        - `src/metacity-1/metacity-theme-3{,-light}.xml`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        101 +
                                        - `src/xfwm4/assets{,-light}/themerc`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        102 +
                                        - `src/chrome/chrome-theme{,-dark,-light}/manifest.json`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            103  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        98 -
                                        - To edit the colors of `.svg` files, use a text editor instead of a image editor.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        99 -
                                        - After editing the colors of `.scss` files, run `./parse-sass.sh` to rebuild the CSS files.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        100 -
                                        - After editing the colors of `src/gtk/assets.svg` and `src/gtk-2.0/assets{,-dark}.svg`, run `./render-assets.sh` to render the PNG assets.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        101 -
                                        - The colors of `manifest.json` are defined in RGB format, so you need to convert your colors from HEX format to RGB format.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        104 +
                                        > Note: The colors of `manifest.json` are defined in RGB format, so you need to
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        105 +
                                        convert your colors from HEX format to RGB format.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            106  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        103 -
                                        After all the steps, run `./install.sh`.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        107 +
                                        After all the steps, run `./install.sh` to rebuild the themes.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            108  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            109  
                                            ## Useful Links
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            110  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        107 -
                                        #### Upstream theme sources
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        111 +
                                        ### Upstream theme sources
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            112  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            113  
                                            - [GTK+ 4.0](https://gitlab.gnome.org/GNOME/gtk/tree/master/gtk/theme/Adwaita) (master)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            114  
                                              - [3.22](https://gitlab.gnome.org/GNOME/gtk/tree/gtk-3-22/gtk/theme/Adwaita)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -112,12 +116,12 @@ After all the steps, run `./install.sh`.

                                
                                
                                
                            
                                
                                    
                                        
                                            116  
                                              - [3.18](https://gitlab.gnome.org/GNOME/gtk/tree/gtk-3-18/gtk/theme/Adwaita)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            117  
                                            - [GTK+ 2](https://gitlab.gnome.org/GNOME/gnome-themes-extra/tree/master/themes/Adwaita/gtk-2.0)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            118  
                                            - [GNOME Shell](https://gitlab.gnome.org/GNOME/gnome-shell/tree/master/data/theme)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        115 -
                                          - [Sass sources](https://github.com/GNOME/gnome-shell-sass) (legacy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        119 +
                                          - [Sass sources](https://gitlab.gnome.org/GNOME/gnome-shell-sass) (legacy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            120  
                                            - [Metacity](https://gitlab.gnome.org/GNOME/gnome-themes-extra/tree/gnome-3-14/themes/Adwaita/metacity-1) (legacy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            121  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            122  
                                            > For other upstream theme sources of apps/DEs, see the comments in the source code.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            123  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        120 -
                                        #### Tips
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        124 +
                                        ### Tips
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            125  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            126  
                                            - [Material Design Guidelines](https://www.material.io/guidelines/)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            127  
                                            - [CSS Guidelines for Materia](https://github.com/nana-4/materia-theme/wiki/CSS-Guidelines)