A fork of the Materia GTK theme.

Important information: Google announced that, from September 2026, Android devices will require ALL apps to be signed by Google, effectively leading to an iOS situation. Value your right to a computer that does what you want; do not tolerate this monopolistic practice! Contact me if you don't understand why it is bad. Click to learn more.

gtk3: Move all color variables to _colors.scss (fix #183)

by roundabout, Tuesday, 12 December 2017, 17:51:14 (1513101074), pushed by roundabout, Sunday, 11 May 2025, 13:22:17 (1746969737)

Author identity: nana-4 <hnmaigo@gmail.com>

13c30f7252c7e22a203ffc42514f8ff3ca0bbc05

src/gtk-3.0/3.22/sass/_colors.scss

@@ -51,7 +51,7 @@ $titlebar_bg_color: if($titlebar == 'dark', if($variant == 'light', $blue_gr

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $alt_titlebar_bg_color: if($titlebar == 'dark', $blue_grey_800, mix($grey_300, $grey_400, 50%));
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $panel_bg_color:        rgba($black, $middle_opacity);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $solid_panel_bg_color:  if($titlebar == 'dark', $blue_grey_900, $panel_bg_color);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $unity_panel_bg_color:  if($titlebar == 'dark', $blue_grey_900, mix($grey_300, $grey_400, 50%)); // translucent colors cannot be used for Unity panel
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $unity_panel_bg_color:  if($titlebar == 'dark', $blue_grey_900, mix($grey_300, $grey_400, 50%)); // for Unity panel which cannot use translucent colors
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $alt_panel_bg_color:    rgba($black, $lower_opacity);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $fill_color:      gtkalpha(currentColor, $lower_opacity);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -80,12 +80,19 @@ $warning_bg_color: $orange_400;

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $error_bg_color:    $red_400;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $border_color:             if($variant == 'light', rgba($black, 0.12), rgba($black, 0.26));
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $alt_border_color:         rgba($black, 0.2); // for non-native GTK+ apps (e.g. Firefox and Chrome)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $highlight_color:          if($variant == 'light', rgba($white, 0.4),  rgba($white, 0.1));
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $titlebar_highlight_color: if($titlebar == 'dark', rgba($white, 0.1),  rgba($white, 0.4));
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $unity_highlight_color:    if($titlebar == 'dark', rgba($white, 0.1),  rgba($white, 0.2));
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $alt_highlight_color:      rgba($white, 0.2); // for selection-mode headerbar which colored with primary color
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $alt_highlight_color:      rgba($white, 0.2); // for selection-mode headerbar which colored with $primary_color
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $titlebar_indicator_color: if($titlebar == 'dark', currentColor, $primary_color);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // for Electron/Atom menu which cannot use translucent colors
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $opaque_fg_color:           if($variant == 'light', $grey_900, $white);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $opaque_secondary_fg_color: if($variant == 'light', $grey_600, mix($white, $base_color, percentage(0.7)));
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $opaque_disabled_fg_color:  if($variant == 'light', $grey_500, mix($white, $base_color, percentage(0.5)));
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $opaque_divider_color:      if($variant == 'light', $grey_300, mix($white, $base_color, percentage(0.12)));
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // FIXME: gtk's @placeholder_text_color API really should use $secondary_fg_color,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // but it doesn't work with translucent colors. So we use opaque colors instead.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $placeholder_text_color: if($variant == 'light',
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/gtk-3.0/3.22/sass/_common.scss

@@ -1575,11 +1575,6 @@ menuitem {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // Electron/Atom render all translucent colors in opaque colors.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // It's a very critical issue for this theme and should be fixed by upstream...
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            .popup:not(.csd) menu {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          $opaque_fg_color:           if($variant == 'light', $grey_900, $white);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          $opaque_secondary_fg_color: if($variant == 'light', $grey_600, mix($white, $base_color, percentage(0.7)));
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          $opaque_disabled_fg_color:  if($variant == 'light', $grey_500, mix($white, $base_color, percentage(0.5)));
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          $opaque_divider_color:      if($variant == 'light', $grey_300, mix($white, $base_color, percentage(0.12)));
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              menuitem {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                color: $opaque_fg_color;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -1588,7 +1583,7 @@ menuitem {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                &:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          // TODO: not working this, where/how i can set the accelerators?
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          // FIXME: not working this
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              accelerator { color: $opaque_secondary_fg_color; }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/gtk-3.0/3.22/sass/apps/_third-party.scss

@@ -41,23 +41,21 @@ tooltip.chromium { background-color: $base_color; }

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            /***********
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                             * Firefox *
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                             ***********/
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $firefox_border_color: rgba($black, 0.2);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            window.background:not(.csd) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              > widget {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                // for the bookmark toolbar's separators
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            > separator { color: $firefox_border_color; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            > separator { color: $alt_border_color; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                // avoid black border
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                > scrollbar { background-clip: border-box; }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                // emphasize borders color
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                > scrollbar,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            > frame > border { border-color: $firefox_border_color; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            > frame > border { border-color: $alt_border_color; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                > entry,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                > button > button {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              border: 1px solid $firefox_border_color;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              border: 1px solid $alt_border_color;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                  border-radius: 2px + 1px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                  box-shadow: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -103,7 +101,7 @@ window.background:not(.csd) {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                  &:disabled { color: $titlebar_disabled_secondary_fg_color; }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            > frame { color: $firefox_border_color; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            > frame { color: $alt_border_color; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                > checkbutton > check,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                > radiobutton > radio {