dsh-theme-escook 1.0.4 → 1.0.6

package/client/client.js

@@ -1,346 +1,90 @@
-/**
- * Escook Theme Client Plugin for DSH (Redesigned Edition)
- */
+import { THEME_SCHEMES } from './palette.js';
+import { ThemeSettings, SETTINGS_CSS } from './theme-settings.js';
 
-export const THEME_SCHEMES = {
-  "dark": {
-    name: "escook Dark (经典暗黑 · 标志暖阳橙)",
-    desc: "VS Code 彬哥经典暖调极客深灰搭配标志暖阳橙，正统耐看长效护眼",
-    type: "dark",
-    colorPreview: "#ef820c",
-    bgPreview: "#252526",
-    css: `
-      :root, html, body, body[data-ds-dark-theme], [data-theme="escook-dark"] {
-        --dsw-alias-bg-base: #252526 !important;
-        --dsw-alias-bg-layer-1: #202021 !important;
-        --dsw-alias-bg-layer-2: #29292c !important;
-        --dsw-alias-bg-layer-3: #2d2d30 !important;
-        --dsw-alias-bg-module-platform: #2d2d30 !important;
-        --dsw-alias-bg-multi-select: #2d2d30 !important;
-        --dsw-alias-bg-overlay: #333333 !important;
-        --dsw-specific-selector: #2d2d30 !important;
-        --dsw-alias-bg-mask-1: rgba(18, 18, 20, 0.75) !important;
-        --dsw-specific-sidebar-fill: #202021 !important;
-        --dsw-specific-sidebar-nav-item-hover: rgba(239, 130, 12, 0.1) !important;
-        --dsw-specific-sidebar-nav-item-active: rgba(239, 130, 12, 0.2) !important;
-        --dsw-specific-sidebar-nav-item-active-accent: #ef820c !important;
-        --dsw-specific-input-major: #29292c !important;
-        --dsw-specific-bubble: #29292c !important;
-        --dsw-specific-menu: #202021 !important;
-        --dsw-hovercard-bg: #29292c !important;
-        --dsw-alias-tooltip-bg: #1c1c1d !important;
-        --dsw-alias-button-elevated-fill: #2f2f33 !important;
-        --dsw-alias-button-floating-hover: #38383c !important;
-        --dsw-alias-brand-primary: #ef820c !important;
-        --dsw-alias-button-primary-fill: #ef820c !important;
-        --dsw-alias-button-primary-hover: #ff9940 !important;
-        --dsw-alias-label-primary-foreground: #ffffff !important;
-        --dsw-alias-label-primary: #fafafa !important;
-        --dsw-alias-label-secondary: #cccccc !important;
-        --dsw-alias-label-tertiary: #888888 !important;
-        --dsw-alias-label-dimmed: #555555 !important;
-        --dsw-alias-label-caption: #888888 !important;
-        --dsw-alias-interactive-bg-hover: rgba(239, 130, 12, 0.1) !important;
-        --dsw-alias-interactive-bg-active: rgba(239, 130, 12, 0.2) !important;
-        --dsw-alias-border-l1: #333333 !important;
-        --dsw-alias-border-l2: #2a2a2a !important;
-        --dsw-alias-border-l3: #3e3e3e !important;
-        --dsw-alias-border-l4: #555555 !important;
-        --dsw-alias-markdown-code-block: #1c1c1d !important;
-        --dsw-alias-markdown-code-block-banner: #252526 !important;
-        --dsw-alias-scrollbar-bg-l2: #333333 !important;
-        --dsw-alias-scrollbar-hover-l2: #ef820c !important;
-      }
-      body, body[data-ds-dark-theme] { background-color: #252526 !important; color: #fafafa !important; }
-      pre, code, [class*="codeBlock"] {
-        background-color: #1c1c1d !important;
-        color: #fafafa !important;
-        border-color: #333333 !important;
-      }
-      [class*="selector"], [class*="themeCube"] {
-        color: #fafafa !important;
-        background-color: #2d2d30 !important;
-      }
-      [class*="selected"], [class*="themeCube"]:hover {
-        border-color: #ef820c !important;
-      }
-    `
-  },
-  "dark-soft": {
-    name: "escook Dark Soft (柔和暗黑 · 柔光奶杏黄)",
-    desc: "Ayu 经典深海蓝灰底色搭配温润奶杏黄，细腻柔和长效防疲劳",
-    type: "dark",
-    colorPreview: "#ffcc66",
-    bgPreview: "#1f2430",
-    css: `
-      :root, html, body, body[data-ds-dark-theme], [data-theme="escook-dark-soft"] {
-        --dsw-alias-bg-base: #1f2430 !important;
-        --dsw-alias-bg-layer-1: #191e28 !important;
-        --dsw-alias-bg-layer-2: #232834 !important;
-        --dsw-alias-bg-layer-3: #262c3b !important;
-        --dsw-alias-bg-module-platform: #262c3b !important;
-        --dsw-alias-bg-multi-select: #262c3b !important;
-        --dsw-alias-bg-overlay: #333a4c !important;
-        --dsw-specific-selector: #262c3b !important;
-        --dsw-alias-bg-mask-1: rgba(16, 20, 28, 0.7) !important;
-        --dsw-specific-sidebar-fill: #191e28 !important;
-        --dsw-specific-sidebar-nav-item-hover: rgba(255, 204, 102, 0.1) !important;
-        --dsw-specific-sidebar-nav-item-active: rgba(255, 204, 102, 0.18) !important;
-        --dsw-specific-sidebar-nav-item-active-accent: #ffcc66 !important;
-        --dsw-specific-input-major: #232834 !important;
-        --dsw-specific-bubble: #232834 !important;
-        --dsw-specific-menu: #191e28 !important;
-        --dsw-hovercard-bg: #191e28 !important;
-        --dsw-alias-tooltip-bg: #171b24 !important;
-        --dsw-alias-button-elevated-fill: #2b3140 !important;
-        --dsw-alias-button-floating-hover: #333a4c !important;
-        --dsw-alias-brand-primary: #ffcc66 !important;
-        --dsw-alias-button-primary-fill: #ffcc66 !important;
-        --dsw-alias-button-primary-hover: #ffd580 !important;
-        --dsw-alias-label-primary-foreground: #1f2430 !important;
-        --dsw-alias-label-primary: #cbccc6 !important;
-        --dsw-alias-label-secondary: #969aa4 !important;
-        --dsw-alias-label-tertiary: #707a8c !important;
-        --dsw-alias-label-dimmed: #515764 !important;
-        --dsw-alias-label-caption: #707a8c !important;
-        --dsw-alias-interactive-bg-hover: rgba(255, 204, 102, 0.1) !important;
-        --dsw-alias-interactive-bg-active: rgba(255, 204, 102, 0.18) !important;
-        --dsw-alias-border-l1: #373e4c !important;
-        --dsw-alias-border-l2: #2d3340 !important;
-        --dsw-alias-border-l3: #444c5e !important;
-        --dsw-alias-border-l4: #515764 !important;
-        --dsw-alias-markdown-code-block: #171b24 !important;
-        --dsw-alias-markdown-code-block-banner: #1f2430 !important;
-        --dsw-alias-scrollbar-bg-l2: #373e4c !important;
-        --dsw-alias-scrollbar-hover-l2: #ffcc66 !important;
-      }
-      body, body[data-ds-dark-theme] { background-color: #1f2430 !important; color: #cbccc6 !important; }
-      pre, code, [class*="codeBlock"] {
-        background-color: #171b24 !important;
-        color: #cbccc6 !important;
-        border-color: #373e4c !important;
-      }
-      [class*="selector"], [class*="themeCube"] {
-        color: #cbccc6 !important;
-        background-color: #262c3b !important;
-      }
-      [class*="selected"], [class*="themeCube"]:hover {
-        border-color: #ffcc66 !important;
-      }
-    `
-  },
-  "light": {
-    name: "escook Light (经典浅色 · 典雅紫罗兰)",
-    desc: "Solarized 经典护眼暖米白搭配典雅紫罗兰与青墨文本，温润纸质书卷感",
-    type: "light",
-    colorPreview: "#705697",
-    bgPreview: "#fdf6e3",
-    css: `
-      :root, html, body, body[data-ds-dark-theme], [data-theme="escook-light"] {
-        --dsw-alias-bg-base: #fdf6e3 !important;
-        --dsw-alias-bg-layer-1: #f8f0d8 !important;
-        --dsw-alias-bg-layer-2: #ffffff !important;
-        --dsw-alias-bg-layer-3: #eee8d5 !important;
-        --dsw-alias-bg-module-platform: #eee8d5 !important;
-        --dsw-alias-bg-multi-select: #eee8d5 !important;
-        --dsw-alias-bg-overlay: #e3dac6 !important;
-        --dsw-specific-selector: #eee8d5 !important;
-        --dsw-alias-bg-mask-1: rgba(50, 40, 60, 0.25) !important;
-        --dsw-specific-sidebar-fill: #f8f0d8 !important;
-        --dsw-specific-sidebar-nav-item-hover: rgba(112, 86, 151, 0.08) !important;
-        --dsw-specific-sidebar-nav-item-active: rgba(112, 86, 151, 0.16) !important;
-        --dsw-specific-sidebar-nav-item-active-accent: #705697 !important;
-        --dsw-specific-input-major: #ffffff !important;
-        --dsw-specific-bubble: #ffffff !important;
-        --dsw-specific-menu: #ffffff !important;
-        --dsw-hovercard-bg: #ffffff !important;
-        --dsw-alias-tooltip-bg: #2b2638 !important;
-        --dsw-alias-button-elevated-fill: #f4ecce !important;
-        --dsw-alias-button-floating-hover: #ece2c4 !important;
-        --dsw-alias-brand-primary: #705697 !important;
-        --dsw-alias-button-primary-fill: #705697 !important;
-        --dsw-alias-button-primary-hover: #876cad !important;
-        --dsw-alias-label-primary-foreground: #ffffff !important;
-        --dsw-alias-label-primary: #586e75 !important;
-        --dsw-alias-label-secondary: #657b83 !important;
-        --dsw-alias-label-tertiary: #93a1a1 !important;
-        --dsw-alias-label-dimmed: #b58900 !important;
-        --dsw-alias-label-caption: #93a1a1 !important;
-        --dsw-alias-interactive-bg-hover: rgba(112, 86, 151, 0.08) !important;
-        --dsw-alias-interactive-bg-active: rgba(112, 86, 151, 0.15) !important;
-        --dsw-alias-border-l1: #e3dac6 !important;
-        --dsw-alias-border-l2: #ece3cf !important;
-        --dsw-alias-border-l3: #d8ceb8 !important;
-        --dsw-alias-border-l4: #b58900 !important;
-        --dsw-alias-markdown-code-block: #f5eed8 !important;
-        --dsw-alias-markdown-code-block-banner: #ebe4cc !important;
-        --dsw-alias-scrollbar-bg-l2: #e3dac6 !important;
-        --dsw-alias-scrollbar-hover-l2: #705697 !important;
-      }
-      body, body[data-ds-dark-theme] { background-color: #fdf6e3 !important; color: #586e75 !important; }
-      pre, code, [class*="codeBlock"] {
-        background-color: #f5eed8 !important;
-        color: #586e75 !important;
-        border-color: #e3dac6 !important;
-      }
-      [class*="selector"], [class*="themeCube"] {
-        color: #586e75 !important;
-        background-color: #eee8d5 !important;
-      }
-      [class*="selected"], [class*="themeCube"]:hover {
-        border-color: #705697 !important;
-      }
-    `
-  },
-  "light-soft": {
-    name: "escook Light Soft (柔和浅色 · 活力柔和橙)",
-    desc: "现代极简清透浅灰搭配柔和活力橙，明亮清爽不刺眼",
-    type: "light",
-    colorPreview: "#ff9940",
-    bgPreview: "#fafafa",
-    css: `
-      :root, html, body, body[data-ds-dark-theme], [data-theme="escook-light-soft"] {
-        --dsw-alias-bg-base: #fafafa !important;
-        --dsw-alias-bg-layer-1: #f2f2f2 !important;
-        --dsw-alias-bg-layer-2: #ffffff !important;
-        --dsw-alias-bg-layer-3: #e8e8e8 !important;
-        --dsw-alias-bg-module-platform: #e8e8e8 !important;
-        --dsw-alias-bg-multi-select: #e8e8e8 !important;
-        --dsw-alias-bg-overlay: #dcdcdc !important;
-        --dsw-specific-selector: #e8e8e8 !important;
-        --dsw-alias-bg-mask-1: rgba(0, 0, 0, 0.2) !important;
-        --dsw-specific-sidebar-fill: #f2f2f2 !important;
-        --dsw-specific-sidebar-nav-item-hover: rgba(255, 153, 64, 0.08) !important;
-        --dsw-specific-sidebar-nav-item-active: rgba(255, 153, 64, 0.16) !important;
-        --dsw-specific-sidebar-nav-item-active-accent: #ff9940 !important;
-        --dsw-specific-input-major: #ffffff !important;
-        --dsw-specific-bubble: #ffffff !important;
-        --dsw-specific-menu: #ffffff !important;
-        --dsw-hovercard-bg: #ffffff !important;
-        --dsw-alias-tooltip-bg: #2d3748 !important;
-        --dsw-alias-button-elevated-fill: #eaeaea !important;
-        --dsw-alias-button-floating-hover: #e0e0e0 !important;
-        --dsw-alias-brand-primary: #ff9940 !important;
-        --dsw-alias-button-primary-fill: #ff9940 !important;
-        --dsw-alias-button-primary-hover: #f58220 !important;
-        --dsw-alias-label-primary-foreground: #ffffff !important;
-        --dsw-alias-label-primary: #2d3748 !important;
-        --dsw-alias-label-secondary: #4a5568 !important;
-        --dsw-alias-label-tertiary: #718096 !important;
-        --dsw-alias-label-dimmed: #a0aec0 !important;
-        --dsw-alias-label-caption: #718096 !important;
-        --dsw-alias-interactive-bg-hover: rgba(255, 153, 64, 0.08) !important;
-        --dsw-alias-interactive-bg-active: rgba(255, 153, 64, 0.15) !important;
-        --dsw-alias-border-l1: #dcdcdc !important;
-        --dsw-alias-border-l2: #e8e8e8 !important;
-        --dsw-alias-border-l3: #d0d0d0 !important;
-        --dsw-alias-border-l4: #a0aec0 !important;
-        --dsw-alias-markdown-code-block: #f0f2f5 !important;
-        --dsw-alias-markdown-code-block-banner: #e6e9ee !important;
-        --dsw-alias-scrollbar-bg-l2: #dcdcdc !important;
-        --dsw-alias-scrollbar-hover-l2: #ff9940 !important;
-      }
-      body, body[data-ds-dark-theme] { background-color: #fafafa !important; color: #2d3748 !important; }
-      pre, code, [class*="codeBlock"] {
-        background-color: #f0f2f5 !important;
-        color: #2d3748 !important;
-        border-color: #dcdcdc !important;
-      }
-      [class*="selector"], [class*="themeCube"] {
-        color: #2d3748 !important;
-        background-color: #e8e8e8 !important;
-      }
-      [class*="selected"], [class*="themeCube"]:hover {
-        border-color: #ff9940 !important;
-      }
-    `
-  }
-};
-
-export default function activate(context) {
-  // 环境感知与防冲突协同：若宿主环境为 DSH Desktop 客户端且已原生内置主题，自动注册最新主题并委派托管
-  if (typeof window !== "undefined" && window.__DSH_BUILTIN_THEMES__) {
-    console.info("🌸 [dsh-theme-escook] 检测到当前处于 DSH Desktop 桌面端，正在将插件最新主题矩阵热同步至客户端...");
-    const builtin = window.__DSH_BUILTIN_THEMES__;
-    if (typeof builtin.registerThemes === "function") {
-      builtin.registerThemes(THEME_SCHEMES);
-    }
-    const themeController = {
-      schemes: Object.keys(THEME_SCHEMES),
-      setScheme(key) {
-        builtin.apply(key);
-      },
-      getCurrentScheme() {
-        return builtin.getCurrent();
-      },
-      dispose() {
-        // 由桌面端原生管理生命周期
-        if (window.__ESCOOK_THEME__ === themeController) {
-          delete window.__ESCOOK_THEME__;
-        }
-      }
-    };
-    window.__ESCOOK_THEME__ = themeController;
-    return themeController;
-  }
-
-  const styleId = "dsh-theme-escook-styles";
-  const storageKey = "dsh_theme_escook_scheme";
-  let styleEl = document.getElementById(styleId);
-
-  function applyScheme(key) {
-    const validKey = THEME_SCHEMES[key] ? key : "dark-soft";
-    const scheme = THEME_SCHEMES[validKey];
-
-    if (!styleEl) {
-      styleEl = document.createElement("style");
-      styleEl.id = styleId;
-      document.head.appendChild(styleEl);
-    }
-    styleEl.textContent = scheme.css;
-    document.documentElement.setAttribute("data-dsh-theme", `escook-${validKey}`);
-    try {
-      localStorage.setItem(storageKey, validKey);
-    } catch (e) {}
-    console.info(`🌸 [dsh-theme-escook] 当前激活配色: ${scheme.name}`);
-  }
-
-  let savedScheme = "dark-soft";
-  try {
-    savedScheme = localStorage.getItem(storageKey) || localStorage.getItem("dsh_selected_theme") || "dark-soft";
-  } catch (e) {}
-
-  applyScheme(savedScheme);
+export { THEME_SCHEMES };
+export const inject = ['theme', 'slots'];
+const STORAGE_KEY = 'dsh_theme_escook_scheme';
 
-  const themeController = {
+function activate(ctx) {
+  const cleanups = [];
+  const listeners = new Set();
+  const previousPreference = ctx.theme.getTheme().preference;
+  let disposed = false;
+  const read = () => {
+    try { return localStorage.getItem(STORAGE_KEY) || localStorage.getItem('dsh_selected_theme'); }
+    catch { return null; }
+  };
+  const save = (key) => {
+    try { localStorage.setItem(STORAGE_KEY, key); } catch { /* 存储不可用时仍可在当前页面切换。 */ }
+  };
+  const current = () => Object.keys(THEME_SCHEMES).find((key) => THEME_SCHEMES[key].id === ctx.theme.getTheme().preference) || 'application';
+  const controller = {
     schemes: Object.keys(THEME_SCHEMES),
+    subscribe(listener) { listeners.add(listener); return () => listeners.delete(listener); },
+    getCurrentScheme: current,
     setScheme(key) {
-      applyScheme(key);
-    },
-    getCurrentScheme() {
-      try {
-        return localStorage.getItem(storageKey) || "dark-soft";
-      } catch (e) {
-        return "dark-soft";
-      }
+      if (disposed) return;
+      if (key !== 'application' && !THEME_SCHEMES[key]) throw new Error(`未知 Escook 主题：${key}`);
+      ctx.theme.setTheme(key === 'application' ? 'system' : THEME_SCHEMES[key].id);
+      save(key);
     },
     dispose() {
-      if (styleEl && styleEl.parentNode) {
-        styleEl.parentNode.removeChild(styleEl);
-      }
-      document.documentElement.removeAttribute("data-dsh-theme");
-      if (window.__ESCOOK_THEME__ === themeController) {
-        delete window.__ESCOOK_THEME__;
-      }
+      if (disposed) return;
+      disposed = true;
+      // 先停止持久化监听，再撤销注册，避免把卸载时的回退写成用户选择。
+      for (const cleanup of cleanups.reverse()) cleanup();
+      listeners.clear();
+      if (window.__ESCOOK_THEME__ === controller) delete window.__ESCOOK_THEME__;
     }
   };
 
-  window.__ESCOOK_THEME__ = themeController;
-  return themeController;
+  try {
+    for (const scheme of Object.values(THEME_SCHEMES)) {
+      cleanups.push(ctx.theme.register({ id: scheme.id, colorScheme: scheme.type, tokens: scheme.tokens }));
+    }
+    cleanups.push(() => {
+      if (current() !== 'application') {
+        const available = ctx.theme.getTheme().themes?.some((theme) => theme.id === previousPreference);
+        ctx.theme.setTheme(available || previousPreference === 'system' ? previousPreference : 'system');
+      }
+    });
+    const style = document.createElement('style');
+    style.id = 'dsh-theme-escook-settings';
+    style.textContent = SETTINGS_CSS;
+    document.head.appendChild(style);
+    cleanups.push(() => style.parentNode?.removeChild(style));
+    const saved = read();
+    if (saved !== 'application') controller.setScheme(THEME_SCHEMES[saved] ? saved : 'dark-soft');
+    let previousSnapshot = ctx.theme.getTheme();
+    cleanups.push(ctx.on('theme/change', (snapshot) => {
+      const previous = previousSnapshot;
+      previousSnapshot = snapshot;
+      // 当前内核在写入字体大小时同时采纳原生 preference，保留独立的主题选择。
+      if (Object.values(THEME_SCHEMES).some((scheme) => scheme.id === previous.preference)
+        && snapshot.fontSize !== previous.fontSize && snapshot.preference !== previous.preference) {
+        ctx.theme.setTheme(previous.preference);
+        return;
+      }
+      save(current());
+      for (const listener of listeners) listener();
+    }));
+    cleanups.push(ctx.slots.inject('settings.general.item', () => ctx.slots.register({
+      name: 'settings.general.item', id: 'dsh-theme-escook', order: 12,
+      inject: () => ({ controller })
+    }, ThemeSettings)));
+    window.__ESCOOK_THEME__ = controller;
+    return controller;
+  } catch (error) {
+    controller.dispose();
+    throw error;
+  }
 }
 
-// 宿主以 Cordis 插件对象激活模块，卸载时释放本插件拥有的资源。
-export const apply = (context) => {
-  const controller = activate(context);
+// Cordis 会把普通函数识别为构造函数，必须保持不可构造的激活入口。
+export const apply = (ctx) => {
+  const controller = activate(ctx);
   return () => controller.dispose();
 };
+
+// 宿主 Loader 优先选择 default，依赖声明和激活入口必须在同一对象上。
+export default { inject, apply };

package/client/palette.js

@@ -1,59 +1,84 @@
-/**
- * Escook Theme Color Palettes Definition (Redesigned & Modernized)
- * 100% 对齐 codex-desktop 与官方正统 escook-theme 调色哲学
- */
-
+// 统一调色来源。文字与交互背景成对定义，浮层使用不透明背景。
 export const PALETTES = {
   dark: {
-    name: "escook Dark (经典暗黑)",
-    desc: "VS Code 彬哥经典暖调极客深灰搭配标志暖阳橙，正统耐看长效护眼",
-    type: "dark",
-    bgBase: "#252526",
-    bgSidebar: "#202021",
-    bgSurface: "#29292c",
-    accent: "#ef820c",
-    accentHover: "#ff9940",
-    textPrimary: "#fafafa",
-    textSecondary: "#cccccc",
-    border: "#333333"
+    name: '经典暗黑', type: 'dark', bg: '#252526', sidebar: '#202021', surface: '#29292c',
+    layer: '#2d2d30', hover: '#363638', selected: '#403628', accent: '#ef820c', accentHover: '#ff9940',
+    brand: '#ef820c', foreground: '#202021', text: '#fafafa', secondary: '#cccccc', muted: '#b6b6bd', border: '#606065', code: '#1c1c1d'
   },
-  darkSoft: {
-    name: "escook Dark Soft (柔和暗黑)",
-    desc: "Ayu 经典深海蓝灰底色搭配温润奶杏黄，细腻柔和长效防疲劳",
-    type: "dark",
-    bgBase: "#1f2430",
-    bgSidebar: "#191e28",
-    bgSurface: "#232834",
-    accent: "#ffcc66",
-    accentHover: "#ffd580",
-    textPrimary: "#cbccc6",
-    textSecondary: "#969aa4",
-    border: "#373e4c"
+  'dark-soft': {
+    name: '柔和暗黑', type: 'dark', bg: '#1f2430', sidebar: '#191e28', surface: '#232834',
+    layer: '#262c3b', hover: '#333a4c', selected: '#41404a', accent: '#ffcc66', accentHover: '#ffd580',
+    brand: '#ffcc66', foreground: '#1f2430', text: '#eceee9', secondary: '#c1c5cf', muted: '#b6bcc9', border: '#68738a', code: '#171b24'
   },
   light: {
-    name: "escook Light (经典紫韵浅色)",
-    desc: "Solarized 经典护眼暖米白搭配典雅紫罗兰与青墨文本，温润纸质书卷感",
-    type: "light",
-    bgBase: "#fdf6e3",
-    bgSidebar: "#f8f0d8",
-    bgSurface: "#ffffff",
-    accent: "#705697",
-    accentHover: "#876cad",
-    textPrimary: "#586e75",
-    textSecondary: "#657b83",
-    border: "#e3dac6"
+    name: '经典浅色', type: 'light', bg: '#fdf6e3', sidebar: '#f8f0d8', surface: '#ffffff',
+    layer: '#eee8d5', hover: '#e9e2d2', selected: '#e1d8cc', accent: '#705697', accentHover: '#654c89',
+    brand: '#705697', foreground: '#ffffff', text: '#35484f', secondary: '#465a61', muted: '#4c5e66', border: '#8b8173', code: '#f5eed8'
   },
-  lightSoft: {
-    name: "escook Light Soft (柔和浅色)",
-    desc: "现代极简清透浅灰搭配柔和活力橙，明亮清爽不刺眼",
-    type: "light",
-    bgBase: "#fafafa",
-    bgSidebar: "#f2f2f2",
-    bgSurface: "#ffffff",
-    accent: "#ff9940",
-    accentHover: "#f58220",
-    textPrimary: "#2d3748",
-    textSecondary: "#4a5568",
-    border: "#dcdcdc"
+  'light-soft': {
+    name: '柔和浅色', type: 'light', bg: '#fafafa', sidebar: '#f2f2f2', surface: '#ffffff',
+    layer: '#e8e8e8', hover: '#e4e4e4', selected: '#f1dfca', accent: '#ff9940', accentHover: '#f58220',
+    brand: '#934400', foreground: '#222936', text: '#2d3748', secondary: '#4a5568', muted: '#505d70', border: '#838b96', code: '#f0f2f5'
   }
 };
+
+function tokens(p) {
+  return {
+    '--dsw-alias-bg-base': p.bg,
+    '--dsw-alias-bg-layer-1': p.sidebar,
+    '--dsw-alias-bg-layer-2': p.surface,
+    '--dsw-alias-bg-layer-3': p.layer,
+    '--dsw-alias-bg-module-platform': p.layer,
+    '--dsw-alias-bg-multi-select': p.selected,
+    '--dsw-alias-bg-overlay': p.surface,
+    '--dsw-specific-selector': p.layer,
+    '--dsw-specific-sidebar-fill': p.sidebar,
+    '--dsw-specific-sidebar-nav-item-hover': p.hover,
+    '--dsw-specific-sidebar-nav-item-active': p.selected,
+    '--dsw-specific-sidebar-nav-item-active-accent': p.brand,
+    '--dsw-specific-input-major': p.surface,
+    '--dsw-specific-login-input': p.surface,
+    '--dsw-specific-bubble': p.surface,
+    '--dsw-specific-menu': p.surface,
+    '--dsw-menu-surface-fill': p.surface,
+    '--dsw-alias-menu-group-header-fill': p.surface,
+    '--dsw-alias-menu-icon': p.text,
+    '--dsw-hovercard-bg': p.surface,
+    '--dsw-alias-tooltip-bg': '#222936',
+    '--escook-tooltip-text': '#ffffff',
+    '--dsw-alias-button-elevated-fill': p.surface,
+    '--dsw-alias-button-floating-fill': p.surface,
+    '--dsw-alias-button-floating-hover': p.hover,
+    '--dsw-alias-button-ghost-active-fill': p.selected,
+    '--dsw-alias-button-ghost-active-hover': p.hover,
+    '--dsw-alias-button-ghost-active-border': p.border,
+    '--dsw-alias-brand-primary': p.brand,
+    '--dsw-alias-link': p.brand,
+    '--dsw-alias-button-primary-fill': p.accent,
+    '--dsw-alias-button-primary-hover': p.accentHover,
+    '--dsw-alias-label-primary-foreground': p.foreground,
+    '--dsw-alias-label-primary': p.text,
+    '--dsw-alias-label-primary-dimmed': p.secondary,
+    '--dsw-alias-label-primary-bluish': p.text,
+    '--dsw-alias-label-document-preview': p.secondary,
+    '--dsw-alias-label-secondary': p.secondary,
+    '--dsw-alias-label-tertiary': p.muted,
+    '--dsw-alias-label-dimmed': p.muted,
+    '--dsw-alias-label-caption': p.muted,
+    '--dsw-alias-interactive-bg-hover': p.hover,
+    '--dsw-alias-interactive-bg-active': p.selected,
+    '--dsw-alias-border-l1': p.border,
+    '--dsw-alias-border-l2': p.border,
+    '--dsw-alias-border-l3': p.border,
+    '--dsw-alias-border-l4': p.border,
+    '--dsw-alias-markdown-code-block': p.code,
+    '--dsw-alias-markdown-code-block-banner': p.layer,
+    '--dsw-alias-scrollbar-bg-l2': p.border,
+    '--dsw-alias-scrollbar-hover-l2': p.brand
+  };
+}
+
+export const THEME_SCHEMES = Object.fromEntries(Object.entries(PALETTES).map(([key, palette]) => [key, {
+  id: `escook-${key}`, name: palette.name, type: palette.type,
+  colorPreview: palette.accent, bgPreview: palette.bg, tokens: tokens(palette)
+}]));

package/client/theme-settings.js

@@ -0,0 +1,32 @@
+import { createElement as h, useSyncExternalStore } from 'react';
+import { THEME_SCHEMES } from './palette.js';
+
+export function ThemeSettings({ controller }) {
+  const selected = useSyncExternalStore(controller.subscribe, controller.getCurrentScheme, controller.getCurrentScheme);
+  const options = [...Object.entries(THEME_SCHEMES), ['application', { name: '跟随应用' }]];
+  return h('section', { className: 'escook-settings', 'aria-label': 'Escook 主题' },
+    h('h3', null, 'Escook 主题'),
+    h('p', null, '选择配色后立即生效。选择“跟随应用”后，可使用上方的应用外观设置。'),
+    h('div', { className: 'escook-settings-options', role: 'group', 'aria-label': '主题配色' },
+      options.map(([key, scheme]) => h('button', {
+        key, type: 'button', 'data-escook-scheme': key, 'aria-pressed': selected === key,
+        onClick: () => controller.setScheme(key)
+      }, scheme.bgPreview && h('span', {
+        className: 'escook-settings-preview', 'aria-hidden': true,
+        style: { background: scheme.bgPreview, borderColor: scheme.colorPreview }
+      }, h('span', { style: { background: scheme.colorPreview } })), scheme.name))));
+}
+
+// 样式仅作用于本插件的选择控件，宿主组件由 theme 服务统一着色。
+export const SETTINGS_CSS = `
+.escook-settings{padding:16px 0;border-bottom:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary)}
+.escook-settings h3{font-size:14px;font-weight:500;margin:0 0 8px}
+.escook-settings p{font-size:13px;color:var(--dsw-alias-label-secondary);margin:0 0 12px;line-height:1.6}
+.escook-settings-options{display:flex;flex-wrap:wrap;gap:8px}
+.escook-settings-options button{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;font:inherit;font-size:14px;border:1px solid var(--dsw-alias-border-l4);border-radius:10px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);cursor:pointer}
+.escook-settings-options button:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.escook-settings-options button[aria-pressed="true"]{background:var(--dsw-alias-interactive-bg-active);border-color:var(--dsw-alias-brand-primary);box-shadow:inset 0 0 0 1px var(--dsw-alias-brand-primary)}
+.escook-settings-options button:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:3px}
+.escook-settings-preview{display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;border:2px solid;border-radius:6px}
+.escook-settings-preview span{width:10px;height:10px;border-radius:50%}
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-theme-escook",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "🌸 彬哥の经典主题 (escook-theme) for DeepSeek Harness — 优雅暗夜紫调与琥珀金高亮美学主题",
   "type": "module",
   "main": "lib/index.js",
@@ -8,7 +8,7 @@
   "scripts": {
     "build": "node scripts/build-client.mjs",
     "prepack": "npm run build && npm test",
-    "test": "node --test test/client-entry.test.mjs test/runtime-compatibility.test.mjs test/host-loader.test.mjs && node test/verify-themes.mjs"
+    "test": "node --test test/*.test.mjs && node test/verify-themes.mjs"
   },
   "exports": {
     ".": "./lib/index.js",
@@ -54,10 +54,12 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@deepseek-ai/dsh-client-ui-theme": ">=0.0.1-rc.1 <0.1.0 || >=0.1.0-rc.1 <0.2.0-0 || >=0.2.0-rc.2 <0.3.0-0"
+    "@deepseek-ai/dsh-client-ui-theme": ">=0.2.0-rc.2 <0.3.0-0"
   },
   "devDependencies": {
     "esbuild": "^0.28.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "semver": "^7.7.2"
   },
   "publishConfig": {