Darken dark variant slightly

In the recently released Material dark theme guidelines[1], the dark theme has a VERY dark background (#121212) by default. I do think #121212 is too dark on desktop, but it's a great opportunity to darken our dark variant - because after lighting the primary color and separator color on dark variant, the whole dark theme looked lighter than before.

We will use #212121 as the default dark background color, and dark surface colors are derived from it.

This commit also darkens the dark titlebar and panel slightly to match the new color scheme.

[1]: https://material.io/design/color/dark-theme.html

by roundabout, Thursday, 27 June 2019, 15:02:16 (1561647736), pushed by roundabout, Sunday, 11 May 2025, 13:22:40 (1746969760)

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

4466f8dd53db42f36482a956b6c2a633024bb443

src/_sass/_colors.scss

@@ -50,20 +50,20 @@ $primary-dark: #1A73E8;

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $primary-light:                         #8AB4F8;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $primary:                               if($variant == 'light', $primary-dark, $primary-light);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $background:                            if($variant == 'light', #F2F2F2, #282828);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $surface:                               if($variant == 'light', #FFFFFF, #424242);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $base:                                  if($variant == 'light', #FFFFFF, #303030); // semi-surface with no elevation
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $background:                            if($variant == 'light', #F2F2F2, #212121);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $surface:                               if($variant == 'light', #FFFFFF, #3C3C3C);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $base:                                  if($variant == 'light', #FFFFFF, #2C2C2C); // semi-surface with 1dp elevation
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $base-alt:                              if($variant == 'light', #FAFAFA, #2C2C2C);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $os-background:                         #303030;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $os-background:                         #212121;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $tooltip:                               rgba(#616161, 0.9);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $scrim:                                 rgba(black, 0.6);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $scrim-alt:                             rgba(black, 0.3);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $scrim-inverse:                         rgba(white, 0.1);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $titlebar:                              if($topbar == 'dark', #383838, #E0E0E0);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $titlebar-backdrop:                     if($topbar == 'dark', #303030, #D6D6D6);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $panel:                                 if($topbar == 'dark', #212121, $scrim);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $panel-solid:                           if($topbar == 'dark', #212121, #CCCCCC); // for Unity panel which doesn't allow translucent colors
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $titlebar:                              if($topbar == 'dark', #353535, #E0E0E0);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $titlebar-backdrop:                     if($topbar == 'dark', #2C2C2C, #D6D6D6);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $panel:                                 if($topbar == 'dark', #1F1F1F, $scrim);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $panel-solid:                           if($topbar == 'dark', #1F1F1F, #CCCCCC); // for Unity panel which doesn't allow translucent colors
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            //
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // Misc colors

src/gtk-2.0/assets-dark.svg

@@ -43,15 +43,15 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                </linearGradient>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                <linearGradient id="color-background">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              <stop offset="1" stop-color="#282828"/>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              <stop offset="1" stop-color="#212121"/>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                </linearGradient>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                <linearGradient id="color-surface">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              <stop offset="1" stop-color="#424242"/>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              <stop offset="1" stop-color="#3C3C3C"/>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                </linearGradient>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                <linearGradient id="color-base">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              <stop offset="1" stop-color="#303030"/>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              <stop offset="1" stop-color="#2C2C2C"/>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                </linearGradient>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                <linearGradient id="color-base-alt">

src/gtk-2.0/gtkrc

@@ -18,7 +18,7 @@ gtk-color-scheme = "fg_color:#212121\nbg_color:#F2F2F2"

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            # Selected foreground/background
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            gtk-color-scheme = "selected_fg_color:#FFFFFF\nselected_bg_color:#1A73E8"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            # Titlebar foreground/background
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        gtk-color-scheme = "titlebar_fg_color:#FFFFFF\ntitlebar_bg_color:#383838"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        gtk-color-scheme = "titlebar_fg_color:#FFFFFF\ntitlebar_bg_color:#353535"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            # Menus
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            gtk-color-scheme = "menu_color:#FFFFFF"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            # Tooltips foreground/background

src/gtk-2.0/gtkrc-dark

@@ -12,15 +12,15 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            # order to not mess up the dark theme.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            # Text/base
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        gtk-color-scheme = "text_color:#FFFFFF\nbase_color:#303030"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        gtk-color-scheme = "text_color:#FFFFFF\nbase_color:#2C2C2C"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            # Foreground/background
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        gtk-color-scheme = "fg_color:#FFFFFF\nbg_color:#282828"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        gtk-color-scheme = "fg_color:#FFFFFF\nbg_color:#212121"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            # Selected foreground/background
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            gtk-color-scheme = "selected_fg_color:#FFFFFF\nselected_bg_color:#8AB4F8"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            # Titlebar foreground/background
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        gtk-color-scheme = "titlebar_fg_color:#FFFFFF\ntitlebar_bg_color:#383838"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        gtk-color-scheme = "titlebar_fg_color:#FFFFFF\ntitlebar_bg_color:#353535"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            # Menus
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        gtk-color-scheme = "menu_color:#424242"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        gtk-color-scheme = "menu_color:#3C3C3C"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            # Tooltips foreground/background
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            gtk-color-scheme = "tooltip_fg_color:#FFFFFF\ntooltip_bg_color:#616161"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            # Links

src/gtk/assets.svg

@@ -33,7 +33,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                </linearGradient>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                <linearGradient id="color-background-dark">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              <stop offset="1" stop-color="#282828"/>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              <stop offset="1" stop-color="#212121"/>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                </linearGradient>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                <linearGradient id="color-surface">

@@ -41,7 +41,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                </linearGradient>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                <linearGradient id="color-surface-dark">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              <stop offset="1" stop-color="#424242"/>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              <stop offset="1" stop-color="#3C3C3C"/>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                </linearGradient>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                <g id="base-scale-slider">

Information