Added button to switch themes

Author: allmightyspiff

layouts/partials/header.html

@@ -12,6 +12,7 @@
 	<script>
 		$(document).ready(function() {
 			$('table').addClass("table table-hover table-striped")
+            setThemeMode(localStorage.getItem("dark-mode-theme") || "dark");
 		})
 	</script>
     {{ template "_internal/google_analytics.html" . }}

layouts/partials/header.includes.html

@@ -3,6 +3,7 @@
     <link href="/css/custom.css" rel="stylesheet">
     <link href="/css/monokai.css" rel="stylesheet">
     <link href="/css/highlight/solarized_dark.css" rel="stylesheet">
+    
 
     <script src="/js/highlight.pack.js"></script>
 
@@ -22,3 +23,17 @@
     <script defer src="/fontawesome/js/solid.min.js"></script>
     <script defer src="/fontawesome/js/brands.min.js"></script>
     <script defer src="/fontawesome/js/fontawesome.min.js"></script>
+
+    <script>
+        var head = document.getElementsByTagName('head')[0]
+        var style = document.createElement('link')
+        style.type = 'text/css'
+        style.rel = 'stylesheet'
+        style.id = "dark-theme"
+        if (localStorage.getItem("dark-mode-theme") == "dark") {
+            style.href = '/css/dark.css'
+        } else {
+            style.href = '/css/light.css'
+        }
+        head.append(style)
+    </script>

layouts/partials/navbar.html

@@ -14,11 +14,11 @@
                     {{ range .Site.Menus.main }}
                         <li><a href="{{.URL}}">{{ .Name }}</a></li>
                     {{ end }}
-
-                    <!--
-                    And here is where you'd add more links to sections, or anywhere you like.
-                    <li><a href="#">About Me</a></li>
-                    -->
+                    <li>
+                        <a id="dark-toggle" class="dark-mode-toggle" aria-label="dark-mode-toggle" style="color: var(--Red); font-size: 20px">
+                            <i class="fas fa-sun"></i>
+                        </a>
+                    </li>
                 </ul>
                 <div id="custom-search-input" class="pull-right">
                   <form class="navbar-form" role="search" method="get" action="https://www.bing.com/search">
@@ -33,6 +33,37 @@
                     </div>
                   </form>
                 </div>
+                
             </div>
+
         </div>
     </nav>
+
+<script type="text/javascript">
+const darkIconClass = 'fas fa-moon'
+const lightIconClass = 'fas fa-sun'
+var darkCSS = $("#dark-theme");
+var darkToggleIcon = $("#dark-toggle i");
+
+// Set theme with the given mode and toggle the theme icon button
+// The button won't actually change for some reason on page load, will
+// change when its pressed though.
+function setThemeMode(mode) {
+    localStorage.setItem("dark-mode-theme", mode);
+    if (mode === "dark") {
+        darkToggleIcon.attr('class', darkIconClass)
+    } else  {
+        darkToggleIcon.attr('class', lightIconClass)
+    }
+}
+
+// Toggle dark mode when user click on the icon button
+$("#dark-toggle").click(function () {
+  if (darkToggleIcon.attr("class") == lightIconClass) {
+    setThemeMode("dark")
+  } else if (darkToggleIcon.attr("class") == darkIconClass) {
+    setThemeMode("light")
+  }
+  location.reload();
+});
+</script>