From 44d8642e307071e8b1397b7a9666b854201cc968 Mon Sep 17 00:00:00 2001
From: Ivaylo Ivanov <me@ivayloivanov.eu>
Date: Fri, 29 Nov 2024 14:56:18 +0100
Subject: [PATCH] Add functioning site-wide dark mode

---
 layouts/partials/footer.html |  3 +-
 layouts/partials/head.html   |  3 --
 static/css/custom.css        | 55 ++++++++++++++++++++++++++++++++++++
 static/js/custom.js          |  4 ---
 static/js/main.js            | 44 +++++++++++++++++++++++++++++
 5 files changed, 100 insertions(+), 9 deletions(-)
 delete mode 100644 static/js/custom.js
 create mode 100644 static/js/main.js

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index d297f39..903c18e 100644
--- a/layouts/partials/footer.html
+++ b/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>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 7bf5da7..749481d 100644
--- a/layouts/partials/head.html
+++ b/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" }}
diff --git a/static/css/custom.css b/static/css/custom.css
index e69de29..ffdd0dc 100644
--- a/static/css/custom.css
+++ b/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;
+}
+
diff --git a/static/js/custom.js b/static/js/custom.js
deleted file mode 100644
index 2908209..0000000
--- a/static/js/custom.js
+++ /dev/null
@@ -1,4 +0,0 @@
-function toggleDarkMode() {
-  document.body.classList.toggle("dark-mode");
-}
-
diff --git a/static/js/main.js b/static/js/main.js
new file mode 100644
index 0000000..223a8d9
--- /dev/null
+++ b/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");
+}