add dark mode button

_includes/head.html

@@ -9,6 +9,9 @@
 
   <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css" />
 
+  <!-- dark mode -->
+  <script src="/assets/js/darkmode.js"></script>
+
   <!-- Favicon -->
   <link
     rel="shortcut icon"

_includes/header.html

@@ -12,12 +12,34 @@
         </div>
         <div class="site-header-lang navigation">
             {% include lang-switcher.html %}
+            <button id="theme-toggle" title="Dark/light mode">Switch theme</button>
         </div>
 
     </div>
 
   </div>
 
+  <script>
+    // Utility function to set a cookie
+    function setCookie(name, value, days) {
+      const date = new Date();
+      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+      document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/; SameSite=Strict`;
+    }
+
+    const button = document.getElementById('theme-toggle');
+    button.textContent = savedTheme === 'dark' ?  '☀️' : '🌗';
+
+    // Toggle theme
+    document.getElementById('theme-toggle').addEventListener('click', () => {
+      const currentTheme = document.documentElement.getAttribute('data-theme');
+      const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+      document.documentElement.setAttribute('data-theme', newTheme);
+      setCookie('theme', newTheme, 365); // Save user preference for 1 year
+      button.textContent = newTheme === 'dark' ?  '☀️' : '🌗';
+    });
+
+  </script>
   <div class="frosty-backdrop"></div>
 
 </header>

_sass/main.scss

@@ -285,7 +285,7 @@ h1,h2,h3,h4,h5,h6 {
 
   display: flex;
   flex-direction: row;
-  padding: 0.5rem 2rem 0rem 2rem;
+  padding: 0.5rem 1rem 0rem 2rem;
   gap: 1rem;
 }
 
@@ -391,6 +391,9 @@ footer {
   }
   .lang-switcher {
     margin-top: none !important;
+    li {
+      margin-right: 0.5rem !important;
+    }
   }
   .site-header-lang {
     position: absolute;
@@ -399,6 +402,12 @@ footer {
     border: none !important;
     font-weight: 300;
     font-size: 0.8rem;
+    display: flex;
+
+    #theme-toggle {
+      margin: 0 0.25rem 0 0;
+      font-size: 14px;
+    }
   }
   .frontpage {
     flex-direction: column;
@@ -422,6 +431,15 @@ footer {
 }
 
 
+button#theme-toggle {
+  all: unset;
+  cursor: pointer;
+  font-size: 1.2rem;
+  line-height: 1rem;
+  user-select: none;
+  margin: -16px 0 0 1rem;
+}
+
 // DARK MODE -------------------------------------
 /* Default (light) mode */
 :root {
@@ -436,8 +454,14 @@ footer {
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  :root {
+
+// [data-theme="dark"] {
+//   --background-color: midnightblue;
+//   --text-color: yellow;
+// }
+
+// @media (prefers-color-scheme: dark) {
+[data-theme="dark"] {
     --background-color: #121314; // 31719;
     --text-color: #c0c0c0;
     --link-color: #4d9aff;
@@ -446,7 +470,7 @@ footer {
     --frosted-3: #232632;
     --banner-image-filter: brightness(97%) invert(100%) hue-rotate(-25deg);
     --table-row-odd: #1e1f24;
-  }
+
 
   .invert-images img {
     filter: invert(100%) hue-rotate(0deg);
@@ -455,7 +479,6 @@ footer {
   h3 {
     color: #b34343;
   }
-
 }
 
 body, main, thead {
@@ -468,7 +491,7 @@ a {
 }
 
 // Smooth transition between modes
-body, main, a {
+body, main, thead, a {
   transition: background-color 0.3s, color 0.3s;
 }
 

assets/js/darkmode.js

@@ -0,0 +1,10 @@
+// Utility function to get a cookie value
+function getCookie(name) {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop().split(';').shift();
+}
+
+// Initialize theme
+const savedTheme = getCookie('theme') || 'light';
+document.documentElement.setAttribute('data-theme', savedTheme);