Add theme switcher

Author: calling

_includes/default.njk

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="/styles/basic.css" />
     <link rel="stylesheet" href="/styles/main.css" />
     <link rel="stylesheet" href="/styles/blog.css" />
+    <script src="/scripts/theme.js"></script>
   </head>
   <!-- Google tag (gtag.js) -->
   <script
@@ -26,6 +27,7 @@
       {% for item in header %}
       <a href="{{ item.url }}">{{ item.title }}</a>
       {% endfor %}
+      <button id="theme-toggle" type="button" aria-label="Toggle color theme"></button>
     </nav>
     <main class="{{ class }} page">{{ content | safe }}</main>
   </body>

scripts/theme.js

@@ -0,0 +1,57 @@
+var THEME_LABELS = {
+  auto: '⚙️ Theme (Auto)',
+  light: '☀️ Light',
+  dark: '🌙 Dark'
+};
+
+var CYCLE_ORDER = ['auto', 'light', 'dark'];
+
+function getPreference() {
+  return localStorage.getItem('theme-preference') || 'auto';
+}
+
+function applyTheme(pref) {
+  if (pref === 'auto') {
+    document.documentElement.removeAttribute('data-theme');
+  } else {
+    document.documentElement.setAttribute('data-theme', pref);
+  }
+  var btn = document.getElementById('theme-toggle');
+  if (btn) {
+    btn.textContent = THEME_LABELS[pref] || THEME_LABELS.auto;
+  }
+}
+
+function setPreference(value) {
+  localStorage.setItem('theme-preference', value);
+  applyTheme(value);
+}
+
+function cycleTheme() {
+  var current = getPreference();
+  var idx = CYCLE_ORDER.indexOf(current);
+  var next = CYCLE_ORDER[(idx + 1) % CYCLE_ORDER.length];
+  setPreference(next);
+}
+
+function setupToggle() {
+  var btn = document.getElementById('theme-toggle');
+  if (btn) {
+    btn.textContent = THEME_LABELS[getPreference()] || THEME_LABELS.auto;
+    btn.addEventListener('click', cycleTheme);
+  }
+}
+
+applyTheme(getPreference());
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', setupToggle);
+} else {
+  setupToggle();
+}
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+  if (getPreference() === 'auto') {
+    applyTheme('auto');
+  }
+});

styles/main.css

@@ -25,6 +25,24 @@
   }
 }
 
+/* Light mode override */
+html[data-theme="light"] {
+  --body-bg: #f4f4f4;
+  --body-color: #333333;
+  --link-color: #0066b2;
+  --visited-link-color: #7f4982;
+  --nav-bg: #ffffff;
+}
+
+/* Dark mode override */
+html[data-theme="dark"] {
+  --body-bg: #1e1e1e;
+  --body-color: #eaeaea;
+  --link-color: #3399ff;
+  --visited-link-color: #b066b0;
+  --nav-bg: #2a2a2a;
+}
+
 /* Mobile-first responsive design */
 body {
   padding: 0 var(--page-padding);
@@ -45,6 +63,14 @@ blockquote {
   }
 }
 
+html[data-theme="light"] blockquote {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+html[data-theme="dark"] blockquote {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
 /* Responsive heading size */
 h1 {
   line-height: 1.2;
@@ -80,14 +106,39 @@ h2 {
 }
 
 .primary-nav {
+  display: flex;
+  align-items: center;
   padding: clamp(0.75rem, 2vw, 1rem);
   margin: 0 auto 2rem;
   max-width: 600px;
-  text-align: left;
   background: var(--nav-bg);
   border-radius: 8px;
 }
 
 .primary-nav a {
   margin-right: 1rem;
 }
+
+#theme-toggle {
+  margin-left: auto;
+  flex-shrink: 0;
+  background: transparent;
+  border: 1px solid var(--body-color);
+  color: var(--body-color);
+  padding: 0.3rem 0.6rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  line-height: 1;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+#theme-toggle:hover {
+  background-color: var(--body-color);
+  color: var(--nav-bg);
+}
+
+#theme-toggle:focus-visible {
+  outline: 2px solid var(--link-color);
+  outline-offset: 2px;
+}