Add functioning site-wide dark mode

layouts/partials/footer.html

@@ -4,6 +4,5 @@
     <p><a href="https://git.ivayloivanov.eu/ivo/hugo-theme-noteworthy" target="_blank" rel="noopener">{{ i18n "noteworthy_theme" }}</a></p>
     <p><a href="https://gohugo.io" target="_blank" rel="noopener">{{ i18n "built_with_hugo" }}</a></p>
 
-	{{ $script := resources.Get "js/main.js" | minify | fingerprint -}}
-	<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>
+  <script src="{{ "/" | relURL }}js/main.js"></script>
 </footer>

layouts/partials/head.html

@@ -26,9 +26,6 @@
     <!-- Modify the custom.css file inside static > css to use vanilla css -->
     <link type="text/css" rel="stylesheet" href="{{ "/" | relURL }}css/custom.css">
 
-    <!-- Custom js -->
-    <script src="{{ "/" | relURL }}js/custom.js"></script>
-
     <link rel="stylesheet" href="{{ "/" | relURL }}css/bootstrap.min.css">
 
     {{ with .OutputFormats.Get "RSS" }}

static/css/custom.css

@@ -0,0 +1,55 @@
+/** Link decoration */
+* .site-title a {
+    color: #898989;
+    text-decoration: none;
+}
+
+* .site-title a:hover {
+    color: #5F5F5F;
+    text-decoration: none;
+}
+
+* article h2 a {
+    color: #5F5F5F;
+    text-decoration: none;
+}
+
+* article h2 a:hover {
+    color: #5F5F5F;
+    text-decoration: none;
+}
+
+/** Post title colours */
+.post-title {
+    color: #5F5F5F;
+}
+
+/** Tag Link colours */
+.tag {
+    color: #898989;
+}
+
+.tag:hover {
+    color: #5F5F5F;
+}
+
+/** Icons */
+.inline-svg {
+    display: inline-block;
+    height: 1rem;
+    width: 1rem;
+    position: relative;
+}
+
+/** Dark Mode */
+.dark-mode {
+    background-color: black;
+    color: white;
+}
+
+.dark-mode * h2 a {
+    text-shadow: none;
+    box-shadow: none;
+    color: white;
+}
+

static/js/custom.js

@@ -1,4 +0,0 @@
-function toggleDarkMode() {
-  document.body.classList.toggle("dark-mode");
-}
-

static/js/main.js

@@ -0,0 +1,44 @@
+document.addEventListener("DOMContentLoaded", function() {
+  setDarkMode()
+})
+
+
+function setCookie(cname, cvalue, exdays) {
+  document.cookie = cname + "=" + cvalue + ";path=/";
+}
+
+function getCookie(cname) {
+  let name = cname + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let ca = decodedCookie.split(';');
+  for(let i = 0; i <ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
+function isStringTrue(val) {
+  return String(val).toLowerCase() === 'true'
+}
+
+function toggleDarkMode() {
+  let darkMode = getCookie("setDarkMode");
+  if(isStringTrue(darkMode))
+    setCookie("setDarkMode", false);
+  else
+    setCookie("setDarkMode", true);
+    document.body.classList.toggle("dark-mode");
+}
+
+
+function setDarkMode() {
+  let darkMode = getCookie("setDarkMode");
+  if(isStringTrue(darkMode))
+    document.body.classList.toggle("dark-mode");
+}