HACKING.md: Describe how to change the color scheme manually (WIP)

HACKING.md

@@ -2,9 +2,11 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            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
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            8  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 -
                                        ## How to tweak the theme
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                        ## How to tweak the CSS/SCSS
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                            Like the upstream Adwaita, this theme is written and processed in Sass.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -46,45 +48,17 @@ Here's a rundown of the _supporting_ stylesheets:

                                
                                
                                
                            
                                
                                    
                                        
                                            48  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            49  
                                              app/extension specific stylings.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            50  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 -
                                        ## How to change the assets color
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 +
                                        ## How to change the color scheme
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            52  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 -
                                        To keep it maintainable, SVG files are basically edited on text-based.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 -
                                        So if you just want to change the SVG assets color, we recommend using a
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 -
                                        **text editor** instead of **Inkscape**. However, please note that Inkscape is
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 -
                                        required to render the PNG assets from the SVG files.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        56 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        57 -
                                        Here's an example to change the _accent color_:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        58 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        59 -
                                        1. Open the following SVG files with a **text editor**.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        60 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 -
                                          - `./src/gtk-2.0/assets.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        62 -
                                          - `./src/gtk-2.0/assets-dark.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        63 -
                                          - `./src/gtk/assets.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        64 -
                                          - `./src/gnome-shell/3.18/assets/checkbox.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        65 -
                                          - `./src/gnome-shell/3.18/assets/more-results.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        66 -
                                          - `./src/gnome-shell/3.18/assets/toggle-on.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        67 -
                                          - `./src/gnome-shell/3.18/assets-dark/checkbox.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        68 -
                                          - `./src/gnome-shell/3.18/assets-dark/more-results.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        69 -
                                          - `./src/gnome-shell/3.18/assets-dark/toggle-on.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        70 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        71 -
                                        2. Search `#FF4081` (default accent color) and replace with your favorite color.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        72 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        73 -
                                          > The recommended color palette is: https://material.io/guidelines/style/color.html#color-color-palette
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        74 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        75 -
                                        3. Run `./render-assets.sh` to render the PNG assets for gtk2 and gtk3.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        76 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        77 -
                                          > Note: `inkscape` and `optipng` must be installed to run the script.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        78 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        79 -
                                        ## Changing the color scheme with script
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 +
                                        ### With script
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            54  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            55  
                                            To easily change the color scheme, you can use the `change_color.sh` script (or
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            56  
                                            just use the [oomox](https://github.com/actionless/oomox) app).
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            57  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            58  
                                            Originally `change_color.sh` (and the `scripts/` dir) was implemented for oomox,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        85 -
                                        but you can also run it on the command line without oomox like this:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        59 +
                                        but you can also run it on the command line without the app as follows:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            60  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        87 -
                                        > Note: This script only supports GTK2 and GTK3 for now.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 +
                                        > Note: This script doesn't support Chrome extensions for now.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            62  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            63  
                                            For `bash`:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            64  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -98,6 +72,36 @@ For `fish`:

                                
                                
                                
                            
                                
                                    
                                        
                                            72  
                                            ./change_color.sh -o my-test-theme (echo -e "BG=F5F5F5\nFG=000000\nMENU_BG=FFFFFF\nMENU_FG=000000\nSEL_BG=42A5F5\nSEL_FG=FFFFFF\nTXT_BG=FFFFFF\nTXT_FG=000000\nBTN_BG=FAFAFA\nBTN_FG=000000\nACCENT_BG=FF4081\n" | psub)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            73  
                                            ```
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            74  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        75 +
                                        ### Manually
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        76 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        77 +
                                        If you want to change the color scheme in more detail, edit the following files
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        78 +
                                        that define color:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        79 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        80 +
                                        - `src/_sass/_color-palette.scss`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        81 +
                                        - `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`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        86 +
                                        - `src/gtk/assets.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        87 +
                                        - `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`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        91 +
                                        - `src/unity/*.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        92 +
                                        - `src/unity/assets{,-light}/*.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        93 +
                                        - `src/xfwm4/assets{,-light}/*.svg`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        94 +
                                        - `src/xfwm4/assets{,-light}/themerc`
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        95 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        96 +
                                        NOTES:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        97 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        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.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        102 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        103 +
                                        After all the steps, run `./parse-sass.sh`.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        104 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            105  
                                            ## Useful Links
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            106  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            107  
                                            #### Upstream theme sources