Add dark theme toggle functionality

3 files changed, 35 insertions, 1 deletions

diff --git a/themes/researcher/layouts/partials/head.html b/themes/researcher/layouts/partials/head.html
index df307bb..5f792a8 100644
--- a/themes/researcher/layouts/partials/head.html
+++ b/themes/researcher/layouts/partials/head.html
@@ -12,6 +12,8 @@
 
     {{ $style := resources.Get "sass/researcher.scss" | resources.ExecuteAsTemplate "sass/researcher.scss" . | toCSS | minify }}
     <link rel="stylesheet" href="{{ $style.RelPermalink }}">
+    {{ $darkstyle := resources.Get "css/dark.css" | minify }}
+    <link disabled id="dark-mode-theme" rel="stylesheet" href="{{ $darkstyle.RelPermalink }}">
 
     {{ with .Site.Params.favicon }}
         <link rel="icon" type="image/ico" href="{{ . | absURL }}">
@@ -24,4 +26,5 @@
     {{ if not .Site.IsServer }}
         {{ template "_internal/google_analytics.html" . }}
     {{ end }}
+
 </head>
diff --git a/themes/researcher/layouts/partials/header.html b/themes/researcher/layouts/partials/header.html
index b017ee2..8f97c4c 100644
--- a/themes/researcher/layouts/partials/header.html
+++ b/themes/researcher/layouts/partials/header.html
@@ -18,7 +18,8 @@
                     {{ end }}
                 {{ end }}
             {{ end }}
-        </div>
+	    {{- partial "toggle.html" . -}}
+	</div>
     </nav>
 </div>
 <hr>
diff --git a/themes/researcher/layouts/partials/toggle.html b/themes/researcher/layouts/partials/toggle.html
new file mode 100644
index 0000000..4ef8b86
--- /dev/null
+++ b/themes/researcher/layouts/partials/toggle.html
@@ -0,0 +1,30 @@
+<i id="dark-mode-toggle"></i>
+
+<script>
+var toggle = document.getElementById("dark-mode-toggle");
+var darkTheme = document.getElementById("dark-mode-theme");
+var savedTheme = localStorage.getItem("dark-mode-storage") || "light";
+
+setTheme(savedTheme);
+
+toggle.addEventListener("click", () => {
+
+		if (toggle.className === "fas fa-moon") {
+        setTheme("dark");
+    } else if (toggle.className === "fas fa-sun") {
+        setTheme("light");
+    }
+});
+
+function setTheme(mode) {
+    localStorage.setItem("dark-mode-storage", mode);  
+
+    if (mode === "dark") {
+        darkTheme.disabled = false;
+        toggle.className = "fas fa-sun";
+    } else if (mode === "light") {
+        darkTheme.disabled = true;
+        toggle.className = "fas fa-moon";
+    }
+}
+</script>