Automatic dark/light colorschemes (#234)

* Automatic dark/light colorschemes

A new `colorscheme` option is added with the capability to be always dark,
always light, or automatic based on the user's browser setting.  This
makes the `inverted` option superfluous, and therefore deprecated.
Nomenclature of files, variables, etc are changed from `inverted` to
`dark` to reflect this change.

Closes #226.

* Remove inverted option completely

The `inverted` option is now not just deprecated, but removed
completely.

CONTRIBUTORS.md

@@ -48,3 +48,4 @@
 - [Ariejan de Vroom](https://www.devroom.io)
 - [Bobby Lindsey](https://bobbywlindsey.com)
 - [José Mª Escartín](https://github.com/jme52)
+- [John Schroeder](https://blog.schroedernet.software)

assets/scss/_base_dark.scss

@@ -0,0 +1,49 @@
+@mixin base_dark {
+
+  color: $fg-color-dark;
+  background-color: $bg-color-dark;
+
+  a {
+    color: $link-color-dark;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $alt-fg-color-dark;
+  }
+
+  code {
+    background-color: $alt-bg-color-dark;
+    color: $fg-color-dark;
+  }
+
+  pre {
+    code {
+      background-color: inherit;
+      color: inherit;
+    }
+  }
+
+  blockquote {
+    border-left: 2px solid $alt-bg-color-dark;
+  }
+
+  table td, table th {
+    border: 2px solid $alt-fg-color-dark;
+  }
+
+}
+
+body.colorscheme-dark {
+  @include base_dark()
+}
+
+body.colorscheme-auto {
+  @media (prefers-color-scheme: dark) {
+    @include base_dark()
+  }
+}

assets/scss/_base_inverted.scss

@@ -1,39 +0,0 @@
-body.inverted {
-
-  color: $fg-color-inverted;
-  background-color: $bg-color-inverted;
-  
-  a {
-    color: $link-color-inverted;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: $alt-fg-color-inverted;
-  }
-
-  code {
-    background-color: $alt-bg-color-inverted;
-    color: $fg-color-inverted;
-  }
-
-  pre {
-    code {
-      background-color: inherit;
-      color: inherit;
-    }
-  }
-
-  blockquote {
-    border-left: 2px solid $alt-bg-color-inverted;
-  }
-
-  table td, table th {
-    border: 2px solid $alt-fg-color-inverted;
-  }
-
-}

assets/scss/_content_dark.scss

@@ -1,4 +1,4 @@
-body.inverted {
+@mixin content_dark {
 
   .content {
   
@@ -6,10 +6,10 @@ body.inverted {
       ul {
         li {
           .title {
-            color: $fg-color-inverted;
+            color: $fg-color-dark;
             &:hover,
             &:focus {
-              color: $link-color-inverted
+              color: $link-color-dark;
             }
           }
         }
@@ -21,10 +21,10 @@ body.inverted {
         ul {
           li {
             a {
-              color: $fg-color-inverted;
+              color: $fg-color-dark;
               &:hover,
               &:focus {
-                color: $link-color-inverted;
+                color: $link-color-dark;
               }
             }
           }
@@ -34,3 +34,13 @@ body.inverted {
   }
 
 }
+
+body.colorscheme-dark {
+  @include content_dark()
+}
+
+body.colorscheme-auto {
+  @media (prefers-color-scheme: dark) {
+    @include content_dark()
+  }
+}

assets/scss/_footer_dark.scss

@@ -0,0 +1,17 @@
+@mixin footer_dark {
+  .footer {
+    a {
+      color: $link-color-dark;
+    }
+  }
+}
+
+body.colorscheme-dark {
+  @include footer_dark()
+}
+
+body.colorscheme-auto {
+  @media (prefers-color-scheme: dark) {
+    @include footer_dark()
+  }
+}

assets/scss/_footer_inverted.scss

@@ -1,7 +0,0 @@
-body.inverted {
-  .footer {
-    a {
-      color: $link-color-inverted;
-    }
-  }
-}

assets/scss/_navigation_dark.scss

@@ -0,0 +1,54 @@
+@mixin navigation_dark {
+
+
+  .navigation {
+    a, span {
+      color: $fg-color-dark;
+    }
+    a {
+      &:hover,
+      &:focus {
+        color: $link-color-dark;
+      }
+    }
+    .navigation-list {
+      @media only screen and (max-width : 768px) {
+        background-color: $bg-color-dark;
+        border-top: solid 2px $alt-bg-color-dark;
+        border-bottom: solid 2px $alt-bg-color-dark;
+      }
+      .menu-separator {
+        @media only screen and (max-width : 768px) {
+          border-top: 2px solid $fg-color-dark;
+        }
+      }
+    }
+    #menu-toggle {
+      @media only screen and (max-width : 768px) {
+        &:checked + label {
+          color: $alt-bg-color-dark;
+        }
+      }
+    }
+    .menu-button {
+      @media only screen and (max-width : 768px) {
+        color: $fg-color-dark;
+        &:hover,
+        &:focus {
+          color: $link-color-dark;
+        }
+      }
+    }
+  }
+
+}
+
+body.colorscheme-dark {
+  @include navigation_dark()
+}
+
+body.colorscheme-auto {
+  @media (prefers-color-scheme: dark) {
+    @include navigation_dark()
+  }
+}

assets/scss/_navigation_inverted.scss

@@ -1,44 +0,0 @@
-body.inverted {
-
-
-  .navigation {
-    a, span {
-      color: $fg-color-inverted;
-    }
-    a {
-      &:hover,
-      &:focus {
-        color: $link-color-inverted;
-      }
-    }
-    .navigation-list {
-      @media only screen and (max-width : 768px) {
-        background-color: $bg-color-inverted;
-        border-top: solid 2px $alt-bg-color-inverted;
-        border-bottom: solid 2px $alt-bg-color-inverted;
-      }
-      .menu-separator {
-        @media only screen and (max-width : 768px) {
-          border-top: 2px solid $fg-color-inverted;
-        }
-      }
-    }
-    #menu-toggle {
-      @media only screen and (max-width : 768px) {
-        &:checked + label {
-          color: $alt-bg-color-inverted;
-        }
-      }
-    }
-    .menu-button {
-      @media only screen and (max-width : 768px) {
-        color: $fg-color-inverted;
-        &:hover,
-        &:focus {
-          color: $link-color-inverted;
-        }
-      }
-    }
-  }
-
-}

assets/scss/_variables.scss

@@ -10,9 +10,9 @@ $alt-bg-color: #E0E0E0 !default;
 $alt-fg-color: #000 !default;
 $link-color: #1565c0 !default;
 
-// Colors inverted
+// Colors dark
-$bg-color-inverted: #212121 !default;
+$bg-color-dark: #212121 !default;
-$fg-color-inverted: #dadada !default;
+$fg-color-dark: #dadada !default;
-$alt-bg-color-inverted: #424242 !default;
+$alt-bg-color-dark: #424242 !default;
-$alt-fg-color-inverted: #dadada !default;
+$alt-fg-color-dark: #dadada !default;
-$link-color-inverted: #36679f !default;
+$link-color-dark: #36679f !default;

assets/scss/coder-dark.scss

@@ -0,0 +1,5 @@
+@import "variables";
+@import "base_dark";
+@import "content_dark";
+@import "navigation_dark";
+@import "footer_dark";

assets/scss/coder-inverted.scss

@@ -1,5 +0,0 @@
-@import "variables";
-@import "base_inverted";
-@import "content_inverted";
-@import "navigation_inverted";
-@import "footer_inverted";

exampleSite/config.toml

@@ -33,8 +33,12 @@ disqusShortname = "yourdiscussshortname"
 
     rtl = false
 
-    # Use inverted colors
+    # Specify light/dark colorscheme
-    inverted = false
+    # Supported values:
+    # "auto" (use preference set by browser)
+    # "dark" (dark background, light foreground)
+    # "light" (light background, dark foreground) (default)
+    colorscheme = "light"
 
     # Series see also post count
     maxSeeAlsoItems = 5

layouts/_default/baseof.html

@@ -47,14 +47,14 @@
       {{ end }}
     {{ end }}
 
-    {{ if .Site.Params.inverted }}
+    {{ if  or (eq .Site.Params.colorscheme "auto") (eq .Site.Params.colorscheme "dark") }}
       {{ if .Site.IsServer }}
-        {{ $cssOpts := (dict "targetPath" "css/coder-inverted.css" "enableSourceMap" true ) }}
+        {{ $cssOpts := (dict "targetPath" "css/coder-dark.css" "enableSourceMap" true ) }}
-        {{ $styles := resources.Get "scss/coder-inverted.scss" | resources.ExecuteAsTemplate "style.coder-inverted.css" . | toCSS $cssOpts }}
+        {{ $styles := resources.Get "scss/coder-dark.scss" | resources.ExecuteAsTemplate "style.coder-dark.css" . | toCSS $cssOpts }}
         <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
       {{ else }}
-        {{ $cssOpts := (dict "targetPath" "css/coder-inverted.css" ) }}
+        {{ $cssOpts := (dict "targetPath" "css/coder-dark.css" ) }}
-        {{ $styles := resources.Get "scss/coder-inverted.scss" | resources.ExecuteAsTemplate "style.coder-inverted.css" . | toCSS $cssOpts | minify | fingerprint }}
+        {{ $styles := resources.Get "scss/coder-dark.scss" | resources.ExecuteAsTemplate "style.coder-dark.css" . | toCSS $cssOpts | minify | fingerprint }}
         <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous" media="screen" />
       {{ end }}
     {{ end }}
@@ -77,7 +77,13 @@
     {{ hugo.Generator }}
   </head>
 
-  <body class="{{ if .Site.Params.rtl }}rtl{{ end }} {{ if .Site.Params.inverted }}inverted{{ end }}">
+  {{ $csClass := "colorscheme-light" }}
+  {{ if eq .Site.Params.colorscheme "dark" }}
+    {{ $csClass = "colorscheme-dark" }}
+  {{ else if eq .Site.Params.colorscheme "auto" }}
+    {{ $csClass = "colorscheme-auto" }}
+  {{ end }}
+  <body class="{{ $csClass }}{{ if .Site.Params.rtl }} rtl{{ end }}">
     <main class="wrapper">
       {{ partial "header.html" . }}
 

stackbit.yaml

@@ -68,8 +68,8 @@ models:
             name: commit
           - type: boolean
             name: rtl
-          - type: boolean
+          - type: string
-            name: inverted
+            name: colorscheme
           - type: number
             name: maxSeeAlsoItems
           - type: list