From 7f38a1e1dd10bebc22fdc43dc8f577934dcf1463 Mon Sep 17 00:00:00 2001
From: TheThomaas <thethomaas@protonmail.ch>
Date: Fri, 25 Apr 2025 16:42:38 +0200
Subject: [PATCH] Added a theme toggle to the footer

---
 src/_includes/components/footer.njk | 16 +++++-
 src/_includes/layouts/base.njk      | 79 ++++++++++++++++++++++++++++-
 2 files changed, 92 insertions(+), 3 deletions(-)
diff --git a/src/_includes/components/footer.njk b/src/_includes/components/footer.njk
index a0c3021..af68a56 100644
--- a/src/_includes/components/footer.njk
+++ b/src/_includes/components/footer.njk
@@ -1,2 +1,14 @@
-<p>Made with <a href="https://myonlinecookbook.xyz/" target="_blank" rel="noopener">My Online Cookbook</a></p>
-<p>© {{ site.author }} {% year %}</p>
\ No newline at end of file
+<div>
+    <p>Made with <a href="https://myonlinecookbook.xyz/" target="_blank" rel="noopener">My Online Cookbook</a></p>
+    <p>© {{ site.author }} {% year %}</p>
+</div>
+
+<div class="user-toggle">
+    <div role="status" class="visually-hidden js-mode-status"></div>
+    <button class="toggle-button js-mode-toggle">
+        <span class="visually-hidden toggle-button__text js-mode-toggle-text"
+            >Enable dark mode</span
+        >
+        <span class="toggle-button__icon" aria-hidden="true"></span>
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index 33df32f..d446fa4 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="no-js">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -20,12 +20,15 @@
       :root {
         --color-primary: {{ site.primaryColor }};
         --color-secondary: {{ site.secondaryColor }};
+        --primary-color: {{ site.primaryColor }};
+        --secondary-color: {{ site.secondaryColor }};
       }
       {% include "css/main.css" %}
     </style>
 
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
     <script src="https://identity.netlify.com/v1/netlify-identity-widget.js" defer></script>
+    <script>document.documentElement.classList.remove('no-js');</script>
   </head>
   <body class="{{bodyClass}}">
     <header class="l-header">
@@ -44,5 +47,79 @@
     <footer class="l-footer">
       {% include "components/footer.njk" %}
     </footer>
+
+    <script>
+      
+      const STORAGE_KEY = 'user-color-scheme';
+      const COLOR_MODE_KEY = '--color-mode';
+
+      const modeToggleButton = document.querySelector('.js-mode-toggle');
+      const modeToggleText = document.querySelector('.js-mode-toggle-text');
+      const modeStatusElement = document.querySelector('.js-mode-status');
+
+
+      const getCSSCustomProp = propKey => {
+        let response = getComputedStyle(document.documentElement).getPropertyValue(propKey);
+
+        if (response.length) {
+          response = response.replace(/\"/g, '').trim();
+        }
+
+        return response;
+      };
+
+      
+      const applySetting = passedSetting => {
+        let currentSetting = passedSetting || localStorage.getItem(STORAGE_KEY);
+
+        if (currentSetting) {
+          document.documentElement.setAttribute('data-user-color-scheme', currentSetting);
+          setButtonLabelAndStatus(currentSetting);
+        } else {
+          setButtonLabelAndStatus(getCSSCustomProp(COLOR_MODE_KEY));
+        }
+      };
+
+      
+const setButtonLabelAndStatus = currentSetting => {
+  modeToggleText.innerText = `Enable ${
+    currentSetting === 'dark' ? 'light' : 'dark'
+  } mode`;
+  modeStatusElement.innerText = `Color mode is now "${currentSetting}"`;
+};
+
+
+const toggleSetting = () => {
+  let currentSetting = localStorage.getItem(STORAGE_KEY);
+
+  switch (currentSetting) {
+    case null:
+      currentSetting = getCSSCustomProp(COLOR_MODE_KEY) === 'dark' ? 'light' : 'dark';
+      break;
+    case 'light':
+      currentSetting = 'dark';
+      break;
+    case 'dark':
+      currentSetting = 'light';
+      break;
+  }
+
+  localStorage.setItem(STORAGE_KEY, currentSetting);
+
+  return currentSetting;
+};
+
+modeToggleButton.addEventListener('click', evt => {
+  evt.preventDefault();
+
+  applySetting(toggleSetting());
+});
+
+applySetting();
+
+
+
+
+    </script>
   </body>
 </html>
\ No newline at end of file
