dsh-palenight-theme: DSH Harness Web UI 主题

前言¶

DSH 的 Web UI 提供了基础的主题服务。如果希望在深色或浅色环境下工作，手动调整 CSS 变量既繁琐又容易遗漏细节。dsh-palenight-theme 插件封装了这一过程，提供了一套完整的主题覆盖方案。

插件简介¶

这是一个为 dsh Harness Web UI 设计的主题插件，由 youyli03 维护。它以两种形式交付：持久化 Bundle（推荐）和动态 Cordis 插件。

核心功能¶

• 双模式支持：提供深色模式（基于 Community Material Theme Palenight）和浅色模式（暖中性）。
  • 深色模式：靛蓝表面 (#292D3E)，淡紫罗兰色文字 (#A6ACCD)，青色强调色 (#80CBC4)。
  • 浅色模式：羊皮纸背景 (#F5F4F0)，暖灰色文字 (#4F4B45)，青色强调色 (#00897B)。
• 变量覆盖：覆盖约 100 个主题变量，包括表面、标签/页眉、输入框、菜单、文本层级、边框、按钮、交互状态、代码块和滚动条。
• 演示组件：包含运行卡片面板和作曲家状态行的演示 UI 组件。
• 热更新：支持通过 dsh-client-hmr 进行热更新，无需重启宿主进程。
• 两种形式：
  • 持久化 Bundle：推荐形式，随宿主重启而保留。
  • 动态 Cordis 插件：仅对当前会话有效，已标记为废弃。

安装与启用¶

官方推荐的安装方式是使用 DSH 的包管理命令。

dsh plugin --profile web add dsh-palenight-theme

安装后，重启 dsh 以激活持久化 bundle。重启后，主题将自动加载，并在宿主重启时保持激活状态。

使用方法¶

安装并重启后，可以通过代码调用 theme.overrideTokens 来应用主题层。例如：

theme.overrideTokens('deepseek-palenight-theme', {
  '--dsw-alias-bg-base': { light: '#F5F4F0', dark: '#292D3E' },
  '--dsw-alias-brand-primary': { light: '#00897B', dark: '#80CBC4' },
  // ... 约 100 个 token
})

工作原理与注意事项¶

• 激活机制：客户端 bundle 声明了 inject: ['theme']，这要求 theme 服务必须可用。如果服务未就绪，ctx.get('theme') 将返回 undefined，导致样式不生效。
• 持久化 vs 动态：持久化 bundle 将主题作为宿主配置的一部分，重启后依然存在；动态 Cordis 插件仅在会话期间激活，重启即失效。
• 技术栈：插件代码为纯 JavaScript（无 TS/JSX/import）。

获取与反馈¶

该插件托管在 GitHub，同时也收录在 SkillHub 社区目录中。

• GitHub 仓库
• 社区目录