claude-code-marketplace 0.7.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-marketplace",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Web UI for browsing and managing Claude Code marketplace plugins",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -126,6 +126,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
   document.getElementById('refreshBtn').addEventListener('click', refresh);
   document.getElementById('themeBtn').addEventListener('click', toggleTheme);
+  document.getElementById('themePickerBtn').addEventListener('click', toggleThemeMenu);
+  buildThemeMenu();
 
   document.getElementById('projectBtn').addEventListener('click', changeProject);
   document.getElementById('addMarketplaceBtn').addEventListener('click', openAddMarketplace);
@@ -152,6 +154,9 @@ document.addEventListener('DOMContentLoaded', () => {
   } else {
     document.body.classList.add('light');
   }
+  const savedColorTheme = localStorage.getItem('color-theme');
+  if (savedColorTheme) document.body.dataset.colorTheme = savedColorTheme;
+  syncColorThemeMenu(savedColorTheme || 'ember');
   syncHljsTheme();
   updateThemeColor(savedTheme !== 'dark');
 
@@ -195,6 +200,71 @@ function toggleTheme() {
   updateThemeColor(!isLight);
 }
 
+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"],
+];
+
+// '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);
+  }
+  syncColorThemeMenu(id);
+}
+
+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}">
+         <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('');
+  // stopPropagation keeps the click from bubbling to the picker button, which would re-toggle the menu
+  menu.addEventListener('click', (e) => {
+    const item = e.target.closest('.theme-menu-item');
+    if (!item) return;
+    e.stopPropagation();
+    setColorTheme(item.dataset.themeId);
+    menu.classList.remove('open');
+  });
+}
+
+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 syncColorThemeMenu(id) {
+  document.querySelectorAll('.theme-menu-item').forEach((el) => {
+    el.classList.toggle('on', el.dataset.themeId === (id || 'ember'));
+  });
+}
+
 async function loadProject() {
   try {
     const res = await fetch('/api/project');
@@ -1523,21 +1593,35 @@ 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

@@ -5,6 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Claude Code Marketplace</title>
 <link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="themes.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css" id="hljsDark">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css" id="hljsLight" disabled>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
@@ -46,6 +47,10 @@
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
       Refresh
     </button>
+    <span class="topbar-btn theme-picker" id="themePickerBtn" title="Color theme">
+      <svg width="14" height="14" 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 class="topbar-btn" id="themeBtn" title="Toggle theme">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
     </button>

package/public/style.css

@@ -259,6 +259,75 @@ body {
 .topbar-btn.loading svg {
   animation: spin 1s linear infinite;
 }
+/* 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(--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);
+}
 @keyframes spin {
   from {
     transform: rotate(0deg);

package/public/themes.css

@@ -0,0 +1,551 @@
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}