HACKING.md: Add "How to change the assets color"

HACKING.md

@@ -41,11 +41,62 @@ You can read about SASS at http://sass-lang.com/documentation/. Once you make yo

                                
                                
                                
                            
                                
                                    
                                        
                                            41  
                                            edit. This is done by running `bundle exec sass --watch --sourcemap=none .` If sass is out of date, or is
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            42  
                                            missing, you can install it with `bundle install`.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            43  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 +
                                        How to change the assets color
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 +
                                        ------------------------------
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 +
                                        To keep it maintainable SVG files are basically edited on text-based.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 +
                                        So if you just want to change the SVG assets color, I recommend using a **text editor** instead of **Inkscape**.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 +
                                        But please note that in some cases Inkscape is needed to render PNG assets.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 +
                                        Here is an example to change the _accent color_:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 +
                                        1. Open the following `.svg` files with a **text editor**.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        56 +
                                          - ./src/gtk-2.0/assets.svg
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        57 +
                                          - ./src/gtk-2.0/assets-dark.svg
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        58 +
                                          - ./src/gtk-3.0/gtk-common/assets.svg
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        59 +
                                          - ./src/gnome-shell/3.18/assets/checkbox.svg
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        60 +
                                          - ./src/gnome-shell/3.18/assets/more-results.svg
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 +
                                          - ./src/gnome-shell/3.18/assets/toggle-on.svg
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        62 +
                                          - ./src/gnome-shell/3.18/assets-dark/checkbox.svg
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        63 +
                                          - ./src/gnome-shell/3.18/assets-dark/more-results.svg
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        64 +
                                          - ./src/gnome-shell/3.18/assets-dark/toggle-on.svg
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        65 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        66 +
                                        2. Search `#FF4081` (default accent color) and replace with your favorite color.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        67 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        68 +
                                          - The recommended color palette is: https://material.io/guidelines/style/color.html#color-color-palette
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        69 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        70 +
                                        3. For gtk2 and gtk3, delete all png assets before redrawing them.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        71 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        72 +
                                          ```sh
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        73 +
                                          rm -v ./src/gtk-2.0/assets/*.png
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        74 +
                                          rm -v ./src/gtk-2.0/assets-dark/*.png
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        75 +
                                          rm -v ./src/gtk-3.0/gtk-common/assets/*.png
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        76 +
                                          ```
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        77 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        78 +
                                        4. Render png assets with scripts. (Inkscape is required to run the scripts.)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        79 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        80 +
                                          - for gtk2:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        81 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        82 +
                                            ```sh
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        83 +
                                            cd ./src/gtk-2.0
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        84 +
                                            ./render-assets.sh
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        85 +
                                            ./render-assets-dark.sh
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        86 +
                                            ```
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        87 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        88 +
                                          - for gtk3:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        89 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        90 +
                                            ```sh
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        91 +
                                            cd ./src/gtk-3.0/gtk-common
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        92 +
                                            ./render-assets.sh
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        93 +
                                            ```
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        94 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            95  
                                            Useful Links
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            96  
                                            ------------
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            97  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            98  
                                            Upstream theme sources:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 -
                                        - [GTK+ 3 or 4](https://github.com/GNOME/gtk/tree/master/gtk/theme/Adwaita)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        99 +
                                        - [GTK+ 4](https://github.com/GNOME/gtk/tree/master/gtk/theme/Adwaita)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            100  
                                              - [3.22.x](https://github.com/GNOME/gtk/tree/gtk-3-22/gtk/theme/Adwaita)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            101  
                                              - [3.20.x](https://github.com/GNOME/gtk/tree/gtk-3-20/gtk/theme/Adwaita)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            102  
                                              - [3.18.x](https://github.com/GNOME/gtk/tree/gtk-3-18/gtk/theme/Adwaita)