dsh-vscode-themes2:在 DSH Web UI 里浏览并套用 VS Code 配色

前言

DeepSeek Harness(DSH)的 Web 界面默认有一套设计 token。若你长期在 VS Code 里用 One Dark Pro、Dracula、Nord 等主题,切到 Harness 设置页时视觉习惯会断档。自己改 CSS 或 fork 前端成本高,且 marketplace 上的主题格式与 DSH 并不直接兼容。

下面介绍的 dsh-vscode-themes2(维护者 zxbc,SkillHub 分类:趣味换装)把「选 VS Code 主题、一键换肤」做成 DSH 插件:在 Settings 里出现 VS Code Themes 区块,内置 14 套常见主题,并支持搜索 VS Code Marketplace、安装 .vsix、映射到 DSH Web UI 设计 token,点击卡片即可实时换肤。

这是什么

插件全名 dsh-vscode-themes2(包名末尾的 2 为历史命名,安装命令须原样使用)。一句话定位:Browse and apply popular VS Code color themes to the DeepSeek Harness Web UI。

DSH 生态理念是「一切皆插件」;SkillHub 等为社区目录,与 DeepSeek / 幻方无官方从属关系。

核心功能

Settings 里的主题画廊

安装并在 web profile 启用后,Harness Web UI 的 Settings 会增加 VS Code Themes 区域。每张主题卡片用该主题自身色板渲染预览(示例文字、语义 chip、强调按钮等),当前选中的卡片带 Active 环与 pill。

内置与已安装主题

插件 bundled 14 套常见 VS Code 主题(README 列举包括 One Dark Pro、Dracula、GitHub Light、Nord、Catppuccin Mocha、Tokyo Gogh Alt、Monokai Classic、Solarized、Kanagawa、Palenight Italic、Kimbie Dark 等)。搜索框会同时过滤本地主题(已安装 + 内置);已安装主题在重启后仍保留,并按「最近安装优先」排在前面。

Marketplace 搜索与安装

输入 2 个字符及以上 的查询时,除本地结果外,Host 半会通过官方 VS Code Marketplace gallery API 搜索(仅 themes 分类)。Marketplace 命中单独成区,带 live swatch 与 Install 按钮。点击 Install 时 Host 从 gallery.vsassets.io 下载 .vsix,在进程内解压并读取主题 JSONC(去注释、去尾逗号后解析),映射到 DSH 设计 token。

一键应用与持久化

点击任意卡片 立即应用 主题,整站 UI 实时换肤。当前选择写入浏览器 localStorage(键名 dsh.vscodeThemes.selected),重启浏览器后仍生效。已安装列表键名为 dsh.vscodeThemes.installed(JSON 数组,最近在前)。

失败隔离

下载、解析或映射失败(例如格式不兼容、缺少可解析的 editor.background / editor.foreground)时,界面会显示 可见错误,不会拖垮插件或其余 UI。

架构要点(开发者向)

插件为 两半式 DSH 插件:浏览器半网络受限,访问 Marketplace 的逻辑在 Host 半(index.js + marketplace.js),经名为 vscodeThemes 的 remote service 暴露给浏览器(client.js 通过 ctx.remote.$mount 挂载)。浏览器半负责注册主题(ctx.theme.register)、设置 UI 与 localStorage 持久化。

安装与启用

在 DSH web profile(例如默认 web)下执行:

dsh plugin --profile web add dsh-vscode-themes2

若已有本地插件目录(非 git clone 场景下的路径安装),README 另给出:

dsh plugin install /path/to/dsh-vscode-themes2

安装前请自行查看仓库源码与 MIT 许可证;插件 Host 半在 当前 dsh 进程权限 下运行,并会在你主动搜索或点击 Install 时发起出站请求(见下文)。

典型用法

  1. 安装插件并启动/重启使用 web profile 的 DSH,在浏览器打开 Harness Web UI。
  2. 进入 Settings,找到 VS Code Themes。
  3. 在画廊中点击某张内置主题卡片,确认整页 UI 是否按该色板切换;刷新页面后选择应仍保留。
  4. 在搜索框输入主题名(至少 2 个字符),查看本地过滤结果与 Marketplace 分区;对 Marketplace 条目点击 Install,安装完成后卡片会进入已安装列表并可用于点击应用。
  5. 若某主题安装或应用失败,阅读卡片或面板上的错误提示;已知限制包括部分 Marketplace 主题因无法解析背景/前景色而被跳过。

权限、网络与隐私

Host 半 仅在用户操作时 访问外网:

  • POST https://marketplace.visualstudio.com/_apis/public/gallery/extensionquery — 主题搜索(查询 ≥2 字符时)
  • GET https://{publisher}.gallery.vsassets.io/…vspackage — 点击 Install 时下载 .vsix

README 说明:无遥测、无其他网络调用;解析与 token 映射均在 Host 进程本地完成。浏览器侧仅使用 localStorage(dsh.vscodeThemes.*),不上传主题选择数据。

适用场景与注意

适合谁: 主要在 DSH Web UI 里工作、希望界面配色与 VS Code 习惯一致,或想快速试 marketplace 主题而不改前端代码的开发者。

注意:

  • 仅 web profile + DSH 0.2.1-alpha.1 为文档写明兼容组合;其他 profile 或版本需自行验证。
  • 安装 marketplace 主题等于信任该扩展发布者与 CDN;请在企业或受限网络环境中评估出站策略。
  • 插件以当前 Harness 进程权限运行;安装前阅读 client.js、marketplace.js 与 PROGRESS.md 中的协议与边界说明。

结尾

dsh-vscode-themes2 把 VS Code 主题 catalog 与 Marketplace 安装链路接到 DSH Settings,用一次点击完成 Web UI live re-skin,并把选择与已安装主题留在本地。若要查看截图与文件结构,见 GitHub README;社区索引见 SkillHub 目录页。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye