From 8e4cb8c7387df68afda24fd7f7148b574ab63895 Mon Sep 17 00:00:00 2001
From: Harrison Sand <14326961+hsand@users.noreply.github.com>
Date: Fri, 24 Sep 2021 19:38:28 +0200
Subject: [PATCH] Add dark mode toggle

---
 layouts/partials/head.html   |  4 ++++
 layouts/partials/header.html |  4 ++--
 static/js/themetoggle.js     | 23 +++++++++++++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 static/js/themetoggle.js

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index ab3f39d..e8a637a 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -6,5 +6,9 @@
 		{{ range .Site.Menus.main }}
 		<a href="{{ .URL }}">{{ .Name }}</a>
 		{{ end }}
+		{{ if eq .Site.Params.mode "toggle" -}}
+        | <a id="dark-mode-toggle" onclick="toggleTheme()" href=""></a>
+		<script src="{{ .Site.BaseURL }}js/themetoggle.js"></script>
+		{{ end }}
 	</nav>
 </header>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c5ae589..98ab662 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -39,9 +39,9 @@
 	{{ $style := resources.Get "css/main.css" | fingerprint }}
 	<link rel="stylesheet" type="text/css" media="screen" href="{{ $style.Permalink }}" />
 
-	{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}}
+	{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") (eq .Site.Params.mode "toggle") -}}
 		{{ $darkstyle := resources.Get "css/dark.css" | fingerprint }}
-		<link rel="stylesheet" type="text/css" href="{{ $darkstyle.Permalink }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
+		<link id="darkModeStyle" rel="stylesheet" type="text/css" href="{{ $darkstyle.Permalink }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} {{ if eq .Site.Params.mode "toggle" }}disabled{{ end }} />
 	{{ end }}
 	
 	<!-- Custom CSS style get applied last -->
diff --git a/static/js/themetoggle.js b/static/js/themetoggle.js
new file mode 100644
index 0000000..f8c6dcd
--- /dev/null
+++ b/static/js/themetoggle.js
@@ -0,0 +1,23 @@
+function setTheme(mode) {
+    localStorage.setItem("theme-storage", mode);
+    if (mode === "dark") {
+        document.getElementById("darkModeStyle").disabled=false;
+        document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"sun\"></i>";
+        feather.replace()
+    } else if (mode === "light") {
+        document.getElementById("darkModeStyle").disabled=true;
+        document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"moon\"></i>";
+        feather.replace()
+    }
+}
+
+function toggleTheme() {
+    if (localStorage.getItem("theme-storage") === "light") {
+        setTheme("dark");
+    } else if (localStorage.getItem("theme-storage") === "dark") {
+        setTheme("light");
+    }
+}
+
+var savedTheme = localStorage.getItem("theme-storage") || "light";
+setTheme(savedTheme);