Add dark mode configuration flag

exampleSite/config.toml

@@ -8,6 +8,7 @@ pygmentsUseClasses = true
 
 [params]
   description = "Your site description"
+  dark = "auto"
   copyright = "Copyright © 2020 Your Name"
   highlight = true
 

layouts/partials/css/dark.css

@@ -0,0 +1,39 @@
+{{ if not (eq .Site.Params.dark "on") -}}
+@media (prefers-color-scheme: dark) {
+{{ end -}}
+body {
+    color: #ebebeb;
+    background: #121212;
+}
+
+header#banner a {
+    color: #e0e0e0;
+    text-decoration: none;
+}
+
+header#banner nav ul li a {
+    color: #cccccc;
+}
+
+main#content a {
+    color: #00b1ed;
+}
+
+main#content p {
+    color: #f5f5f5;
+}
+
+main#content ul#posts small {
+    color: #a7a7a7;
+}
+
+main#content ul#posts li a:hover {
+    color: #21c7ff;
+}
+
+main#content header#post-header time {
+    color: #a7a7a7;
+}
+{{- if not (eq .Site.Params.dark "on") -}}
+}
+{{- end -}}

layouts/partials/css/main.css

@@ -17,13 +17,6 @@ body {
     line-height: 1.6;
 }
 
-@media (prefers-color-scheme: dark) {
-    body {
-        color: #ebebeb;
-        background: #121212;
-    }
-}
-
 header#banner {
     margin: 25px 0;
 }
@@ -65,28 +58,11 @@ header#banner nav ul li a {
     color: #454545;
 }
 
-@media (prefers-color-scheme: dark) {
-    header#banner a {
-        color: #e0e0e0;
-        text-decoration: none;
-    }
-
-    header#banner nav ul li a {
-        color: #cccccc;
-    }
-}
-
 main#content a {
     color: #007dfa;
     text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
-    main#content a {
-        color: #00b1ed;
-    }
-}
-
 main#content a:hover {
     text-decoration: underline;
 }
@@ -96,12 +72,6 @@ main#content p {
     margin: 16px 0;
 }
 
-@media (prefers-color-scheme: dark) {
-    main#content p {
-        color: #f5f5f5;
-    }
-}
-
 main#content h1,
 main#content h2,
 main#content h3,
@@ -146,12 +116,6 @@ main#content ul#posts small {
     margin-left: 10px;
 }
 
-@media (prefers-color-scheme: dark) {
-    main#content ul#posts small {
-        color: #a7a7a7;
-    }
-}
-
 main#content ul#posts li a {
     text-decoration: none;
 }
@@ -164,12 +128,6 @@ main#content ul#posts li a:hover small {
     color: inherit;
 }
 
-@media (prefers-color-scheme: dark) {
-    main#content ul#posts li a:hover {
-        color: #21c7ff;
-    }
-}
-
 /* single.html styles */
 main#content header#post-header h1 {
     display: block;
@@ -184,12 +142,6 @@ main#content header#post-header time {
     color: #767676;
 }
 
-@media (prefers-color-scheme: dark) {
-    main#content header#post-header time {
-        color: #a7a7a7;
-    }
-}
-
 main#content img {
     max-width: 100%;
     margin: 0 auto;
@@ -208,7 +160,7 @@ main#content code {
 main#content pre {
     display: block;
     overflow-x: auto;
-    font-size 14px;
+    font-size: 14px;
     font-size: 1.4rem;
     white-space: pre;
     margin: 20px 0;

layouts/partials/head.html

@@ -13,6 +13,13 @@
         {{ partial "css/main.css" . | safeCSS }}
     </style>
 
+    {{ $dark := .Site.Params.dark | default "auto" -}}
+    {{ if not (eq $dark "off") -}}
+    <style type="text/css" media="screen">
+        {{ partial "css/dark.css" . | safeCSS }}
+    </style>
+    {{ end -}}
+
     <style type="text/css" media="(min-width: 770px)">
         {{ partial "css/min770px.css" . | safeCSS }}
     </style>

theme.toml

@@ -3,7 +3,7 @@ license = "MIT"
 licenselink = "https://github.com/LukasJoswiak/etch/blob/master/LICENSE"
 description = "Lightweight Hugo theme with a focus on content"
 homepage = "https://github.com/LukasJoswiak/etch"
-tags = ["simple", "clean", "fast", "blog", "responsive", "dark mode"]
+tags = ["simple", "minimal", "clean", "fast", "blog", "responsive", "dark mode"]
 features = ["fast", "blog", "syntax highlighting", "dark mode"]
 min_version = "0.41"