Add dark mode toggle to site header

layouts/partials/head.html

@@ -18,6 +18,9 @@
 				{{- end -}}
 			</ul>
 		</nav>
+                {{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}}
+                <span class="scheme-toggle"><a href="#" id="scheme-toggle"></a>
+                {{- end -}}
 	</div>
 
 	<nav class="nav">

layouts/partials/header.html

@@ -28,9 +28,9 @@
 		<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customCSS }}" />
 	{{ end }}
 	{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}}
-		<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
+		<link id="dark-scheme" rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
 		{{- if isset .Site.Params "customdarkcss" }}
-			<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customDarkCSS }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
+			<link id="dark-scheme" rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customDarkCSS }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
 		{{- end }}
 	{{- end }}
 

static/css/main.css

@@ -270,6 +270,24 @@ ul {
     max-height: 15px;
 }
 
+.header .site-description .scheme-toggle {
+    height: 100%;
+}
+
+.header .site-description .scheme-toggle a svg {
+    max-height: 15px;
+}
+
+.header .site-description .scheme-toggle a.dark svg {
+    fill: #f8e04f;
+    color: #f8e04f;
+}
+
+.header .site-description .scheme-toggle a.light svg {
+    fill: grey;
+    color: black;
+}
+
 .section .section-header {
     font-size: 0.75rem;
     font-weight: 600;

static/js/main.js

@@ -0,0 +1,45 @@
+document.addEventListener("DOMContentLoaded", function(){
+  var toggle = document.getElementById("scheme-toggle");
+
+  var scheme = "light";
+  var savedScheme = localStorage.getItem("scheme");
+
+  var darkScheme = document.getElementById("dark-scheme");
+  var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  if (prefersDark) {
+    scheme = "dark";
+  }
+
+  if(savedScheme) {
+    scheme = savedScheme;
+  }
+
+  if(scheme == "dark") {
+    darkscheme(toggle, darkScheme);
+  } else {
+    lightscheme(toggle, darkScheme);
+  }
+
+  toggle.addEventListener("click", () => {
+    if (toggle.className === "light") {
+      darkscheme(toggle, darkScheme);
+    } else if (toggle.className === "dark") {
+      lightscheme(toggle, darkScheme);
+    }
+  });
+});
+
+function darkscheme(toggle, darkScheme) {
+  localStorage.setItem("scheme", "dark");
+  toggle.innerHTML = feather.icons.sun.toSvg();
+  toggle.className = "dark";
+  darkScheme.disabled = false;
+}
+
+function lightscheme(toggle, darkScheme) {
+  localStorage.setItem("scheme", "light");
+  toggle.innerHTML = feather.icons.moon.toSvg();
+  toggle.className = "light";
+  darkScheme.disabled = true;
+}