Add dark/light theme toggle button to nav bar

Co-authored-by: brunoborges <129743+brunoborges@users.noreply.github.com>

Author: Copilot

site/app.js

@@ -547,6 +547,29 @@
     window.updateViewToggleState = updateButtonState;
   };
 
+  /* ==========================================================
+     7. Theme Toggle
+     ========================================================== */
+  const initThemeToggle = () => {
+    const btn = document.getElementById('themeToggle');
+    if (!btn) return;
+
+    const updateButton = (theme) => {
+      btn.textContent = theme === 'dark' ? '☀️' : '🌙';
+      btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
+    };
+
+    // The anti-FOUC inline script already applied the theme; just sync the button state
+    updateButton(document.documentElement.getAttribute('data-theme') || 'dark');
+
+    btn.addEventListener('click', () => {
+      const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', next);
+      localStorage.setItem('theme', next);
+      updateButton(next);
+    });
+  };
+
   /* ==========================================================
      Utilities
      ========================================================== */
@@ -569,5 +592,6 @@
     initCopyButtons();
     initSyntaxHighlighting();
     initNewsletter();
+    initThemeToggle();
   });
 })();

site/styles.css

@@ -96,6 +96,53 @@ code, pre { font-family: 'JetBrains Mono', monospace; }
   }
 }
 
+/* ---------- Manual Theme Override ---------- */
+:root[data-theme="light"] {
+  --bg: #f8f8fa;
+  --surface: #ffffff;
+  --surface-2: #f0f0f4;
+  --border: #d8d8e0;
+  --border-light: #e4e4ea;
+  --text: #1a1a2e;
+  --text-muted: #6b6b80;
+  --accent: #f97316;
+  --accent-dim: #ea580c;
+  --green: #059669;
+  --blue: #2563eb;
+  --pink: #db2777;
+  --orange: #ea580c;
+  --yellow: #ca8a04;
+  --cyan: #0891b2;
+  --red-muted: #dc2626;
+  --old-bg: #fef2f2;
+  --modern-bg: #eff6ff;
+  --nav-bg: rgba(248, 248, 250, .85);
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  --bg: #0b0b0f;
+  --surface: #14141a;
+  --surface-2: #1a1a22;
+  --border: #25252f;
+  --border-light: #2f2f3a;
+  --text: #e4e4e7;
+  --text-muted: #6b6b76;
+  --accent: #fb923c;
+  --accent-dim: #f97316;
+  --green: #34d399;
+  --blue: #60a5fa;
+  --pink: #f472b6;
+  --orange: #fb923c;
+  --yellow: #fbbf24;
+  --cyan: #22d3ee;
+  --red-muted: #ef4444;
+  --old-bg: #1a1412;
+  --modern-bg: #1a2838;
+  --nav-bg: rgba(11, 11, 15, .8);
+  color-scheme: dark;
+}
+
 /* ---------- Base Body ---------- */
 body {
   background: var(--bg);
@@ -200,12 +247,28 @@ nav {
   text-decoration: none;
 }
 
-.github-link:hover {
+.github-link:hover,
+.theme-toggle:hover {
   border-color: var(--accent);
   color: var(--accent);
   background: var(--surface-2);
 }
 
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text-muted);
+  font-size: 1rem;
+  line-height: 1;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
 /* ---------- Hero ---------- */
 .hero {
   text-align: center;

templates/index.html

@@ -41,6 +41,10 @@
 
   <link rel="stylesheet" href="styles.css">
 
+  <script>
+    (function(){var t=localStorage.getItem('theme')||(window.matchMedia('(prefers-color-scheme: light)').matches?'light':'dark');document.documentElement.setAttribute('data-theme',t);})();
+  </script>
+
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
@@ -172,6 +176,7 @@
             <path d="M10 3C6.13 3 3 6.13 3 10c0 3.09 2 5.71 4.77 6.63.35.06.48-.15.48-.33v-1.16c-1.95.42-2.36-1.07-2.36-1.07-.32-.81-.78-1.03-.78-1.03-.64-.43.05-.42.05-.42.7.05 1.07.72 1.07.72.63 1.08 1.65.77 2.05.59.06-.46.24-.77.44-.95-1.57-.18-3.22-.78-3.22-3.48 0-.77.27-1.4.72-1.89-.07-.18-.31-.9.07-1.87 0 0 .59-.19 1.93.72.56-.16 1.16-.24 1.76-.24s1.2.08 1.76.24c1.34-.91 1.93-.72 1.93-.72.38.97.14 1.69.07 1.87.45.49.72 1.12.72 1.89 0 2.71-1.65 3.3-3.23 3.47.25.22.48.65.48 1.31v1.94c0 .19.13.4.48.33C15 15.71 17 13.09 17 10c0-3.87-3.13-7-7-7z"/>
           </svg>
         </a>
+        <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">☀️</button>
         <div class="cmd-bar" id="searchTrigger">Search… <kbd>⌘K</kbd></div>
       </div>
     </div>

templates/slug-template.html

@@ -8,6 +8,9 @@
   <meta name="robots" content="index, follow">
   <link rel="canonical" href="{{canonicalUrl}}">
   <link rel="stylesheet" href="../styles.css">
+  <script>
+    (function(){var t=localStorage.getItem('theme')||(window.matchMedia('(prefers-color-scheme: light)').matches?'light':'dark');document.documentElement.setAttribute('data-theme',t);})();
+  </script>
   <link rel="icon" href="../favicon.svg" type="image/svg+xml">
   <link rel="manifest" href="../manifest.json">
   <meta name="theme-color" content="#f97316">
@@ -96,6 +99,7 @@
             <path d="M10 3C6.13 3 3 6.13 3 10c0 3.09 2 5.71 4.77 6.63.35.06.48-.15.48-.33v-1.16c-1.95.42-2.36-1.07-2.36-1.07-.32-.81-.78-1.03-.78-1.03-.64-.43.05-.42.05-.42.7.05 1.07.72 1.07.72.63 1.08 1.65.77 2.05.59.06-.46.24-.77.44-.95-1.57-.18-3.22-.78-3.22-3.48 0-.77.27-1.4.72-1.89-.07-.18-.31-.9.07-1.87 0 0 .59-.19 1.93.72.56-.16 1.16-.24 1.76-.24s1.2.08 1.76.24c1.34-.91 1.93-.72 1.93-.72.38.97.14 1.69.07 1.87.45.49.72 1.12.72 1.89 0 2.71-1.65 3.3-3.23 3.47.25.22.48.65.48 1.31v1.94c0 .19.13.4.48.33C15 15.71 17 13.09 17 10c0-3.87-3.13-7-7-7z"/>
           </svg>
         </a>
+        <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">☀️</button>
         <a href="/" class="back-link">← All patterns</a>
 
         <div class="nav-arrows">