diff --git a/docs/static/demo.css b/docs/static/demo.css
index 001ba8f..86c5f66 100644
--- a/docs/static/demo.css
+++ b/docs/static/demo.css
@@ -1,3 +1,156 @@
+/* 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);
+  --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 +190,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..bd56fb4 100644
--- a/docs/templates/demo.html
+++ b/docs/templates/demo.html
@@ -18,19 +18,19 @@ <h2 style="margin: 0;">Demo</h2>
       </label>
 
       <ot-dropdown>
-        <button popovertarget="export-menu" class="outline small">
-          Export ▾
+        <button popovertarget="theme-menu" class="outline small">
+          Switch 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>
-
-      <button class="small" data-tooltip="Refresh data now">
-        ↻ Refresh
       </button>
     </div>
   </div>
@@ -601,5 +601,17 @@ <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);
+    }
+    localStorage.setItem('demo-theme', theme);
+    // document.getElementById('theme-menu').hidePopover();
+  }
+  setDemoTheme(localStorage.getItem('demo-theme') || 'default');
+</script>
 
 {% endblock %}