From bfcdd7d3b384d886cfa4e625a9bcd4f91747b33c Mon Sep 17 00:00:00 2001
From: Osinachi Chukwujama <osinachi.chukwujama@gmail.com>
Date: Sat, 24 Dec 2022 19:48:09 +0100
Subject: [PATCH] add script for theme toggle

---
 templates/footer.tmpl | 43 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/templates/footer.tmpl b/templates/footer.tmpl
index 916132f..492795e 100644
--- a/templates/footer.tmpl
+++ b/templates/footer.tmpl
@@ -1,5 +1,46 @@
 {{define "footer"}}
     <p class="footer">
-      by <a href="https://markmcgranaghan.com">Mark McGranaghan</a> and <a href="https://eli.thegreenplace.net">Eli Bendersky</a> | <a href="https://github.com/mmcgrana/gobyexample">source</a> | <a href="https://github.com/mmcgrana/gobyexample#license">license</a>
+      <script>
+        window.onload = function() {
+          function styleAllTags(tag, style, value){
+            document.querySelectorAll(tag).forEach((tag) => {
+              tag.style[style] = value
+            })
+          }
+
+          var themeButton = document.getElementById('theme-button');
+          var body = document.getElementsByTagName('body')[0];
+
+          function activateTheme(theme) {
+            if (theme === 'dark') {
+              body.style.color = "#ffffffeb";
+              body.style.backgroundColor = "#1a202c";
+              styleAllTags('a', 'color', '#ffffffeb')
+              styleAllTags('td.code', 'background', '#333333')
+              styleAllTags('td.code.empty', 'background', '#1a202c')
+            } else {
+              body.style.color = "#252519";
+              body.style.backgroundColor = "white";
+              styleAllTags('a', 'color', '#252519')
+              styleAllTags('td.code', 'background', '#f0f0f0')
+              styleAllTags('td.code.empty', 'background', 'white')
+            }
+            localStorage.setItem('theme', theme);
+          }
+
+          var currentTheme = localStorage.getItem('theme');
+          if (currentTheme === 'light' || currentTheme === 'dark') {
+            activateTheme(currentTheme);
+          } else {
+            activateTheme('light');
+          }
+
+          themeButton.onclick = function() {
+            var newTheme = localStorage.getItem('theme') === 'dark' ? 'light' : 'dark';
+            activateTheme(newTheme);
+          }
+        }
+      </script>
+      by <a href="https://markmcgranaghan.com">Mark McGranaghan</a> and <a href="https://eli.thegreenplace.net">Eli Bendersky</a> | <a href="https://github.com/mmcgrana/gobyexample">source</a> | <a href="https://github.com/mmcgrana/gobyexample#license">license</a> | <button id="theme-button">Toggle theme</button>
     </p>
 {{end}}