WIP: Offer a dark mode if indicated by the operating system

Many operating systems let users choose between light and dark themes
directly in the system settings. Web browsers can react to that via a
@media query, which we do here.

This commit draws heavily on the excellent guidance provided in
https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ as well
as on SASS' `@mixin` feature (for more details, see
https://sass-lang.com/documentation/at-rules/mixin/).

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

assets/sass/application.scss

@@ -26,6 +26,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
 @import 'book';
 @import 'book2';
 @import 'lists';
+@import 'dark-mode';
 
 code {
   display: inline;
@@ -48,28 +49,4 @@ pre {
 
 .d-flex{
   display: flex;
-}
-
-html {
-  --orange:                       #{$orange};
-  --orange-darker-5:              #{darken($orange, 5%)};
-  --blue:                         #{$blue};
-  --font-color:                   #{$font-color};
-  --font-color-lighter-20:        #{lighten($font-color, 20%)};
-  --light-font-color:             #{$light-font-color};
-  --light-font-color-darker-10:   #{darken($light-font-color, 10%)};
-  --light-font-color-darker-25:   #{darken($light-font-color, 25%)};
-  --light-font-color-darker-35:   #{darken($light-font-color, 35%)};
-  --light-font-color-darker-55:   #{darken($light-font-color, 55%)};
-  --light-font-color-lighter-20:  #{lighten($light-font-color, 20%)};
-  --link-color:                   #{$link-color};
-  --link-hover-color:             #{lighten($link-color, 10%)};
-  --fixed-width-font-color:       #{$fixed-width-font-color};
-  --base-border-color:            #{$base-border-color};
-  --base-border-color-darker-8:   #{darken($base-border-color, 8%)};
-  --base-border-color-lighter-10: #{lighten($base-border-color, 10%)};
-  --callout-color:                #{$callout-color};
-
-  --black-3:                      #{$black-3};
-  --main-bg:                      #{$main-bg};
 }

assets/sass/dark-mode.css

@@ -0,0 +1,58 @@
+@mixin mode($mode: light, $class: "") {
+    // Palette
+    $orange:                  #f14e32;
+    $blue:                    #009099;
+    $font-color:              #4e443c;
+    $light-font-color:        #9a9994;
+    $link-color:              #0388a6;
+    $fixed-width-font-color:  #4e443c;
+    $base-border-color:       #d8d7cf;
+    $callout-color:           #e9e8e0;
+    $black-3:                 #333333;
+    $main-bg:                 #fcfcfa;
+
+    @if $mode == dark {
+        $orange:                  #d1432a;
+        $blue:                    #007a7e;
+        $font-color:              #efefefbf;
+        $light-font-color:        #7a7972;
+        $link-color:              #579cab;
+        $fixed-width-font-color:  #3c3632;
+        $base-border-color:       #b3b2a7;
+        $callout-color:           #000000;
+        $black-3:                 #cccccc;
+        $main-bg:                 #000000;
+    }
+
+    body#{$class} {
+        --orange:                       #{$orange};
+        --orange-darker-5:              #{darken($orange, 5%)};
+        --blue:                         #{$blue};
+        --font-color:                   #{$font-color};
+        --font-color-lighter-20:        #{lighten($font-color, 20%)};
+        --light-font-color:             #{$light-font-color};
+        --light-font-color-darker-10:   #{darken($light-font-color, 10%)};
+        --light-font-color-darker-25:   #{darken($light-font-color, 25%)};
+        --light-font-color-darker-35:   #{darken($light-font-color, 35%)};
+        --light-font-color-darker-55:   #{darken($light-font-color, 55%)};
+        --light-font-color-lighter-20:  #{lighten($light-font-color, 20%)};
+        --link-color:                   #{$link-color};
+        --link-hover-color:             #{lighten($link-color, 10%)};
+        --fixed-width-font-color:       #{$fixed-width-font-color};
+        --base-border-color:            #{$base-border-color};
+        --base-border-color-darker-8:   #{darken($base-border-color, 8%)};
+        --base-border-color-lighter-10: #{lighten($base-border-color, 10%)};
+        --callout-color:                #{$callout-color};
+
+        --black-3:                      #{$black-3};
+        --main-bg:                      #{$main-bg};
+    }
+}
+
+@include mode
+@include mode($mode: dark, $class: ".dark-mode")
+
+@media screen and (prefers-color-scheme: dark) {
+    @include mode($mode: dark)
+    @include mode($mode: light, $class: ".light-mode")
+}

assets/sass/variables.scss

@@ -1,15 +1,3 @@
-// Palette
-$orange:                  #f14e32;
-$blue:                    #009099;
-$font-color:              #4e443c;
-$light-font-color:        #9a9994;
-$link-color:              #0388a6;
-$fixed-width-font-color:  #4e443c;
-$base-border-color:       #d8d7cf;
-$callout-color:           #e9e8e0;
-$black-3:                 #333333;
-$main-bg:                 #fcfcfa;
-
 // breakpoints
 $mobile-xs: 480px;
 $mobile-s: 576px;