add dark colors and update images

site/_data/svg.yml

@@ -12,4 +12,7 @@ msg_sq_heart: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" vie
 policy: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scale"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="M7 21h10"/><path d="M12 3v18"/><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/></svg>
 pin: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pin"><line x1="12" x2="12" y1="17" y2="22"/><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"/></svg>
 review: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell-ring"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/><path d="M4 2C2.8 3.7 2 5.7 2 8"/><path d="M22 8c0-2.3-.8-4.3-2-6"/></svg>
-up: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up"><path d="m17 11-5-5-5 5"/><path d="m17 18-5-5-5 5"/></svg>
+up: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up"><path d="m17 11-5-5-5 5"/><path d="m17 18-5-5-5 5"/></svg>
+sun: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
+moon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+sun_moon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-moon"><path d="M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.9 4.9 1.4 1.4"/><path d="m17.7 17.7 1.4 1.4"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.3 17.7-1.4 1.4"/><path d="m19.1 4.9-1.4 1.4"/></svg>

site/_includes/layouts/base.vto

@@ -20,6 +20,7 @@
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 <link rel="manifest" href="/site.webmanifest">
 <link rel="preconnect" href="https://fonts.googleapis.com">
+<script type="text/javascript" src="/assets/theme.js" inline></script>
 <script type="text/javascript" src="/assets/scroll-toggle.js" inline></script>
 {{- for x of page.data.scripts }}
 <script type="text/javascript" src="{{ x }}"></script>
@@ -51,6 +52,9 @@
           </ul>
         </li>
     {{- /for }}
+    <li class="theme-toggle">
+      <span class="theme-toggle" id='theme-toggle'><i class="icon-sun">{{ page.data.svg.sun }}</i><i class="icon-moon">{{ page.data.svg.moon }}</i><i class="icon-cog">{{ page.data.svg.sun_moon }}</i></span>
+    </li>
     </ul>
 </nav>
 </header>

site/_includes/scss/_colors.scss

@@ -80,4 +80,19 @@ body {
   --button-border-color: transparent;
 
   background-color: var(--bg-primary);
+}
+
+
+.dark body {
+
+--bg-primary: #1e1e1e;
+--text-normal: #B3B3B3;
+--border-color: #434343;
+--bg-navigation-top: #011212;
+--bg-navigation-bottom: #0f0f0f;
+--fg-navigation: #c8c7c7;
+
+a {color: #c8c7c7;}
+a.button {color: var(--dark-green);}
+
 }

site/_includes/scss/navigation.scss

@@ -200,6 +200,11 @@ header.site {
           }
         }
       }
+
+      .theme-toggle {
+        padding: .25em .5em;
+        color: var(--fg-nav-submenu);
+      }
     }
 
     #menu-toggle:checked {
@@ -275,7 +280,7 @@ header.site {
           border-width: 0 1px 0 0;
 
           &:hover {
-            border-image: linear-gradient(var(--bg-navigation-top), var(--bg-navigation-top) 40%, var(--bg-nav-submenu)) 1;
+          //  border-image: linear-gradient(var(--bg-navigation-top), var(--bg-navigation-top) 40%, var(--bg-nav-submenu)) 1; //
           }
 
           .entry {
@@ -325,4 +330,43 @@ header.site {
       }
     }
   }
+}
+
+
+/* Hide/show the color mode switcher icons */
+
+html #theme-toggle {
+  i.icon-sun {
+    display: none;
+  }
+  i.icon-moon {
+    display: none;
+  }
+  i.icon-cog {
+    display: inline-block;
+  }
+}
+
+html[data-stored-theme="light"] #theme-toggle {
+  i.icon-sun {
+    display: inline-block;
+  }
+  i.icon-moon {
+    display: none;
+  }
+  i.icon-cog {
+    display: none;
+  }
+}
+
+html[data-stored-theme="dark"] #theme-toggle {
+  i.icon-sun {
+    display: none;
+  }
+  i.icon-moon {
+    display: inline-block;
+  }
+  i.icon-cog {
+    display: none;
+  }
 }

site/_includes/scss/text.scss

@@ -3,6 +3,7 @@
 
 body {
   --button-border-radius: 30px;
+  color: var(--text-normal);
 }
 
 // General links
@@ -31,9 +32,10 @@ a.github,
 .h-site-more,
 .act-status-icon,
 .aside-nav-icon {
-  min-height: var(--font-smaller);
+  min-width: var(--font-smaller);
   svg {
     height: var(--font-smaller);
+    width: var(--font-smaller);
   }
 }
 

site/_includes/scss/theme.scss

@@ -0,0 +1,25 @@
+.theme-toggle {
+  --size: 1.2rem;
+
+  background: none;
+  border: none;
+  padding: 0;
+
+  height: var(--size);
+  width: var(--size);
+  inline-size: var(--size);
+  block-size: var(--size);
+  aspect-ratio: 1;
+  border-radius: 50%;
+
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  outline-offset: 5px;
+
+  & > svg {
+    inline-size: 100%;
+    block-size: 100%;
+    stroke-linecap: round;
+  }
+}

site/assets/theme.js

@@ -0,0 +1,40 @@
+function setTheme() {
+  const storedTheme = localStorage.getItem('color-theme') || 'system';
+  document.documentElement.dataset.storedTheme = storedTheme;
+  let theme_color = "#fafafa";
+  if (storedTheme === 'dark' || (storedTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.classList.add('dark');
+    theme_color = "#1e1e1e";
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+  return theme_color;
+}
+function toggleTheme() {
+  const themeOrder = ['light', 'dark', 'system'];
+  const storedTheme = localStorage.getItem('color-theme') || 'system';
+  const newTheme = themeOrder[(themeOrder.indexOf(storedTheme) + 1) % themeOrder.length];
+  localStorage.setItem('color-theme', newTheme);
+  document.querySelector('meta[name="theme-color"]').content = setTheme();
+  updateButton();
+}
+function updateButton() {
+  const button = document.getElementById('theme-toggle');
+  const storedTheme = localStorage.getItem('color-theme') || 'system';
+  const themeTitles = {
+    'dark': 'Color scheme: dark; next: light',
+    'light': 'Color scheme: light; next: system preferences',
+    'system': 'Color scheme: system preferences; next: dark'
+  };
+  button.setAttribute('aria-label', storedTheme);
+  button.setAttribute('title', themeTitles[storedTheme]);
+  return button;
+}
+const meta = document.createElement('meta');
+meta.name = "theme-color";
+meta.content = setTheme();
+document.head.appendChild(meta);
+window.onload = function() {
+  const button = updateButton();
+  button.addEventListener('click', toggleTheme);
+};