feat(docs): dark/light mode toggle

Add theme toggle button (top-right, fixed). Persists preference in
localStorage; falls back to prefers-color-scheme. Flash-free via inline
script in <head> that sets data-theme before first paint.

docs/_assets/style.css

@@ -21,6 +21,24 @@
   }
 }
 
+html[data-theme="light"] {
+  --bg: #ffffff;
+  --fg: #2a2a2a;
+  --muted: #6a6a6a;
+  --border: #e5e5e5;
+  --accent: #0a66c2;
+  --code-bg: #f6f6f6;
+}
+
+html[data-theme="dark"] {
+  --bg: #0f0f10;
+  --fg: #e5e5e5;
+  --muted: #a0a0a0;
+  --border: #2a2a2a;
+  --accent: #4aa3ff;
+  --code-bg: #1a1a1b;
+}
+
 * { box-sizing: border-box; }
 
 html { background: var(--bg); color: var(--fg); }
@@ -213,6 +231,37 @@ footer a { color: var(--muted); }
   padding: 1.5rem;
 }
 
+.theme-toggle {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 100;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  color: var(--fg);
+  cursor: pointer;
+  padding: 0.35rem;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  transition: border-color 0.15s;
+}
+
+.theme-toggle:hover { border-color: var(--muted); }
+
+.theme-toggle svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+html[data-theme="light"] .icon-sun  { display: none; }
+html[data-theme="light"] .icon-moon { display: block; }
+html[data-theme="dark"]  .icon-sun  { display: block; }
+html[data-theme="dark"]  .icon-moon { display: none; }
+
 @media (max-width: 768px) {
   .layout { grid-template-columns: 1fr; }
   .sidebar {

docs/_template/page.html

@@ -9,8 +9,23 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap">
 <link rel="stylesheet" href="__ROOT___assets/style.css">
 <style>$highlighting-css$</style>
+<script>
+  const t = localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+  document.documentElement.dataset.theme = t;
+</script>
 </head>
 <body>
+<button id="theme-toggle" class="theme-toggle" title="Toggle theme">
+  <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+    <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+  </svg>
+  <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+  </svg>
+</button>
 <div class="layout">
   <aside class="sidebar">
     <a class="brand" href="__ROOT__">sanderling</a>
@@ -68,6 +83,12 @@ for (const diagram of document.querySelectorAll('.mermaid')) {
     overlay.classList.add('open');
   });
 }
+
+document.getElementById('theme-toggle').addEventListener('click', () => {
+  const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
+  document.documentElement.dataset.theme = next;
+  localStorage.setItem('theme', next);
+});
 </script>
 </body>
 </html>