Add adaptive skin: solarized (#594)

Merge pull request 594

Author: sandervoerman

README.md

@@ -4,7 +4,7 @@
 
 ***Disclaimer:** The information here may vary depending on the version you're using. Please refer to the `README.md` bundled
 within the theme-gem for information specific to your version or by pointing your browser to the Git tag corresponding to your
-version. e.g. https://github.com/jekyll/minima/blob/v2.5.0/README.md*  
+version. e.g. https://github.com/jekyll/minima/blob/v2.5.0/README.md*
 *Running `bundle show minima` will provide you with the local path to your current theme version.*
 
 
@@ -174,10 +174,16 @@ Minima 2.0      | Minima 3.0
 
 ##### Available skins
 
-- classic
-- dark
-- solarized
-- solarized-dark
+Skin setting    | Description
+--------------- | -----------
+classic         | Default, light color scheme.
+dark            | Dark variant of the classic skin.
+solarized       | *Adaptive skin* for [solarized](https://github.com/solarized) color scheme skins.
+solarized-light | Light variant of solarized color scheme.
+solarized-dark  | Dark variant of solarized color scheme.
+
+*:bulb: Adaptive skins switch between the "light" and "dark" variants based on the user's operating system setting or browser setting
+(via CSS Media Query [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)).*
 
 ### Customize navigation links
 

_sass/minima/skins/solarized-dark.scss

@@ -1,4 +1,5 @@
 @charset "utf-8";
 
+$sol-is-auto: false;
 $sol-is-dark: true;
 @import "minima/skins/solarized";

_sass/minima/skins/solarized-light.scss

@@ -0,0 +1,4 @@
+@charset "utf-8";
+
+$sol-is-auto: false;
+@import "minima/skins/solarized";

_sass/minima/skins/solarized.scss

@@ -5,8 +5,10 @@
 // Created by Sander Voerman <mailto:[email protected]> using the Solarized
 // color scheme by Ethan Schoonover <https://ethanschoonover.com/solarized>.
 
-// This style sheet implements two options for the minima.skin setting:
-// "solarized" for light mode and "solarized-dark" for dark mode.
+// This style sheet implements three options for the minima.skin setting:
+// "solarized-light" for light mode, "solarized-dark" for dark mode, and
+// "solarized" for light or dark mode depending on user preference.
+$sol-is-auto: true !default;
 $sol-is-dark: false !default;
 
 
@@ -31,26 +33,85 @@ $sol-blue:     #268bd2;  // 55 -10 -45
 $sol-cyan:     #2aa198;  // 60 -35 -05
 $sol-green:    #859900;  // 60 -20  65
 
+
+// Mixed colors
+// ------------
+// While not part of the original Solarized base tones, these derived tones
+// are meant to replicate the visual style of the classic skin. They should
+// not be used in cases where sufficiently contrasting colors are needed.
+
+$sol-light-mix1:  mix($sol-base1, $sol-base3);
+$sol-light-mix2:  mix($sol-blue, $sol-base00);
+$sol-light-mix3:  mix($sol-base2, $sol-base3);
+$sol-dark-mix1:   mix($sol-base01, $sol-base03);
+$sol-dark-mix2:   mix($sol-blue, $sol-base0);
+$sol-dark-mix3:   mix($sol-base02, $sol-base03);
+
+
+// Mode selection
+// --------------
+
 $sol-mono3:    $sol-base3;
 $sol-mono2:    $sol-base2;
 $sol-mono1:    $sol-base1;
 $sol-mono00:   $sol-base00;
 $sol-mono01:   $sol-base01;
+$sol-mix1:     $sol-light-mix1;
+$sol-mix2:     $sol-light-mix2;
+$sol-mix3:     $sol-light-mix3;
 
 @if $sol-is-dark {
   $sol-mono3:  $sol-base03;
   $sol-mono2:  $sol-base02;
   $sol-mono1:  $sol-base01;
   $sol-mono00: $sol-base0;
   $sol-mono01: $sol-base1;
+  $sol-mix1:   $sol-dark-mix1;
+  $sol-mix2:   $sol-dark-mix2;
+  $sol-mix3:   $sol-dark-mix3;
+}
+
+@if $sol-is-auto {
+  :root {
+    --solarized-mono3:  #{$sol-base3};
+    --solarized-mono2:  #{$sol-base2};
+    --solarized-mono1:  #{$sol-base1};
+    --solarized-mono00: #{$sol-base00};
+    --solarized-mono01: #{$sol-base01};
+    --solarized-mix1:   #{$sol-light-mix1};
+    --solarized-mix2:   #{$sol-light-mix2};
+    --solarized-mix3:   #{$sol-light-mix3};
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --solarized-mono3:  #{$sol-base03};
+      --solarized-mono2:  #{$sol-base02};
+      --solarized-mono1:  #{$sol-base01};
+      --solarized-mono00: #{$sol-base0};
+      --solarized-mono01: #{$sol-base1};
+      --solarized-mix1:   #{$sol-dark-mix1};
+      --solarized-mix2:   #{$sol-dark-mix2};
+      --solarized-mix3:   #{$sol-dark-mix3};
+    }
+  }
+
+  $sol-mono3:  var(--solarized-mono3);
+  $sol-mono2:  var(--solarized-mono2);
+  $sol-mono1:  var(--solarized-mono1);
+  $sol-mono00: var(--solarized-mono00);
+  $sol-mono01: var(--solarized-mono01);
+  $sol-mix1:   var(--solarized-mix1);
+  $sol-mix2:   var(--solarized-mix2);
+  $sol-mix3:   var(--solarized-mix3);
 }
 
 
 // Minima color variables
 // ----------------------
 
 $brand-color:           $sol-mono1 !default;
-$brand-color-light:     mix($sol-mono1, $sol-mono3) !default;
+$brand-color-light:     $sol-mix1 !default;
 $brand-color-dark:      $sol-mono00 !default;
 
 $site-title-color:      $sol-mono00 !default;
@@ -60,15 +121,15 @@ $background-color:      $sol-mono3 !default;
 $code-background-color: $sol-mono2 !default;
 
 $link-base-color:       $sol-blue !default;
-$link-visited-color:    mix($sol-blue, $sol-mono00) !default;
+$link-visited-color:    $sol-mix2 !default;
 $link-hover-color:      $sol-mono00 !default;
 
 $border-color-01:       $brand-color-light !default;
 $border-color-02:       $sol-mono1 !default;
 $border-color-03:       $sol-mono00 !default;
 
 $table-text-color:      $sol-mono00 !default;
-$table-zebra-color:     mix($sol-mono2, $sol-mono3) !default;
+$table-zebra-color:     $sol-mix3 !default;
 $table-header-bg-color: $sol-mono2 !default;
 $table-header-border:   $sol-mono1 !default;
 $table-border-color:    $sol-mono1 !default;