From 814407925c942fcacf4d090084a2bfbab66013d5 Mon Sep 17 00:00:00 2001
From: PJ <ipriyanshujain@gmail.com>
Date: Thu, 23 Apr 2026 00:38:36 +0700
Subject: [PATCH] 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   | 49 ++++++++++++++++++++++++++++++++++++++++
 docs/_template/page.html | 21 +++++++++++++++++
 2 files changed, 70 insertions(+)

diff --git a/docs/_assets/style.css b/docs/_assets/style.css
index 50e065d..2198f98 100644
--- a/docs/_assets/style.css
+++ b/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 {
diff --git a/docs/_template/page.html b/docs/_template/page.html
index 6cedf2a..aad5e5f 100644
--- a/docs/_template/page.html
+++ b/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>