From cbfe9ddcaa9215e8becfb8cfde159001247554cd Mon Sep 17 00:00:00 2001
From: Steve Perkins <stereosteve@gmail.com>
Date: Fri, 13 Mar 2026 08:25:08 -0400
Subject: [PATCH 1/2] simple theme switcher on demo page

---
 docs/static/demo.css     | 153 ++++++++++++++++++++++++++++++++++++++-
 docs/templates/demo.html |  27 +++++--
 2 files changed, 172 insertions(+), 8 deletions(-)

diff --git a/docs/static/demo.css b/docs/static/demo.css
index 001ba8f..2d76ff4 100644
--- a/docs/static/demo.css
+++ b/docs/static/demo.css
@@ -1,3 +1,154 @@
+/* ── Theme definitions ── */
+[data-demo-theme="slate"] {
+  --background: light-dark(#f8fafc, #020817);
+  --foreground: light-dark(#0f172a, #f8fafc);
+  --card: light-dark(#fff, #0f172a);
+  --card-foreground: light-dark(#0f172a, #f8fafc);
+  --primary: light-dark(#0f172a, #f8fafc);
+  --primary-foreground: light-dark(#f8fafc, #0f172a);
+  --secondary: light-dark(#f1f5f9, #1e293b);
+  --secondary-foreground: light-dark(#0f172a, #f8fafc);
+  --muted: light-dark(#f1f5f9, #1e293b);
+  --muted-foreground: light-dark(#64748b, #94a3b8);
+  --faint: light-dark(#f8fafc, #131c2e);
+  --faint-foreground: light-dark(#94a3b8, #64748b);
+  --accent: light-dark(#f1f5f9, #1e293b);
+  --danger: light-dark(#d32f2f, #f4807b);
+  --danger-foreground: light-dark(#fafafa, #0f172a);
+  --success: light-dark(#008032, #6cc070);
+  --success-foreground: light-dark(#fafafa, #0f172a);
+  --warning: light-dark(#a65b00, #f0a030);
+  --warning-foreground: #0f172a;
+  --border: light-dark(#cbd5e1, #334155);
+  --input: light-dark(#cbd5e1, #334155);
+  --ring: light-dark(#0f172a, #cbd5e1);
+}
+
+[data-demo-theme="stone"] {
+  --background: light-dark(#fafaf9, #0c0a09);
+  --foreground: light-dark(#1c1917, #fafaf9);
+  --card: light-dark(#fff, #1c1917);
+  --card-foreground: light-dark(#1c1917, #fafaf9);
+  --primary: light-dark(#1c1917, #fafaf9);
+  --primary-foreground: light-dark(#fafaf9, #1c1917);
+  --secondary: light-dark(#f5f5f4, #292524);
+  --secondary-foreground: light-dark(#1c1917, #fafaf9);
+  --muted: light-dark(#f5f5f4, #292524);
+  --muted-foreground: light-dark(#78716c, #a8a29e);
+  --faint: light-dark(#fafaf9, #1a1614);
+  --faint-foreground: light-dark(#a8a29e, #78716c);
+  --accent: light-dark(#f5f5f4, #292524);
+  --danger: light-dark(#d32f2f, #f4807b);
+  --danger-foreground: light-dark(#fafaf9, #1c1917);
+  --success: light-dark(#008032, #6cc070);
+  --success-foreground: light-dark(#fafaf9, #1c1917);
+  --warning: light-dark(#a65b00, #f0a030);
+  --warning-foreground: #1c1917;
+  --border: light-dark(#d6d3d1, #44403c);
+  --input: light-dark(#d6d3d1, #44403c);
+  --ring: light-dark(#1c1917, #d6d3d1);
+}
+
+[data-demo-theme="rose"] {
+  --background: light-dark(#fff, #0c0507);
+  --foreground: light-dark(#09090b, #fafafa);
+  --card: light-dark(#fff, #190a10);
+  --card-foreground: light-dark(#09090b, #fafafa);
+  --primary: light-dark(#e11d48, #fb7185);
+  --primary-foreground: light-dark(#fff, #1c0511);
+  --secondary: light-dark(#fff1f2, #2a1520);
+  --secondary-foreground: light-dark(#9f1239, #fda4af);
+  --muted: light-dark(#fff1f2, #2a1520);
+  --muted-foreground: light-dark(#71717a, #a1a1aa);
+  --faint: light-dark(#fff5f6, #140a0f);
+  --faint-foreground: light-dark(#a1a1aa, #71717a);
+  --accent: light-dark(#ffe4e6, #3b1525);
+  --danger: light-dark(#d32f2f, #f4807b);
+  --danger-foreground: light-dark(#fafafa, #18181b);
+  --success: light-dark(#008032, #6cc070);
+  --success-foreground: light-dark(#fafafa, #18181b);
+  --warning: light-dark(#a65b00, #f0a030);
+  --warning-foreground: #09090b;
+  --border: light-dark(#fecdd3, #4a1d30);
+  --input: light-dark(#fecdd3, #4a1d30);
+  --ring: light-dark(#e11d48, #fb7185);
+}
+
+[data-demo-theme="blue"] {
+  --background: light-dark(#fff, #030712);
+  --foreground: light-dark(#09090b, #fafafa);
+  --card: light-dark(#fff, #0a1628);
+  --card-foreground: light-dark(#09090b, #fafafa);
+  --primary: light-dark(#2563eb, #60a5fa);
+  --primary-foreground: light-dark(#fff, #0c1a32);
+  --secondary: light-dark(#eff6ff, #172240);
+  --secondary-foreground: light-dark(#1d4ed8, #93bbfd);
+  --muted: light-dark(#eff6ff, #172240);
+  --muted-foreground: light-dark(#71717a, #a1a1aa);
+  --faint: light-dark(#f5f9ff, #081020);
+  --faint-foreground: light-dark(#a1a1aa, #71717a);
+  --accent: light-dark(#dbeafe, #1e3a5f);
+  --danger: light-dark(#d32f2f, #f4807b);
+  --danger-foreground: light-dark(#fafafa, #18181b);
+  --success: light-dark(#008032, #6cc070);
+  --success-foreground: light-dark(#fafafa, #18181b);
+  --warning: light-dark(#a65b00, #f0a030);
+  --warning-foreground: #09090b;
+  --border: light-dark(#bfdbfe, #1e3a5f);
+  --input: light-dark(#bfdbfe, #1e3a5f);
+  --ring: light-dark(#2563eb, #60a5fa);
+}
+
+[data-demo-theme="green"] {
+  --background: light-dark(#fff, #030a06);
+  --foreground: light-dark(#09090b, #fafafa);
+  --card: light-dark(#fff, #0a1a10);
+  --card-foreground: light-dark(#09090b, #fafafa);
+  --primary: light-dark(#16a34a, #4ade80);
+  --primary-foreground: light-dark(#fff, #052e16);
+  --secondary: light-dark(#f0fdf4, #14301e);
+  --secondary-foreground: light-dark(#15803d, #86efac);
+  --muted: light-dark(#f0fdf4, #14301e);
+  --muted-foreground: light-dark(#71717a, #a1a1aa);
+  --faint: light-dark(#f6fef8, #081a0e);
+  --faint-foreground: light-dark(#a1a1aa, #71717a);
+  --accent: light-dark(#dcfce7, #1a4028);
+  --danger: light-dark(#d32f2f, #f4807b);
+  --danger-foreground: light-dark(#fafafa, #18181b);
+  --success: light-dark(#16a34a, #4ade80);
+  --success-foreground: light-dark(#fff, #052e16);
+  --warning: light-dark(#a65b00, #f0a030);
+  --warning-foreground: #09090b;
+  --border: light-dark(#bbf7d0, #1a4028);
+  --input: light-dark(#bbf7d0, #1a4028);
+  --ring: light-dark(#16a34a, #4ade80);
+}
+
+[data-demo-theme="orange"] {
+  --background: light-dark(#fff, #0c0604);
+  --foreground: light-dark(#09090b, #fafafa);
+  --card: light-dark(#fff, #1a1008);
+  --card-foreground: light-dark(#09090b, #fafafa);
+  --primary: light-dark(#ea580c, #fb923c);
+  --primary-foreground: light-dark(#fff, #1c0a04);
+  --secondary: light-dark(#fff7ed, #2a1a0e);
+  --secondary-foreground: light-dark(#c2410c, #fdba74);
+  --muted: light-dark(#fff7ed, #2a1a0e);
+  --muted-foreground: light-dark(#71717a, #a1a1aa);
+  --faint: light-dark(#fffbf5, #140c06);
+  --faint-foreground: light-dark(#a1a1aa, #71717a);
+  --accent: light-dark(#ffedd5, #3b2010);
+  --danger: light-dark(#d32f2f, #f4807b);
+  --danger-foreground: light-dark(#fafafa, #18181b);
+  --success: light-dark(#008032, #6cc070);
+  --success-foreground: light-dark(#fafafa, #18181b);
+  --warning: light-dark(#ea580c, #fb923c);
+  --warning-foreground: #09090b;
+  --border: light-dark(#fed7aa, #3b2010);
+  --input: light-dark(#fed7aa, #3b2010);
+  --ring: light-dark(#ea580c, #fb923c);
+}
+
 body.demo {
   .section {
     margin-bottom: var(--space-8);
@@ -37,4 +188,4 @@ body.demo {
       padding-bottom: 0;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/docs/templates/demo.html b/docs/templates/demo.html
index 3041d8a..0556c5a 100644
--- a/docs/templates/demo.html
+++ b/docs/templates/demo.html
@@ -18,14 +18,17 @@ <h2 style="margin: 0;">Demo</h2>
       </label>
 
       <ot-dropdown>
-        <button popovertarget="export-menu" class="outline small">
-          Export ▾
+        <button popovertarget="theme-menu" class="outline small">
+          🎨 Theme ▾
         </button>
-        <menu popover id="export-menu">
-          <button role="menuitem">Export as CSV</button>
-          <button role="menuitem">Export as JSON</button>
-          <hr>
-          <button role="menuitem">Print report</button>
+        <menu popover id="theme-menu">
+          <button role="menuitem" onclick="setDemoTheme('default')">Default</button>
+          <button role="menuitem" onclick="setDemoTheme('slate')">Slate</button>
+          <button role="menuitem" onclick="setDemoTheme('stone')">Stone</button>
+          <button role="menuitem" onclick="setDemoTheme('rose')">Rose</button>
+          <button role="menuitem" onclick="setDemoTheme('blue')">Blue</button>
+          <button role="menuitem" onclick="setDemoTheme('green')">Green</button>
+          <button role="menuitem" onclick="setDemoTheme('orange')">Orange</button>
         </menu>
       </ot-dropdown>
 
@@ -601,5 +604,15 @@ <h5>Loading placeholder</h5>
   </div>
 </section>
 
+<script>
+function setDemoTheme(theme) {
+  if (theme === 'default') {
+    document.documentElement.removeAttribute('data-demo-theme');
+  } else {
+    document.documentElement.setAttribute('data-demo-theme', theme);
+  }
+  // document.getElementById('theme-menu').hidePopover();
+}
+</script>
 
 {% endblock %}

From 8b5194c50eccdca322b2afcd0001947a69201a4a Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Mon, 16 Mar 2026 11:01:08 +0530
Subject: [PATCH 2/2] Persist theme selection + minor cosmetic changes to the
 switcher on the demo page.

---
 docs/static/demo.css     |  4 +++-
 docs/templates/demo.html | 21 ++++++++++-----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/docs/static/demo.css b/docs/static/demo.css
index 2d76ff4..86c5f66 100644
--- a/docs/static/demo.css
+++ b/docs/static/demo.css
@@ -1,4 +1,4 @@
-/* ── Theme definitions ── */
+/* Demo themes. Customize these variables in your setup to change the overall look and feel of the UI easily. */
 [data-demo-theme="slate"] {
   --background: light-dark(#f8fafc, #020817);
   --foreground: light-dark(#0f172a, #f8fafc);
@@ -149,6 +149,8 @@
   --ring: light-dark(#ea580c, #fb923c);
 }
 
+/* ________________ */
+
 body.demo {
   .section {
     margin-bottom: var(--space-8);
diff --git a/docs/templates/demo.html b/docs/templates/demo.html
index 0556c5a..bd56fb4 100644
--- a/docs/templates/demo.html
+++ b/docs/templates/demo.html
@@ -19,7 +19,7 @@ <h2 style="margin: 0;">Demo</h2>
 
       <ot-dropdown>
         <button popovertarget="theme-menu" class="outline small">
-          🎨 Theme ▾
+          Switch theme ▾
         </button>
         <menu popover id="theme-menu">
           <button role="menuitem" onclick="setDemoTheme('default')">Default</button>
@@ -31,9 +31,6 @@ <h2 style="margin: 0;">Demo</h2>
           <button role="menuitem" onclick="setDemoTheme('orange')">Orange</button>
         </menu>
       </ot-dropdown>
-
-      <button class="small" data-tooltip="Refresh data now">
-        ↻ Refresh
       </button>
     </div>
   </div>
@@ -605,14 +602,16 @@ <h5>Loading placeholder</h5>
 </section>
 
 <script>
-function setDemoTheme(theme) {
-  if (theme === 'default') {
-    document.documentElement.removeAttribute('data-demo-theme');
-  } else {
-    document.documentElement.setAttribute('data-demo-theme', theme);
+  function setDemoTheme(theme) {
+    if (theme === 'default') {
+      document.documentElement.removeAttribute('data-demo-theme');
+    } else {
+      document.documentElement.setAttribute('data-demo-theme', theme);
+    }
+    localStorage.setItem('demo-theme', theme);
+    // document.getElementById('theme-menu').hidePopover();
   }
-  // document.getElementById('theme-menu').hidePopover();
-}
+  setDemoTheme(localStorage.getItem('demo-theme') || 'default');
 </script>
 
 {% endblock %}