claude-code-kanban 4.8.0 → 4.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -5986,6 +5986,69 @@ function loadTheme() {
   updateThemeIcon();
   updateThemeColor(document.body.classList.contains('light'));
   syncHljsTheme();
+  buildThemeMenu();
+  const colorTheme = localStorage.getItem('color-theme');
+  if (colorTheme) document.body.dataset.colorTheme = colorTheme;
+  syncColorThemeSelect(colorTheme || 'ember');
+}
+
+const COLOR_THEMES = [
+  ['ember', 'Ember'],
+  ['gruvbox', 'Gruvbox'],
+  ['catppuccin', 'Catppuccin'],
+  ['tokyo-night', 'Tokyo Night'],
+  ['solarized', 'Solarized'],
+  ['dracula', 'Dracula'],
+  ['nord', 'Nord'],
+  ['rose-pine', 'Rosé Pine'],
+  ['everforest', 'Everforest'],
+  ['kanagawa', 'Kanagawa'],
+  ['one-dark', 'One Dark'],
+  ['night-owl', 'Night Owl'],
+  ['monokai', 'Monokai Pro'],
+  ['github', 'GitHub'],
+  ['ayu', 'Ayu'],
+  ['vitesse', 'Vitesse'],
+  ['synthwave', "Synthwave '84"],
+];
+
+function buildThemeMenu() {
+  const menu = document.getElementById('themeMenu');
+  menu.innerHTML = COLOR_THEMES.map(
+    ([id, label]) =>
+      `<button type="button" class="theme-menu-item" data-theme-id="${id}"
+         onclick="event.stopPropagation(); setColorTheme('${id}'); toggleThemeMenu()">
+         <span class="theme-swatch theme-swatch-${id}"><i class="sw-bg"></i><i class="sw-accent"></i><i class="sw-ink"></i></span>${label}
+       </button>`,
+  ).join('');
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function toggleThemeMenu(e) {
+  e?.stopPropagation();
+  const menu = document.getElementById('themeMenu');
+  const open = menu.classList.toggle('open');
+  if (open) {
+    document.addEventListener('click', () => menu.classList.remove('open'), { once: true });
+  }
+}
+
+function syncColorThemeSelect(id) {
+  document.querySelectorAll('.theme-menu-item').forEach((el) => {
+    el.classList.toggle('on', el.dataset.themeId === (id || 'ember'));
+  });
+}
+
+// 'ember' (the :root default) has no override block — selecting it clears the attribute.
+function setColorTheme(id) {
+  if (!id || id === 'ember') {
+    delete document.body.dataset.colorTheme;
+    localStorage.removeItem('color-theme');
+  } else {
+    document.body.dataset.colorTheme = id;
+    localStorage.setItem('color-theme', id);
+  }
+  syncColorThemeSelect(id);
 }
 
 //#endregion
@@ -7065,21 +7128,35 @@ window.hubNavigate = function hubNavigate(app, url) {
 
 (function initHubTheme() {
   const getTheme = () => (document.body.classList.contains('light') ? 'light' : 'dark');
+  const getColorTheme = () => document.body.dataset.colorTheme || 'ember';
   const hubOrigin = () => (window.__HUB__?.url ? new URL(window.__HUB__.url).origin : null);
+  // lastTheme/lastColorTheme are updated synchronously when applying a hub
+  // message, so the (async) observer sees no diff and doesn't echo it back.
   let lastTheme = getTheme();
+  let lastColorTheme = getColorTheme();
   window.addEventListener('message', (e) => {
     if (e.source !== window.parent || e.origin !== hubOrigin()) return;
     if (e.data?.type !== 'hub:theme') return;
-    if (getTheme() === e.data.theme) return;
-    window.toggleTheme();
-    lastTheme = getTheme();
+    if (typeof e.data.colorTheme === 'string' && e.data.colorTheme !== getColorTheme()) {
+      setColorTheme(e.data.colorTheme);
+      lastColorTheme = getColorTheme();
+    }
+    if (getTheme() !== e.data.theme) {
+      window.toggleTheme();
+      lastTheme = getTheme();
+    }
   });
   new MutationObserver(() => {
     const t = getTheme();
-    if (t === lastTheme) return;
+    const ct = getColorTheme();
+    if (t === lastTheme && ct === lastColorTheme) return;
     lastTheme = t;
+    lastColorTheme = ct;
     const origin = hubOrigin();
-    if (origin) window.parent.postMessage({ type: 'hub:theme', theme: t }, origin);
-  }).observe(document.body, { attributes: true, attributeFilter: ['class'] });
+    if (origin) window.parent.postMessage({ type: 'hub:theme', theme: t, colorTheme: ct }, origin);
+  }).observe(document.body, {
+    attributes: true,
+    attributeFilter: ['class', 'data-color-theme'],
+  });
 })();
 // #endregion HUB_INTEGRATION

package/public/index.html

@@ -15,6 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Playfair+Display:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/style.css">
+  <link rel="stylesheet" href="/themes.css">
   <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github-dark.min.css" id="hljs-theme-dark">
@@ -143,6 +144,10 @@
                 <ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
               </svg>
             </button>
+            <span class="icon-btn theme-picker" id="themePickerBtn" title="Color theme" onclick="toggleThemeMenu(event)">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>
+              <div class="theme-menu" id="themeMenu"></div>
+            </span>
             <button id="theme-toggle" class="icon-btn" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle theme">
               <svg id="theme-icon-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>

package/public/style.css

@@ -472,6 +472,8 @@ body::before {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  /* reserve room for the absolutely-positioned pin button at top-right */
+  padding-right: 22px;
 }
 
 .session-indicators .pulse {
@@ -900,6 +902,76 @@ body::before {
   border-color: #ef4444;
 }
 
+/* theme picker: palette icon button + custom popover with per-theme swatches
+   (swatch colors are generated into themes.css) */
+.theme-picker {
+  position: relative;
+}
+.theme-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 100;
+  min-width: 170px;
+  max-height: 70vh;
+  overflow-y: auto;
+  padding: 4px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+.theme-menu.open {
+  display: block;
+}
+.theme-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  text-align: left;
+  cursor: pointer;
+}
+.theme-menu-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.theme-menu-item.on {
+  color: var(--accent-text);
+}
+/* 3-dot palette preview: surface, accent, ink (colors from themes.css vars) */
+.theme-swatch {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  flex: 0 0 auto;
+}
+.theme-swatch i {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  border: 1px solid var(--sw-border);
+}
+.theme-swatch .sw-bg {
+  background: var(--sw-bg);
+}
+.theme-swatch .sw-accent {
+  background: var(--sw-accent);
+}
+.theme-swatch .sw-ink {
+  background: var(--sw-ink);
+}
+
 /* #endregion */
 
 /* #region KANBAN */
@@ -2882,9 +2954,7 @@ body::before {
 .agent-card.selected:hover {
   background: var(--bg-elevated);
   border-color: var(--accent);
-  box-shadow:
-    0 0 0 1px var(--accent-dim),
-    0 0 12px var(--accent-dim);
+  box-shadow: 0 0 0 1px var(--accent-dim);
 }
 .agent-card.fading {
   opacity: 0.4;
@@ -2920,18 +2990,18 @@ body::before {
   gap: 5px;
 }
 .agent-dot {
-  width: 7px;
-  height: 7px;
+  width: 5px;
+  height: 5px;
   border-radius: 50%;
   flex-shrink: 0;
 }
 .agent-dot.active {
   background: var(--success);
-  box-shadow: 0 0 6px var(--success);
+  box-shadow: 0 0 4px color-mix(in srgb, var(--success) 50%, transparent);
 }
 .agent-dot.idle {
   background: var(--warning);
-  box-shadow: 0 0 6px var(--warning);
+  box-shadow: 0 0 4px color-mix(in srgb, var(--warning) 50%, transparent);
 }
 .agent-dot.stopped {
   background: var(--text-muted);

package/public/themes.css

@@ -0,0 +1,823 @@
+/* GENERATED by scripts/generate-themes.mjs — do not edit by hand.
+   Color themes override only the shared design-token variables; semantic
+   colors (success/warning/error/scope/...) stay constant across themes. */
+
+/* picker swatches */
+.theme-swatch-ember { --sw-bg: #16181c; --sw-accent: #e86f33; --sw-ink: #f0f1f3; --sw-border: #363840; }
+body.light .theme-swatch-ember { --sw-bg: #efede9; --sw-accent: #e86f33; --sw-ink: #0a0a0a; --sw-border: #cfcbc4; }
+.theme-swatch-gruvbox { --sw-bg: #282828; --sw-accent: #fe8019; --sw-ink: #ebdbb2; --sw-border: #504945; }
+body.light .theme-swatch-gruvbox { --sw-bg: #f3eee0; --sw-accent: #d65d0e; --sw-ink: #3c3836; --sw-border: #c9bc9d; }
+.theme-swatch-catppuccin { --sw-bg: #181825; --sw-accent: #cba6f7; --sw-ink: #cdd6f4; --sw-border: #45475a; }
+body.light .theme-swatch-catppuccin { --sw-bg: #eff1f5; --sw-accent: #8839ef; --sw-ink: #4c4f69; --sw-border: #bcc0cc; }
+.theme-swatch-tokyo-night { --sw-bg: #1a1b26; --sw-accent: #7aa2f7; --sw-ink: #c0caf5; --sw-border: #3b4261; }
+body.light .theme-swatch-tokyo-night { --sw-bg: #e9eaf0; --sw-accent: #2e7de9; --sw-ink: #343b58; --sw-border: #a8aecb; }
+.theme-swatch-solarized { --sw-bg: #073642; --sw-accent: #cb4b16; --sw-ink: #93a1a1; --sw-border: #586e75; }
+body.light .theme-swatch-solarized { --sw-bg: #f5efdc; --sw-accent: #cb4b16; --sw-ink: #073642; --sw-border: #d3cbb7; }
+.theme-swatch-dracula { --sw-bg: #282a36; --sw-accent: #bd93f9; --sw-ink: #f8f8f2; --sw-border: #565a75; }
+body.light .theme-swatch-dracula { --sw-bg: #f0f0f5; --sw-accent: #7c3aed; --sw-ink: #16161e; --sw-border: #c9c9d6; }
+.theme-swatch-nord { --sw-bg: #2e3440; --sw-accent: #88c0d0; --sw-ink: #eceff4; --sw-border: #4c566a; }
+body.light .theme-swatch-nord { --sw-bg: #eceff4; --sw-accent: #5e81ac; --sw-ink: #2e3440; --sw-border: #c2c9d6; }
+.theme-swatch-rose-pine { --sw-bg: #1f1d2e; --sw-accent: #c4a7e7; --sw-ink: #e0def4; --sw-border: #403d52; }
+body.light .theme-swatch-rose-pine { --sw-bg: #faf4ed; --sw-accent: #907aa9; --sw-ink: #575279; --sw-border: #dfdad9; }
+.theme-swatch-everforest { --sw-bg: #2d353b; --sw-accent: #a7c080; --sw-ink: #d3c6aa; --sw-border: #475258; }
+body.light .theme-swatch-everforest { --sw-bg: #fdf6e3; --sw-accent: #6f8352; --sw-ink: #4d5960; --sw-border: #d8d3ba; }
+.theme-swatch-kanagawa { --sw-bg: #1f1f28; --sw-accent: #7e9cd8; --sw-ink: #dcd7ba; --sw-border: #54546d; }
+body.light .theme-swatch-kanagawa { --sw-bg: #f2ecbc; --sw-accent: #4d699b; --sw-ink: #545464; --sw-border: #c7bf94; }
+.theme-swatch-one-dark { --sw-bg: #282c34; --sw-accent: #61afef; --sw-ink: #d7dae0; --sw-border: #4b5263; }
+body.light .theme-swatch-one-dark { --sw-bg: #fafafa; --sw-accent: #4078f2; --sw-ink: #383a42; --sw-border: #d4d4d6; }
+.theme-swatch-night-owl { --sw-bg: #0b2942; --sw-accent: #82aaff; --sw-ink: #d6deeb; --sw-border: #5f7e97; }
+body.light .theme-swatch-night-owl { --sw-bg: #f6f6f6; --sw-accent: #0c969b; --sw-ink: #403f53; --sw-border: #d0d0d0; }
+.theme-swatch-monokai { --sw-bg: #2d2a2e; --sw-accent: #ffd866; --sw-ink: #fcfcfa; --sw-border: #5b595c; }
+body.light .theme-swatch-monokai { --sw-bg: #f1efed; --sw-accent: #c08a00; --sw-ink: #2c292d; --sw-border: #cdc8c5; }
+.theme-swatch-github { --sw-bg: #24292e; --sw-accent: #58a6ff; --sw-ink: #e1e4e8; --sw-border: #444d56; }
+body.light .theme-swatch-github { --sw-bg: #f6f8fa; --sw-accent: #0366d6; --sw-ink: #24292e; --sw-border: #d1d5da; }
+.theme-swatch-ayu { --sw-bg: #10141c; --sw-accent: #e6b450; --sw-ink: #bfbdb6; --sw-border: #2d3343; }
+body.light .theme-swatch-ayu { --sw-bg: #f8f9fa; --sw-accent: #f2ae49; --sw-ink: #3d4149; --sw-border: #d8dde2; }
+.theme-swatch-vitesse { --sw-bg: #181818; --sw-accent: #4d9375; --sw-ink: #dbd7ca; --sw-border: #333333; }
+body.light .theme-swatch-vitesse { --sw-bg: #f7f7f7; --sw-accent: #1c6b48; --sw-ink: #393a34; --sw-border: #d6d6d6; }
+.theme-swatch-synthwave { --sw-bg: #262335; --sw-accent: #ff7edb; --sw-ink: #ffffff; --sw-border: #495495; }
+body.light .theme-swatch-synthwave { --sw-bg: #efecf6; --sw-accent: #c936a6; --sw-ink: #241b2f; --sw-border: #c5bcdd; }
+
+/* Gruvbox */
+body[data-color-theme="gruvbox"]:not(.light) {
+  --accent: #fe8019;
+  --accent-text: #f9b27c;
+  --accent-dim: rgba(254,128,25,0.25);
+  --accent-glow: rgba(254, 128, 25, 0.55);
+  --bg-deep: #1d2021;
+  --bg-surface: #282828;
+  --bg-elevated: #32302f;
+  --bg-hover: #3c3836;
+  --border: #504945;
+  --text-primary: #ebdbb2;
+  --text-secondary: #d5c4a1;
+  --text-tertiary: #bdae93;
+  --text-muted: #928374;
+}
+body.light[data-color-theme="gruvbox"] {
+  --accent: #d65d0e;
+  --accent-text: #af3a03;
+  --accent-dim: rgba(214,93,14,0.18);
+  --accent-glow: rgba(214, 93, 14, 0.5);
+  --bg-deep: #ede7d5;
+  --bg-surface: #f3eee0;
+  --bg-elevated: #faf7ec;
+  --bg-hover: #e4dcc6;
+  --border: #c9bc9d;
+  --text-primary: #3c3836;
+  --text-secondary: #504945;
+  --text-tertiary: #665c54;
+  --text-muted: #7c6f64;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="gruvbox"] {
+  --accent: #d65d0e;
+  --accent-text: #af3a03;
+  --accent-dim: rgba(214,93,14,0.18);
+  --accent-glow: rgba(214, 93, 14, 0.5);
+  --bg-deep: #ede7d5;
+  --bg-surface: #f3eee0;
+  --bg-elevated: #faf7ec;
+  --bg-hover: #e4dcc6;
+  --border: #c9bc9d;
+  --text-primary: #3c3836;
+  --text-secondary: #504945;
+  --text-tertiary: #665c54;
+  --text-muted: #7c6f64;
+}
+}
+
+/* Catppuccin */
+body[data-color-theme="catppuccin"]:not(.light) {
+  --accent: #cba6f7;
+  --accent-text: #d8c2fa;
+  --accent-dim: rgba(203,166,247,0.25);
+  --accent-glow: rgba(203, 166, 247, 0.55);
+  --bg-deep: #11111b;
+  --bg-surface: #181825;
+  --bg-elevated: #1e1e2e;
+  --bg-hover: #313244;
+  --border: #45475a;
+  --text-primary: #cdd6f4;
+  --text-secondary: #bac2de;
+  --text-tertiary: #a6adc8;
+  --text-muted: #7f849c;
+}
+body.light[data-color-theme="catppuccin"] {
+  --accent: #8839ef;
+  --accent-text: #6f2dbd;
+  --accent-dim: rgba(136,57,239,0.18);
+  --accent-glow: rgba(136, 57, 239, 0.5);
+  --bg-deep: #e6e9ef;
+  --bg-surface: #eff1f5;
+  --bg-elevated: #ffffff;
+  --bg-hover: #ccd0da;
+  --border: #bcc0cc;
+  --text-primary: #4c4f69;
+  --text-secondary: #5c5f77;
+  --text-tertiary: #6c6f85;
+  --text-muted: #8c8fa1;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="catppuccin"] {
+  --accent: #8839ef;
+  --accent-text: #6f2dbd;
+  --accent-dim: rgba(136,57,239,0.18);
+  --accent-glow: rgba(136, 57, 239, 0.5);
+  --bg-deep: #e6e9ef;
+  --bg-surface: #eff1f5;
+  --bg-elevated: #ffffff;
+  --bg-hover: #ccd0da;
+  --border: #bcc0cc;
+  --text-primary: #4c4f69;
+  --text-secondary: #5c5f77;
+  --text-tertiary: #6c6f85;
+  --text-muted: #8c8fa1;
+}
+}
+
+/* Tokyo Night */
+body[data-color-theme="tokyo-night"]:not(.light) {
+  --accent: #7aa2f7;
+  --accent-text: #9ab8ff;
+  --accent-dim: rgba(122,162,247,0.25);
+  --accent-glow: rgba(122, 162, 247, 0.55);
+  --bg-deep: #16161e;
+  --bg-surface: #1a1b26;
+  --bg-elevated: #1f2335;
+  --bg-hover: #292e42;
+  --border: #3b4261;
+  --text-primary: #c0caf5;
+  --text-secondary: #a9b1d6;
+  --text-tertiary: #787c99;
+  --text-muted: #565f89;
+}
+body.light[data-color-theme="tokyo-night"] {
+  --accent: #2e7de9;
+  --accent-text: #1659c7;
+  --accent-dim: rgba(46,125,233,0.18);
+  --accent-glow: rgba(46, 125, 233, 0.5);
+  --bg-deep: #e1e2e7;
+  --bg-surface: #e9eaf0;
+  --bg-elevated: #f7f8fc;
+  --bg-hover: #d0d5e3;
+  --border: #a8aecb;
+  --text-primary: #343b58;
+  --text-secondary: #565a6e;
+  --text-tertiary: #6c6e75;
+  --text-muted: #848cb5;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="tokyo-night"] {
+  --accent: #2e7de9;
+  --accent-text: #1659c7;
+  --accent-dim: rgba(46,125,233,0.18);
+  --accent-glow: rgba(46, 125, 233, 0.5);
+  --bg-deep: #e1e2e7;
+  --bg-surface: #e9eaf0;
+  --bg-elevated: #f7f8fc;
+  --bg-hover: #d0d5e3;
+  --border: #a8aecb;
+  --text-primary: #343b58;
+  --text-secondary: #565a6e;
+  --text-tertiary: #6c6e75;
+  --text-muted: #848cb5;
+}
+}
+
+/* Solarized */
+body[data-color-theme="solarized"]:not(.light) {
+  --accent: #cb4b16;
+  --accent-text: #e9663a;
+  --accent-dim: rgba(203,75,22,0.25);
+  --accent-glow: rgba(203, 75, 22, 0.55);
+  --bg-deep: #002b36;
+  --bg-surface: #073642;
+  --bg-elevated: #0a4250;
+  --bg-hover: #11505f;
+  --border: #586e75;
+  --text-primary: #93a1a1;
+  --text-secondary: #839496;
+  --text-tertiary: #657b83;
+  --text-muted: #586e75;
+}
+body.light[data-color-theme="solarized"] {
+  --accent: #cb4b16;
+  --accent-text: #b34a12;
+  --accent-dim: rgba(203,75,22,0.18);
+  --accent-glow: rgba(203, 75, 22, 0.5);
+  --bg-deep: #eee8d5;
+  --bg-surface: #f5efdc;
+  --bg-elevated: #fdf6e3;
+  --bg-hover: #e4ddc8;
+  --border: #d3cbb7;
+  --text-primary: #073642;
+  --text-secondary: #586e75;
+  --text-tertiary: #657b83;
+  --text-muted: #839496;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="solarized"] {
+  --accent: #cb4b16;
+  --accent-text: #b34a12;
+  --accent-dim: rgba(203,75,22,0.18);
+  --accent-glow: rgba(203, 75, 22, 0.5);
+  --bg-deep: #eee8d5;
+  --bg-surface: #f5efdc;
+  --bg-elevated: #fdf6e3;
+  --bg-hover: #e4ddc8;
+  --border: #d3cbb7;
+  --text-primary: #073642;
+  --text-secondary: #586e75;
+  --text-tertiary: #657b83;
+  --text-muted: #839496;
+}
+}
+
+/* Dracula */
+body[data-color-theme="dracula"]:not(.light) {
+  --accent: #bd93f9;
+  --accent-text: #d6b5ff;
+  --accent-dim: rgba(189,147,249,0.25);
+  --accent-glow: rgba(189, 147, 249, 0.55);
+  --bg-deep: #21222c;
+  --bg-surface: #282a36;
+  --bg-elevated: #343746;
+  --bg-hover: #44475a;
+  --border: #565a75;
+  --text-primary: #f8f8f2;
+  --text-secondary: #d8d8d2;
+  --text-tertiary: #b0b3c5;
+  --text-muted: #6272a4;
+}
+body.light[data-color-theme="dracula"] {
+  --accent: #7c3aed;
+  --accent-text: #5b21b6;
+  --accent-dim: rgba(124,58,237,0.18);
+  --accent-glow: rgba(124, 58, 237, 0.5);
+  --bg-deep: #e8e8ee;
+  --bg-surface: #f0f0f5;
+  --bg-elevated: #fbfbfd;
+  --bg-hover: #dfdfe8;
+  --border: #c9c9d6;
+  --text-primary: #16161e;
+  --text-secondary: #34343f;
+  --text-tertiary: #5a5a68;
+  --text-muted: #787885;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="dracula"] {
+  --accent: #7c3aed;
+  --accent-text: #5b21b6;
+  --accent-dim: rgba(124,58,237,0.18);
+  --accent-glow: rgba(124, 58, 237, 0.5);
+  --bg-deep: #e8e8ee;
+  --bg-surface: #f0f0f5;
+  --bg-elevated: #fbfbfd;
+  --bg-hover: #dfdfe8;
+  --border: #c9c9d6;
+  --text-primary: #16161e;
+  --text-secondary: #34343f;
+  --text-tertiary: #5a5a68;
+  --text-muted: #787885;
+}
+}
+
+/* Nord */
+body[data-color-theme="nord"]:not(.light) {
+  --accent: #88c0d0;
+  --accent-text: #a8d8e8;
+  --accent-dim: rgba(136,192,208,0.25);
+  --accent-glow: rgba(136, 192, 208, 0.55);
+  --bg-deep: #272c36;
+  --bg-surface: #2e3440;
+  --bg-elevated: #3b4252;
+  --bg-hover: #434c5e;
+  --border: #4c566a;
+  --text-primary: #eceff4;
+  --text-secondary: #d8dee9;
+  --text-tertiary: #aeb6c5;
+  --text-muted: #7b88a1;
+}
+body.light[data-color-theme="nord"] {
+  --accent: #5e81ac;
+  --accent-text: #44688f;
+  --accent-dim: rgba(94,129,172,0.18);
+  --accent-glow: rgba(94, 129, 172, 0.5);
+  --bg-deep: #e5e9f0;
+  --bg-surface: #eceff4;
+  --bg-elevated: #f8f9fb;
+  --bg-hover: #d8dee9;
+  --border: #c2c9d6;
+  --text-primary: #2e3440;
+  --text-secondary: #3b4252;
+  --text-tertiary: #4c566a;
+  --text-muted: #6b7589;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="nord"] {
+  --accent: #5e81ac;
+  --accent-text: #44688f;
+  --accent-dim: rgba(94,129,172,0.18);
+  --accent-glow: rgba(94, 129, 172, 0.5);
+  --bg-deep: #e5e9f0;
+  --bg-surface: #eceff4;
+  --bg-elevated: #f8f9fb;
+  --bg-hover: #d8dee9;
+  --border: #c2c9d6;
+  --text-primary: #2e3440;
+  --text-secondary: #3b4252;
+  --text-tertiary: #4c566a;
+  --text-muted: #6b7589;
+}
+}
+
+/* Rosé Pine */
+body[data-color-theme="rose-pine"]:not(.light) {
+  --accent: #c4a7e7;
+  --accent-text: #d9c4f2;
+  --accent-dim: rgba(196,167,231,0.25);
+  --accent-glow: rgba(196, 167, 231, 0.55);
+  --bg-deep: #191724;
+  --bg-surface: #1f1d2e;
+  --bg-elevated: #26233a;
+  --bg-hover: #34304e;
+  --border: #403d52;
+  --text-primary: #e0def4;
+  --text-secondary: #c5c2dd;
+  --text-tertiary: #908caa;
+  --text-muted: #6e6a86;
+}
+body.light[data-color-theme="rose-pine"] {
+  --accent: #907aa9;
+  --accent-text: #6f598c;
+  --accent-dim: rgba(144,122,169,0.18);
+  --accent-glow: rgba(144, 122, 169, 0.5);
+  --bg-deep: #f2e9e1;
+  --bg-surface: #faf4ed;
+  --bg-elevated: #fffaf3;
+  --bg-hover: #ebdfd4;
+  --border: #dfdad9;
+  --text-primary: #575279;
+  --text-secondary: #635e87;
+  --text-tertiary: #797593;
+  --text-muted: #9893a5;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="rose-pine"] {
+  --accent: #907aa9;
+  --accent-text: #6f598c;
+  --accent-dim: rgba(144,122,169,0.18);
+  --accent-glow: rgba(144, 122, 169, 0.5);
+  --bg-deep: #f2e9e1;
+  --bg-surface: #faf4ed;
+  --bg-elevated: #fffaf3;
+  --bg-hover: #ebdfd4;
+  --border: #dfdad9;
+  --text-primary: #575279;
+  --text-secondary: #635e87;
+  --text-tertiary: #797593;
+  --text-muted: #9893a5;
+}
+}
+
+/* Everforest */
+body[data-color-theme="everforest"]:not(.light) {
+  --accent: #a7c080;
+  --accent-text: #c3d6a2;
+  --accent-dim: rgba(167,192,128,0.25);
+  --accent-glow: rgba(167, 192, 128, 0.55);
+  --bg-deep: #232a2e;
+  --bg-surface: #2d353b;
+  --bg-elevated: #343f44;
+  --bg-hover: #3d484d;
+  --border: #475258;
+  --text-primary: #d3c6aa;
+  --text-secondary: #bfb6a3;
+  --text-tertiary: #9da9a0;
+  --text-muted: #859289;
+}
+body.light[data-color-theme="everforest"] {
+  --accent: #6f8352;
+  --accent-text: #56683f;
+  --accent-dim: rgba(111,131,82,0.18);
+  --accent-glow: rgba(111, 131, 82, 0.5);
+  --bg-deep: #f4f0d9;
+  --bg-surface: #fdf6e3;
+  --bg-elevated: #fffbef;
+  --bg-hover: #efebd4;
+  --border: #d8d3ba;
+  --text-primary: #4d5960;
+  --text-secondary: #5c6a72;
+  --text-tertiary: #7a8478;
+  --text-muted: #939f91;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="everforest"] {
+  --accent: #6f8352;
+  --accent-text: #56683f;
+  --accent-dim: rgba(111,131,82,0.18);
+  --accent-glow: rgba(111, 131, 82, 0.5);
+  --bg-deep: #f4f0d9;
+  --bg-surface: #fdf6e3;
+  --bg-elevated: #fffbef;
+  --bg-hover: #efebd4;
+  --border: #d8d3ba;
+  --text-primary: #4d5960;
+  --text-secondary: #5c6a72;
+  --text-tertiary: #7a8478;
+  --text-muted: #939f91;
+}
+}
+
+/* Kanagawa */
+body[data-color-theme="kanagawa"]:not(.light) {
+  --accent: #7e9cd8;
+  --accent-text: #9fb9ec;
+  --accent-dim: rgba(126,156,216,0.25);
+  --accent-glow: rgba(126, 156, 216, 0.55);
+  --bg-deep: #16161d;
+  --bg-surface: #1f1f28;
+  --bg-elevated: #2a2a37;
+  --bg-hover: #363646;
+  --border: #54546d;
+  --text-primary: #dcd7ba;
+  --text-secondary: #c8c093;
+  --text-tertiary: #a6a69c;
+  --text-muted: #727169;
+}
+body.light[data-color-theme="kanagawa"] {
+  --accent: #4d699b;
+  --accent-text: #38537f;
+  --accent-dim: rgba(77,105,155,0.18);
+  --accent-glow: rgba(77, 105, 155, 0.5);
+  --bg-deep: #e5ddb0;
+  --bg-surface: #f2ecbc;
+  --bg-elevated: #faf5d2;
+  --bg-hover: #dcd5ac;
+  --border: #c7bf94;
+  --text-primary: #545464;
+  --text-secondary: #66667a;
+  --text-tertiary: #716e61;
+  --text-muted: #8a8775;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="kanagawa"] {
+  --accent: #4d699b;
+  --accent-text: #38537f;
+  --accent-dim: rgba(77,105,155,0.18);
+  --accent-glow: rgba(77, 105, 155, 0.5);
+  --bg-deep: #e5ddb0;
+  --bg-surface: #f2ecbc;
+  --bg-elevated: #faf5d2;
+  --bg-hover: #dcd5ac;
+  --border: #c7bf94;
+  --text-primary: #545464;
+  --text-secondary: #66667a;
+  --text-tertiary: #716e61;
+  --text-muted: #8a8775;
+}
+}
+
+/* One Dark */
+body[data-color-theme="one-dark"]:not(.light) {
+  --accent: #61afef;
+  --accent-text: #8cc7ff;
+  --accent-dim: rgba(97,175,239,0.25);
+  --accent-glow: rgba(97, 175, 239, 0.55);
+  --bg-deep: #21252b;
+  --bg-surface: #282c34;
+  --bg-elevated: #2f343e;
+  --bg-hover: #3e4452;
+  --border: #4b5263;
+  --text-primary: #d7dae0;
+  --text-secondary: #abb2bf;
+  --text-tertiary: #8b919e;
+  --text-muted: #5c6370;
+}
+body.light[data-color-theme="one-dark"] {
+  --accent: #4078f2;
+  --accent-text: #2c5dd4;
+  --accent-dim: rgba(64,120,242,0.18);
+  --accent-glow: rgba(64, 120, 242, 0.5);
+  --bg-deep: #eaeaeb;
+  --bg-surface: #fafafa;
+  --bg-elevated: #ffffff;
+  --bg-hover: #e0e0e2;
+  --border: #d4d4d6;
+  --text-primary: #383a42;
+  --text-secondary: #50525a;
+  --text-tertiary: #696c77;
+  --text-muted: #a0a1a7;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="one-dark"] {
+  --accent: #4078f2;
+  --accent-text: #2c5dd4;
+  --accent-dim: rgba(64,120,242,0.18);
+  --accent-glow: rgba(64, 120, 242, 0.5);
+  --bg-deep: #eaeaeb;
+  --bg-surface: #fafafa;
+  --bg-elevated: #ffffff;
+  --bg-hover: #e0e0e2;
+  --border: #d4d4d6;
+  --text-primary: #383a42;
+  --text-secondary: #50525a;
+  --text-tertiary: #696c77;
+  --text-muted: #a0a1a7;
+}
+}
+
+/* Night Owl */
+body[data-color-theme="night-owl"]:not(.light) {
+  --accent: #82aaff;
+  --accent-text: #a8c4ff;
+  --accent-dim: rgba(130,170,255,0.25);
+  --accent-glow: rgba(130, 170, 255, 0.55);
+  --bg-deep: #011627;
+  --bg-surface: #0b2942;
+  --bg-elevated: #13344f;
+  --bg-hover: #1d3b53;
+  --border: #5f7e97;
+  --text-primary: #d6deeb;
+  --text-secondary: #b8c5d6;
+  --text-tertiary: #8ba3b8;
+  --text-muted: #637777;
+}
+body.light[data-color-theme="night-owl"] {
+  --accent: #0c969b;
+  --accent-text: #0a7479;
+  --accent-dim: rgba(12,150,155,0.18);
+  --accent-glow: rgba(12, 150, 155, 0.5);
+  --bg-deep: #ededed;
+  --bg-surface: #f6f6f6;
+  --bg-elevated: #fbfbfb;
+  --bg-hover: #e2e2e2;
+  --border: #d0d0d0;
+  --text-primary: #403f53;
+  --text-secondary: #545167;
+  --text-tertiary: #6f6e85;
+  --text-muted: #989fb1;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="night-owl"] {
+  --accent: #0c969b;
+  --accent-text: #0a7479;
+  --accent-dim: rgba(12,150,155,0.18);
+  --accent-glow: rgba(12, 150, 155, 0.5);
+  --bg-deep: #ededed;
+  --bg-surface: #f6f6f6;
+  --bg-elevated: #fbfbfb;
+  --bg-hover: #e2e2e2;
+  --border: #d0d0d0;
+  --text-primary: #403f53;
+  --text-secondary: #545167;
+  --text-tertiary: #6f6e85;
+  --text-muted: #989fb1;
+}
+}
+
+/* Monokai Pro */
+body[data-color-theme="monokai"]:not(.light) {
+  --accent: #ffd866;
+  --accent-text: #ffe6a0;
+  --accent-dim: rgba(255,216,102,0.25);
+  --accent-glow: rgba(255, 216, 102, 0.55);
+  --bg-deep: #221f22;
+  --bg-surface: #2d2a2e;
+  --bg-elevated: #403e41;
+  --bg-hover: #4a484b;
+  --border: #5b595c;
+  --text-primary: #fcfcfa;
+  --text-secondary: #d9d8d6;
+  --text-tertiary: #939293;
+  --text-muted: #727072;
+}
+body.light[data-color-theme="monokai"] {
+  --accent: #c08a00;
+  --accent-text: #9a6e00;
+  --accent-dim: rgba(192,138,0,0.18);
+  --accent-glow: rgba(192, 138, 0, 0.5);
+  --bg-deep: #e9e6e4;
+  --bg-surface: #f1efed;
+  --bg-elevated: #fcfbfa;
+  --bg-hover: #e0dcda;
+  --border: #cdc8c5;
+  --text-primary: #2c292d;
+  --text-secondary: #46434a;
+  --text-tertiary: #6b686d;
+  --text-muted: #8d8a8d;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="monokai"] {
+  --accent: #c08a00;
+  --accent-text: #9a6e00;
+  --accent-dim: rgba(192,138,0,0.18);
+  --accent-glow: rgba(192, 138, 0, 0.5);
+  --bg-deep: #e9e6e4;
+  --bg-surface: #f1efed;
+  --bg-elevated: #fcfbfa;
+  --bg-hover: #e0dcda;
+  --border: #cdc8c5;
+  --text-primary: #2c292d;
+  --text-secondary: #46434a;
+  --text-tertiary: #6b686d;
+  --text-muted: #8d8a8d;
+}
+}
+
+/* GitHub */
+body[data-color-theme="github"]:not(.light) {
+  --accent: #58a6ff;
+  --accent-text: #85bdff;
+  --accent-dim: rgba(88,166,255,0.25);
+  --accent-glow: rgba(88, 166, 255, 0.55);
+  --bg-deep: #1f2428;
+  --bg-surface: #24292e;
+  --bg-elevated: #2b3138;
+  --bg-hover: #2f363d;
+  --border: #444d56;
+  --text-primary: #e1e4e8;
+  --text-secondary: #d1d5da;
+  --text-tertiary: #959da5;
+  --text-muted: #6a737d;
+}
+body.light[data-color-theme="github"] {
+  --accent: #0366d6;
+  --accent-text: #044289;
+  --accent-dim: rgba(3,102,214,0.18);
+  --accent-glow: rgba(3, 102, 214, 0.5);
+  --bg-deep: #f0f2f4;
+  --bg-surface: #f6f8fa;
+  --bg-elevated: #ffffff;
+  --bg-hover: #e8eaed;
+  --border: #d1d5da;
+  --text-primary: #24292e;
+  --text-secondary: #444d56;
+  --text-tertiary: #586069;
+  --text-muted: #6a737d;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="github"] {
+  --accent: #0366d6;
+  --accent-text: #044289;
+  --accent-dim: rgba(3,102,214,0.18);
+  --accent-glow: rgba(3, 102, 214, 0.5);
+  --bg-deep: #f0f2f4;
+  --bg-surface: #f6f8fa;
+  --bg-elevated: #ffffff;
+  --bg-hover: #e8eaed;
+  --border: #d1d5da;
+  --text-primary: #24292e;
+  --text-secondary: #444d56;
+  --text-tertiary: #586069;
+  --text-muted: #6a737d;
+}
+}
+
+/* Ayu */
+body[data-color-theme="ayu"]:not(.light) {
+  --accent: #e6b450;
+  --accent-text: #f0cd85;
+  --accent-dim: rgba(230,180,80,0.25);
+  --accent-glow: rgba(230, 180, 80, 0.55);
+  --bg-deep: #0d1017;
+  --bg-surface: #10141c;
+  --bg-elevated: #141821;
+  --bg-hover: #1d2330;
+  --border: #2d3343;
+  --text-primary: #bfbdb6;
+  --text-secondary: #a8a6a0;
+  --text-tertiary: #8a9199;
+  --text-muted: #6c7380;
+}
+body.light[data-color-theme="ayu"] {
+  --accent: #f2ae49;
+  --accent-text: #b87514;
+  --accent-dim: rgba(242,174,73,0.18);
+  --accent-glow: rgba(242, 174, 73, 0.5);
+  --bg-deep: #eff1f3;
+  --bg-surface: #f8f9fa;
+  --bg-elevated: #fcfcfc;
+  --bg-hover: #e7eaed;
+  --border: #d8dde2;
+  --text-primary: #3d4149;
+  --text-secondary: #5c6166;
+  --text-tertiary: #787b80;
+  --text-muted: #8a9199;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="ayu"] {
+  --accent: #f2ae49;
+  --accent-text: #b87514;
+  --accent-dim: rgba(242,174,73,0.18);
+  --accent-glow: rgba(242, 174, 73, 0.5);
+  --bg-deep: #eff1f3;
+  --bg-surface: #f8f9fa;
+  --bg-elevated: #fcfcfc;
+  --bg-hover: #e7eaed;
+  --border: #d8dde2;
+  --text-primary: #3d4149;
+  --text-secondary: #5c6166;
+  --text-tertiary: #787b80;
+  --text-muted: #8a9199;
+}
+}
+
+/* Vitesse */
+body[data-color-theme="vitesse"]:not(.light) {
+  --accent: #4d9375;
+  --accent-text: #6fb392;
+  --accent-dim: rgba(77,147,117,0.25);
+  --accent-glow: rgba(77, 147, 117, 0.55);
+  --bg-deep: #121212;
+  --bg-surface: #181818;
+  --bg-elevated: #1e1e1e;
+  --bg-hover: #262626;
+  --border: #333333;
+  --text-primary: #dbd7ca;
+  --text-secondary: #bfbaaa;
+  --text-tertiary: #8f8f85;
+  --text-muted: #758575;
+}
+body.light[data-color-theme="vitesse"] {
+  --accent: #1c6b48;
+  --accent-text: #145236;
+  --accent-dim: rgba(28,107,72,0.18);
+  --accent-glow: rgba(28, 107, 72, 0.5);
+  --bg-deep: #f0f0f0;
+  --bg-surface: #f7f7f7;
+  --bg-elevated: #ffffff;
+  --bg-hover: #e7e7e7;
+  --border: #d6d6d6;
+  --text-primary: #393a34;
+  --text-secondary: #4e4f47;
+  --text-tertiary: #6b6d63;
+  --text-muted: #a0ada0;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="vitesse"] {
+  --accent: #1c6b48;
+  --accent-text: #145236;
+  --accent-dim: rgba(28,107,72,0.18);
+  --accent-glow: rgba(28, 107, 72, 0.5);
+  --bg-deep: #f0f0f0;
+  --bg-surface: #f7f7f7;
+  --bg-elevated: #ffffff;
+  --bg-hover: #e7e7e7;
+  --border: #d6d6d6;
+  --text-primary: #393a34;
+  --text-secondary: #4e4f47;
+  --text-tertiary: #6b6d63;
+  --text-muted: #a0ada0;
+}
+}
+
+/* Synthwave '84 */
+body[data-color-theme="synthwave"]:not(.light) {
+  --accent: #ff7edb;
+  --accent-text: #ffa9e7;
+  --accent-dim: rgba(255,126,219,0.25);
+  --accent-glow: rgba(255, 126, 219, 0.55);
+  --bg-deep: #241b2f;
+  --bg-surface: #262335;
+  --bg-elevated: #322a47;
+  --bg-hover: #3d3460;
+  --border: #495495;
+  --text-primary: #ffffff;
+  --text-secondary: #d8d6e8;
+  --text-tertiary: #b6b1d8;
+  --text-muted: #848bbd;
+}
+body.light[data-color-theme="synthwave"] {
+  --accent: #c936a6;
+  --accent-text: #9c2381;
+  --accent-dim: rgba(201,54,166,0.18);
+  --accent-glow: rgba(201, 54, 166, 0.5);
+  --bg-deep: #e6e2f0;
+  --bg-surface: #efecf6;
+  --bg-elevated: #fbfafd;
+  --bg-hover: #ddd7ec;
+  --border: #c5bcdd;
+  --text-primary: #241b2f;
+  --text-secondary: #3d3455;
+  --text-tertiary: #5c5380;
+  --text-muted: #7d76a3;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced)[data-color-theme="synthwave"] {
+  --accent: #c936a6;
+  --accent-text: #9c2381;
+  --accent-dim: rgba(201,54,166,0.18);
+  --accent-glow: rgba(201, 54, 166, 0.5);
+  --bg-deep: #e6e2f0;
+  --bg-surface: #efecf6;
+  --bg-elevated: #fbfafd;
+  --bg-hover: #ddd7ec;
+  --border: #c5bcdd;
+  --text-primary: #241b2f;
+  --text-secondary: #3d3455;
+  --text-tertiary: #5c5380;
+  --text-muted: #7d76a3;
+}
+}