dsh-theme-stripe-style:为 DSH Web 界面套用 Stripe 风格外壳

前言

DeepSeek Harness(DSH)的 Web 界面默认走内置浅色、深色或跟随系统。若你希望在不动对话排版的前提下,给外壳换上更接近 Stripe 产品页的空间感——紫色细网格、卡片阴影层次、统一的圆角与强调色——需要自己改 CSS 或 fork 前端,成本和升级冲突都偏高。dsh-theme-stripe-style 以 DSH 主题插件的形式只替换设计 token 与外壳样式,阅读区 Markdown 与聊天气泡内部结构保持原样。

这是什么

dsh-theme-stripe-style 由 Jimxinfang 维护,分类为趣味换装(theme)。它面向 DSH Web GUI(含可通过 dsh web 启动的浏览器端与 DSH Desktop 的 web 侧),参考 StyleKit 的 Stripe Style 规范,提供「白昼紫 / 午夜蓝」两套主题,并在设置里支持一键恢复出厂外观。插件不注册任何模型可见工具,不影响 agent 行为。

兼容 DSH Web 0.2.1 线(README 写明在 0.2.1-rc.3 上完成端到端验证)。npm 包版本为 0.1.0,许可证 MIT。

核心功能

双主题与记忆

  • 白昼紫:背景 #f6f9fc,白卡片,主色 #635bff。
  • 午夜蓝:背景 #0a2540,深蓝卡片,主色 #7a73ff。

安装后首次加载会按当前明暗自动套用对应版本;之后在 设置 → 通用 → Stripe 紫光主题 中切换,选择立即生效并跨重启保留。偏好写在浏览器 localStorage 的 dsh-theme-stripe-style.preference;主题通过 DSH 官方 ctx.theme 服务注册。

点 出厂外观 可完全恢复 DSH 内置浅色/深色/跟随系统;之后再选内置外观时,插件不会抢回主题。

Stripe 式视觉与交互

全窗 40px 紫色细网格 与顶部紫色径向光晕;卡片 12px 圆角,按钮/输入/菜单 8px 圆角,1px 低对比描边。卡片用两层级联柔和阴影;hover 上浮 2px,按下 scale(.98) 并加内阴影。输入区顶部有 2px 紫→青渐变线;聚焦时 3px 紫色扩散环。亮紫主要用于主按钮、选中态、焦点环和关键高亮。

阅读区与可访问性

不改 Markdown 排版、字号、行宽。浅色版代码块保持浅底;深色版深底浅字。正文/次要文字/链接/主按钮的 WCAG 对比度在 test/theme.test.mjs 中校验;键盘焦点 3px 紫环;遵循 prefers-reduced-motion。

生命周期与依赖

主题注册、样式表、body 标记与监听器挂在插件生命周期上;禁用或卸载即恢复原样。零外部依赖:不加载网络字体、图片、音频;不依赖 CSS-module 哈希类名。已知边界:聊天气泡、Markdown 根节点、工具卡内部等哈希类名区域主题刻意不碰;老版本 WebView 对 color-mix() / :has() 不支持时会回退为不带网格的纯色背景。

安装与启用

Host 只在启动时扫描插件清单,新增插件需重启 一次 dsh web 或桌面应用;装好后换主题无需再重启。

从 npm 安装(推荐)

dsh plugin --profile web add dsh-theme-stripe-style@0.1.0

从 GitHub Release 安装(备选)

dsh plugin --profile web add https://github.com/Jimxinfang/dsh-theme-stripe-style/releases/download/v0.1.0/dsh-theme-stripe-style-0.1.0.tgz

本地目录或压缩包

开发/自用可在插件目录执行 ./scripts/install-local.sh(Desktop 用 ./scripts/install-local.sh desktop,卸载用 ./scripts/uninstall-local.sh)。也可:

dsh plugin --profile web add /absolute/path/to/dsh-theme-stripe-style

或 npm pack 后:

dsh plugin --profile web add ./dsh-theme-stripe-style-0.1.0.tgz

DSH Desktop 的 desktop profile 由应用内插件管理器管理;若命令行安装被覆盖,可改用 npm 或 Release tarball。非标准安装可设 DSH_CLI=/path/to/dsh 供脚本定位 CLI。

安装完成后重启对应实例即可;首次打开界面会按当前明暗自动启用 Stripe 主题。

典型用法

  1. 打开 设置 → 通用,滚动到 Stripe 紫光主题。
  2. 点 白昼紫 或 午夜蓝。
  3. 需要恢复默认 UI 时点 出厂外观。

卸载:

dsh plugin --profile web remove dsh-theme-stripe-style

适用场景与注意

适合长期在 DSH Web 或 Desktop 上工作、希望界面更接近 Stripe 仪表盘气质、又不愿改对话区排版的用户。社区插件目录在 SkillHub 插件页 与 awesome-dsh-plugin 生态中收录,与 DeepSeek / 幻方无官方从属关系。

插件以当前 DSH 进程权限在浏览器端注入样式与主题逻辑;安装前应阅读 GitHub 仓库 源码与 MIT 许可证,确认符合你的环境与安全要求。维护者 README 中提供 npm run check 与 npm test 以及 Playwright 端到端验证说明(见 docs/VERIFICATION.md),可自行对照。

结尾

dsh-theme-stripe-style 把 Stripe 式网格、阴影与双配色收进一个可开关的主题插件:安装后自动套用,设置里即时切换,出厂一键还原。目录与详情见 SkillHub,源码与安装说明见 GitHub。

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

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

Xiaoye