海洋双主题 jackxiao17/dsh-ocean-theme

dsh-ocean-theme

DeepSeek Harness（DSH）的海洋双主题：把模型回复的 Markdown 换成琥珀单主色体系，界面深度定制为浅海 / 深海两档蓝调主题，跟随 DSH 外观偏好自动切换。纯 CSS，无设置、无依赖、无网络。

Markdown 配色沿用琥珀 / 薄荷 / 青蓝三色结构（一个色相一个语义）；界面部分吸收官方首页复刻项目 JohnnyTing/dsh-official-homepage-theme（MIT）的渐变配方与分层手法。

四块能力

1. Markdown 语义配色（深浅双档）：标题 / 加粗 / 斜体 / 行内代码 / 列表标记 / 链接 / 引用块 / 分割线 / 表格。色相体系：琥珀 35°（标题/加粗，画布 214° 的精确补色）+ 青蓝 187°（链接，「属于水系」）+ 薄荷 133°（行内代码）——每个色相一个语义。
2. 正文等宽终端排版 + 全站琥珀强调色：等宽栈只作用于 Markdown 正文；按钮填充、开关、勾选框、焦点环同步琥珀。
3. 浅海 / 深海界面主题：画布渐变 + 面板四级分层 + 海军蓝 token 全表覆盖，两档跟随外观偏好自动切换。
4. 用户气泡高对比：自己的消息浅色档淡azure蓝（#cfe0fb）、深色档月光蓝（#2a5089），一眼定位「这是我说的话」。

浅海 / 深海分层

| 层级 | 浅海 | 深海 |
| L0 画布 | 亮蓝渐变 #e8f0fa→#c8d9ef | 官方首页渐变原方 #15375e→#0d2949→#071626 |
| L1 侧栏 | 蓝白半透明 72% + 发丝线 | 深海军蓝半透明 + 发丝线 + 内高光 + 70px 蓝黑阴影 |
| L2 会话区 | 渐变透出 | 渐变透出 + 正文暗色投影 |
| L3 输入卡 | 白玻璃卡 | #1f3654→#09192f 玻璃卡 + 48px 蓝黑阴影 |
| L4 弹窗 | 白玻璃 88% + blur(24px) | 深蓝玻璃 + blur(24px) saturate(130%) |

配套：约 40 个 --dsw- token 覆盖（气泡、滚动条、tooltip/toast、按钮、边框、三级文字色），可点击卡片族（交付卡/变更卡/计划卡/日程卡）与工具 ioCard 走海军蓝阶梯。

设计法则（两档通用）

- 冷暖分工：界面冷（蓝系）、内容强调暖（琥珀系），零竞争；
- 发丝线边框只用 rgba，不用实灰；浮起表面带顶缘内发光；
- 阴影用蓝黑不用纯黑；禁纯黑背景（深色从 #071323 起步）。

覆盖范围

- Markdown：标题、加粗、斜体、删除线、行内代码、列表标记、链接、文件提及、引用块、分割线、选区、任务列表勾选框、代码块语言标签；表格卡片化；标题层级与间距节奏。链接悬停不变色不加框，仅点状下划线（跟随文字色）。
- 界面：画布渐变、侧栏、会话滚动区、输入卡、弹窗/菜单/浮层、滚动条 token、气泡、tooltip/toast、用户气泡高对比、编辑/写入行的 ± 行数常显红绿。
- 不改：代码块内部语法高亮、正文字号/行高、产品字体设置、布局结构。

实现要点

1. 作用域抗升级：Markdown 容器类是 CSS Modules 哈希，全部规则挂 [class="_markdown_"]；:not([data-markdown-variant]) 排除紧凑变体。
2. 正文等宽：产品在 body 声明 --dsw-font-family，token 值在使用处解析 var()——在 markdown 根上重定义即可。
3. 强调色：html body / html body[data-ds-dark-theme] 特异性 + !important，与插入顺序无关。
4. 画布：body::before（fixed, z -1）不透明渐变 + body 背景透明；html 用 :has(body[data-ds-dark-theme]) 兜底。
5. token 层：浅色挂 html body、深色挂 body[data-ds-dark-theme]，均 !important。内部变量前缀 --sea-*。
6. 零依赖：两个 标签，无 require、无 React、无槽位、无网络、无 DOM 注入、无存储。

下载

到 Releases 页面 下载最新版压缩包并解压，得到 dsh-ocean-theme/ 文件夹；也可以 git clone 本仓库——主题就是两份 JS 里内嵌的 CSS 加一张 SVG，没有构建步骤、没有依赖。

安装

1. 把 dsh-ocean-theme/ 整个文件夹拷到 ~/.dsh/profiles/desktop/local/ 下（Windows 即 C:\Users\你\.dsh\profiles\desktop\local\dsh-ocean-theme\）
2. 编辑 ~/.dsh/profiles/desktop/package.json：
- dependencies 里加一行："dsh-ocean-theme": "file:./local/dsh-ocean-theme"
- dsh.profile.bundles 数组里加一项："dsh-ocean-theme"
3. 在该目录跑一次 DSH 自带的 pnpm：
node "%DSH_HOME%\dsh-runtimes\dsh-primary-runtime\dependencies\pnpm\bin\pnpm.cjs" install -C %DSH_HOME%\profiles\desktop

4. 重启 DSH 生效；主题在 设置 → 插件 里可随时启用/禁用

开发时不必每次拷文件：把 dependencies 那行换成 "dsh-ocean-theme": "link:<源码目录绝对路径>"，源码里改完样式在页面 Ctrl+R 即生效。

兼容性

- 已在 DeepSeek Harness 0.2.1-rc.5（桌面版）上复核通过：两档界面的 tooltip / toast 对比度、编辑写入行的 ± 行数配色，都按真实产品规则渲染核对过
- 实现全是 CSS 变量覆盖 + 类名前缀匹配，不调用宿主 API、不注入 DOM、不读写存储，所以升级 DSH 不会报错。失效方式是颜色回退：产品若改了 token 名或类名后缀，对应那片区域回到默认配色，功能与数据不受影响
- 更早的版本没有逐一验证，因此不做承诺

版本

- 0.1.3 — 换图标：旧图标是黑底 + 紫/绿/琥珀色条，那是插件 Markdown 主题时期的配色标记，跟海洋主题没有关系。新图标「海平线」——上半是浅海天光 #f4f9ff → #cfdff8、下半是深海 #16314f → #071626，海平线一道白线，琥珀半日 #f5a742 正落在线上（只留露出水面的一半），下面两道浪（浅蓝 #8fc0f0、青绿 #56b6c2）。把「浅海 / 深海」两档直接画成两片海，40px 列表态、28px、20px 都还认得出。64×64 纯矢量、圆角 14、无滤镜无外链，1.7 KB。
- 0.1.2 — 工具行（编辑 / 写入）的 +N / −N 常显红绿：产品只在 :hover 或 [aria-expanded] 时给 .diffAdded / .diffRemoved 上色，默认跟行文字一起发灰，移开鼠标就丢语义。改法是把两支语义色提到 --sea-diff-add / --sea-diff-del 上常显（!important 锁死，免得悬浮瞬间跳色）；浅色档没直接用产品绿 #22c55e（在淡蓝面板上仅 2.0:1，白底也才 2.3:1，11px 小字读不动），换成与正文行内代码同一支薄荷绿 #27793d（4.8:1）+ 深红 #b3261e（5.8:1），深色档 #7fd88f / #f25a5a。
- 0.1.1 — 修浅色档 tooltip / toast「白底白字」：产品把这两处的文字写死为 --dsw-static-neutral-bluish-00（#fff，tooltip 组件里是硬编码 color，toast 的 --dsw-alias-toast-label 也指向它），0.1.0 只把 底色 改成 #ffffff，于是悬浮提示整片看不见（tab 的「对话 / 轨迹 / 上下文 / 编队」提示、顶部 toast 全中招）。改回深底白字的海军蓝 #16314f（白字 13.2:1），深浅两档工具提示同一身份。
- 0.1.0 — 海洋主题初版：在 Markdown 主题的基础上演化而来，改名并以海洋主题独立迭代。Markdown 琥珀体系（深色亮金 #f5a742 平涂、浅色蜜琥珀 #a05a00）+ 浅海/深海界面（四级分层、海军蓝 token 全表）+ 用户气泡高对比（浅 #cfe0fb / 深 #2a5089 月光蓝）+ 链接悬停仅下划线。纯 CSS 双主题，无设置。