add dark colors and update images

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>
@@ -53,6 +54,19 @@
     {{- /for }}
     </ul>
 </nav>
+<button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    class="theme-toggle__half-sun"
+    height="1em"
+    width="1em"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+  >
+    <path d="M27.5 11.5v-7h-7L16 0l-4.5 4.5h-7v7L0 16l4.5 4.5v7h7L16 32l4.5-4.5h7v-7L32 16l-4.5-4.5zM16 25.4V6.6c5.2 0 9.4 4.2 9.4 9.4s-4.2 9.4-9.4 9.4z" />
+  </svg>
+</button>
 </header>
 <main {{ if page.data.cssclasses }} class="{{ page.data.cssclasses  |> join(' ') }}"{{ /if }}>
 {{ content -}}

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/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/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 = ['dark', 'light', '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);
+};