add dark variant

common/gtk-3.0/3.16/_colors.scss

@@ -2,20 +2,22 @@
 // it gets @if ed depending on $variant
 
 
-$base_color: #ffffff;
-$text_color: #5c616c;
-$bg_color: #f9fafb;
-$fg_color: #5c616c;
+$base_color: if($variant =='light', #ffffff, #272A30);
+$text_color: if($variant == 'light', #5c616c, #D3DAE3);
+$bg_color: if($variant =='light', #f9fafb, #2F343B);
+$fg_color: if($variant =='light', #5c616c, #D3DAE3);
 
 $selected_fg_color: #ffffff;
 $selected_bg_color: #5294E2;
 $selected_borders_color: darken($selected_bg_color, 20%);
-$borders_color: darken($bg_color,9%);
+$borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,8%));
 
-$link_color: darken($selected_bg_color,10%);
-$link_visited_color: darken($selected_bg_color,20%);
+$link_color: if($variant == 'light', darken($selected_bg_color,10%),
+                                     lighten($selected_bg_color,20%));
+$link_visited_color: if($variant == 'light', darken($selected_bg_color,20%),
+                                     lighten($selected_bg_color,10%));
 
-$selection_mode_bg: transparentize($selected_bg_color, 0.05);
+$selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color);
 $warning_color: #F27835;
 $error_color: #FC4138;
 $success_color: #73d216;
@@ -37,17 +39,20 @@ $tooltip_borders_color: transparentize(white, 0.9);
 
 //insensitive state derived colors
 $insensitive_fg_color: transparentize($fg_color, 0.45);
-$insensitive_bg_color: mix($bg_color, $base_color, 40%);
+$insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%));
 
 
 $entry_bg: $base_color;
-$entry_border: #cfd6e6;
+$entry_border: if($variant == 'light', #cfd6e6, #454a54);
 $entry_focus_border: $selected_bg_color;
 
-$button_bg: lighten($bg_color, 1%);
+$button_bg: if($variant == 'light', lighten($bg_color, 1%), darken($bg_color, 2%));
 $button_border: $entry_border;
 
-$header_bg: if($transparency == 'true', transparentize(#e7e8eb, 0.05), #e7e8eb);
+$header_bg: if($transparency == 'true' and $variant == 'light', transparentize(#e7e8eb, 0.05), #e7e8eb);
+
+@if $variant==dark { $header_bg: if($transparency == 'true', transparentize(#272A30, 0.04), #272A30); }
+
 $header_fg: saturate(transparentize($fg_color, 0.2), 10%);
 
 $dark_sidebar_bg: if($transparency == 'true', $osd_bg_color, opacify($osd_bg_color, 1));

common/gtk-3.0/3.16/_common.scss

@@ -3,6 +3,7 @@
 }
 
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$asset_suffix: if($variant=='dark', '-dark', ''); // use dark assets in dark variant
 
 * {
   background-clip: padding-box;
@@ -1880,13 +1881,13 @@ GtkSwitch {
     // load switch troughs from .png files in assets directory
 
     #{$i}GtkSwitch.trough#{$k} {
-      background-image: -gtk-scaled(url("assets/switch#{$l}#{$j}.png"),url("assets/switch#{$l}#{$j}@2.png"));
+      background-image: -gtk-scaled(url("assets/switch#{$l}#{$j}#{$asset_suffix}.png"),url("assets/switch#{$l}#{$j}#{$asset_suffix}@2.png"));
     }
 
     // load switch sliders from .png files in assets directory
 
     //#{$i}GtkSwitch.slider#{$k} {
-    //  background-image: -gtk-scaled(url("assets/switch-slider#{$l}#{$j}.png"),url("assets/switch-slider#{$l}#{$j}@2.png"));
+    //  background-image: -gtk-scaled(url("assets/switch-slider#{$l}#{$j}#{$asset_suffix}.png"),url("assets/switch-slider#{$l}#{$j}#{$asset_suffix}@2.png"));
     //}
   }
 }
@@ -1909,8 +1910,8 @@ GtkSwitch {
                   (':checked', '-checked'),
                   (':checked:insensitive','-checked-insensitive') {
     .#{$w}#{$s} {
-      -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}.png"),
-                                    url("assets/#{$a}#{$as}@2.png"));
+      -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
+                                    url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
     }
     // the borders of checks and radios are
     // too similar in luminosity to the selected background color, hence
@@ -1928,8 +1929,8 @@ GtkSwitch {
                   (':checked', '-checked-selectionmode') {
   GtkIconView.view.check#{$s},
   GtkFlowBox.view.check#{$s} {
-    -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
-                                    url("assets/checkbox#{$as}@2.png"));
+    -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
+                                    url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
     background-color: transparent;
   }
 }
@@ -2706,20 +2707,20 @@ GtkVolumeButton.button { padding: 8px; }
       &:backdrop { opacity: 1; }
     }
 
-    &.close { background-image: -gtk-scaled(url('assets/titlebutton-close.png'),url('assets/titlebutton-close@2.png')); }
-    &.close:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-close-backdrop.png'),url('assets/titlebutton-close-backdrop@2.png')); }
-    &.close:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-hover.png'),url('assets/titlebutton-close-hover@2.png')); }
-    &.close:active { background-image: -gtk-scaled(url('assets/titlebutton-close-active.png'),url('assets/titlebutton-close-active@2.png')); }
+    &.close { background-image: -gtk-scaled(url('assets/titlebutton-close#{$asset_suffix}.png'),url('assets/titlebutton-close#{$asset_suffix}@2.png')); }
+    &.close:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-close-backdrop#{$asset_suffix}.png'),url('assets/titlebutton-close-backdrop#{$asset_suffix}@2.png')); }
+    &.close:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-hover#{$asset_suffix}.png'),url('assets/titlebutton-close-hover#{$asset_suffix}@2.png')); }
+    &.close:active { background-image: -gtk-scaled(url('assets/titlebutton-close-active#{$asset_suffix}.png'),url('assets/titlebutton-close-active#{$asset_suffix}@2.png')); }
 
-    &.maximize { background-image: -gtk-scaled(url('assets/titlebutton-max.png'),url('assets/titlebutton-max@2.png')); }
-    &.maximize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-max-backdrop.png'),url('assets/titlebutton-max-backdrop@2.png')); }
-    &.maximize:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-hover.png'),url('assets/titlebutton-max-hover@2.png')); }
-    &.maximize:active { background-image: -gtk-scaled(url('assets/titlebutton-max-active.png'),url('assets/titlebutton-max-active@2.png')); }
+    &.maximize { background-image: -gtk-scaled(url('assets/titlebutton-max#{$asset_suffix}.png'),url('assets/titlebutton-max#{$asset_suffix}@2.png')); }
+    &.maximize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-max-backdrop#{$asset_suffix}.png'),url('assets/titlebutton-max-backdrop#{$asset_suffix}@2.png')); }
+    &.maximize:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-hover#{$asset_suffix}.png'),url('assets/titlebutton-max-hover#{$asset_suffix}@2.png')); }
+    &.maximize:active { background-image: -gtk-scaled(url('assets/titlebutton-max-active#{$asset_suffix}.png'),url('assets/titlebutton-max-active#{$asset_suffix}@2.png')); }
 
-    &.minimize { background-image: -gtk-scaled(url('assets/titlebutton-min.png'),url('assets/titlebutton-min@2.png')); }
-    &.minimize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-min-backdrop.png'),url('assets/titlebutton-min-backdrop@2.png')); }
-    &.minimize:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-hover.png'),url('assets/titlebutton-min-hover@2.png')); }
-    &.minimize:active { background-image: -gtk-scaled(url('assets/titlebutton-min-active.png'),url('assets/titlebutton-min-active@2.png')); }
+    &.minimize { background-image: -gtk-scaled(url('assets/titlebutton-min#{$asset_suffix}.png'),url('assets/titlebutton-min#{$asset_suffix}@2.png')); }
+    &.minimize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-min-backdrop#{$asset_suffix}.png'),url('assets/titlebutton-min-backdrop#{$asset_suffix}@2.png')); }
+    &.minimize:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-hover#{$asset_suffix}.png'),url('assets/titlebutton-min-hover#{$asset_suffix}@2.png')); }
+    &.minimize:active { background-image: -gtk-scaled(url('assets/titlebutton-min-active#{$asset_suffix}.png'),url('assets/titlebutton-min-active#{$asset_suffix}@2.png')); }
   }
 }
 

common/gtk-3.0/3.16/assets.txt

@@ -48,3 +48,37 @@ titlebutton-min
 titlebutton-min-backdrop
 titlebutton-min-hover
 titlebutton-min-active
+checkbox-checked-dark
+checkbox-checked-insensitive-dark
+checkbox-unchecked-dark
+checkbox-unchecked-insensitive-dark
+checkbox-mixed-dark
+checkbox-mixed-insensitive-dark
+checkbox-checked-selectionmode-dark
+checkbox-selectionmode-dark
+radio-checked-dark
+radio-checked-insensitive-dark
+radio-unchecked-dark
+radio-unchecked-insensitive-dark
+radio-mixed-dark
+radio-mixed-insensitive-dark
+switch-dark
+switch-active-dark
+switch-insensitive-dark
+switch-active-insensitive-dark
+switch-header-dark
+switch-active-header-dark
+switch-insensitive-header-dark
+switch-active-insensitive-header-dark
+titlebutton-close-dark
+titlebutton-close-backdrop-dark
+titlebutton-close-hover-dark
+titlebutton-close-active-dark
+titlebutton-max-dark
+titlebutton-max-backdrop-dark
+titlebutton-max-hover-dark
+titlebutton-max-active-dark
+titlebutton-min-dark
+titlebutton-min-backdrop-dark
+titlebutton-min-hover-dark
+titlebutton-min-active-dark

common/gtk-3.0/3.16/gtk-contained-dark.scss

@@ -0,0 +1,16 @@
+// General guidelines:
+// - very unlikely you want to edit something else than _common.scss
+// - keep the number of defined colors to a minimum, use the color blending functions if
+//   you need a subtle shade
+
+$variant: 'dark';
+$transparency: 'true';
+
+@import 'colors';
+@import 'drawing';
+@import 'common';
+@import 'applications';
+@import 'unity';
+@import 'granite';
+@import 'transparent_widgets';
+@import 'colors-public';

common/gtk-3.0/3.16/gtk-contained-solid-dark.scss

@@ -0,0 +1,16 @@
+// General guidelines:
+// - very unlikely you want to edit something else than _common.scss
+// - keep the number of defined colors to a minimum, use the color blending functions if
+//   you need a subtle shade
+
+$variant: 'dark';
+$transparency: 'false';
+
+@import 'colors';
+@import 'drawing';
+@import 'common';
+@import 'applications';
+@import 'unity';
+@import 'granite';
+@import 'transparent_widgets';
+@import 'colors-public';

common/gtk-3.0/3.16/gtk-contained-solid.css

@@ -794,11 +794,11 @@ GtkComboBox {
     padding: 0 12px; }
   .header-bar.selection-mode {
     color: #ffffff;
-    background-color: rgba(82, 148, 226, 0.95);
-    border-color: rgba(65, 137, 223, 0.95);
+    background-color: #5294E2;
+    border-color: #4189df;
     box-shadow: none; }
     .header-bar.selection-mode:backdrop {
-      background-color: rgba(82, 148, 226, 0.95);
+      background-color: #5294E2;
       color: rgba(255, 255, 255, 0.6); }
     .header-bar.selection-mode .button {
       color: #ffffff;

common/gtk-3.0/3.16/gtk-contained-solid.scss

@@ -3,6 +3,7 @@
 // - keep the number of defined colors to a minimum, use the color blending functions if
 //   you need a subtle shade
 
+$variant: 'light';
 $transparency: 'false';
 
 @import 'colors';

common/gtk-3.0/3.16/gtk-contained.scss

@@ -3,6 +3,7 @@
 // - keep the number of defined colors to a minimum, use the color blending functions if
 //   you need a subtle shade
 
+$variant: 'light';
 $transparency: 'true';
 
 @import 'colors';

common/gtk-3.0/3.16/gtk-dark.css

@@ -0,0 +1 @@
+@import url("gtk-contained-dark.css");