主题画廊 dshworks/dshthemes

dshthemes.com

每个 DeepSeek Harness 主题，都用它自己的配色呈现。 一行命令就能换上任意一款。

大多数 dsh 主题都没有截图。一个画廊里有一半卡片都是同一只鲸鱼占位图，那就不叫画廊。所以这个站点不等截图：主题就是一份样式表，我们直接读它。 每个主题的 --dsw- token 都会在官方 0.1.0-rc.6 shell 上解析，再用六个角色画出一个 dsh 形状的框架——背景、表面、边框、弱化、文字、品牌色。有些主题直接给哈希类名重新设样式，那就把它们的颜色字面量排序后投射出来，页面会注明用的是哪种方式。代码里没有颜色的主题保持灰色，并如实说明。绝不凭空编造。

它是 dshworks/awesome-dsh-themes 的读取方——那个注册表里每一行 verified 都写明验证来源文件——绝不是第二个事实来源。

| 页面 | 是什么 |
| / | 画廊：不断换装的主视觉、五个可展开的货架、每个主题一张卡片；筛选、排序、搜索都作用在已有的 DOM 上 |
| /t/<slug>/ | 单个主题：在 rc.6 shell 上实时运行、仓库截图、签名；wear / renders / proof / colours / shelf；还有「Not」 |
| /shelf/<shelf>/ | 单个货架，卡片相同 |
| /notes/ | 带日期的笔记，记录这里改了什么、注册表在做什么，外加一块直接从数据读取的「right now」面板。RSS 在 /notes/feed.xml |
| /preview/?theme=<slug> | 内置的 rc.6 web shell，注入主题自己的样式表：CSS 作用在真实界面上，不是截图 |
| /themes.json · /llms.txt · /sitemap.xml | 投影、智能体地图、爬虫入口 |

实时视图，以及它如何挣得

主题只有通过两道关卡，才能带上实时视图。

1. 可达。 它的样式表必须设置 --dsw- token，翻转插件会设置的 body[data-…] / html[data-…] 属性，或者选中 shell 里某个编译后的类名。很多主题发布的真实 CSS 只给插件运行时创建的元素设样式；注入静态 shell 后什么都不会变。
2. 有差异。 scripts/shots.mjs 在 1440x900 下打开每个候选主题，与官方 shell 逐像素比对。完全相同就意味着这个声明被丢弃，不管样式表长什么样。

比对生成的图片会保留并随包发布：data/shots/.webp，每个主题一张 shell 渲染图，每次都是同样的框架、同样的对话。卡片展示的就是它。

渲染后的样式表冻结在仓库的 data/css/ 下，头部注释里写明来源 URL 和抓取日期，并从我们自己的源站提供。以前在读取时从 raw.githubusercontent.com 抓取，意味着某个分支改名就会悄悄让页面在未来每个读者面前降级；现在它会直接让构建失败。
shell 故意停在 0.1.0-rc.6。token 样式表在 rc.7 里一模一样，但 chrome 编译后的类名是内容哈希，社区皮肤就是照着这些字符串写的。

动效

参考 Amicro：Motion 弹簧 —— 快速回弹用 stiffness 600 / damping 25，chip ink 用 400 / 25，decks 用 180 / 20 / mass 0.8 —— 构建时采样进 CSS linear()（scripts/spring.mjs），所以站点动起来像 Motion，却不用带运行时。悬停 1.02，按下 0.97，图标切换带滑动，跨文档视图过渡从卡片到它的舞台。prefers-reduced-motion 下全部停止。

构建

npm run registry # data/themes.json <- awesome-dsh-themes (or --local=../awesome-dsh-themes)
npm run enrich # data/enrich.json + data/css/ <- GitHub: stars, last push, the stylesheet, the palette, the sheet we render (incremental; --force, --repalette)
npm run build # dist/ <- a page per theme, one stylesheet, one script
npm run shots # data/shots/ + data/shots.json <- build, photograph every renderable theme, build again
npm test # palette parser, CSS extraction, springs
node scripts/og.mjs # src/og.png from dist/og.html (needs a Chromium; the png is committed)
npm run deploy # Cloudflare Workers, static assets + a nine-line www redirect

shots.mjs 有 cloakbrowser 就用它，没有就退回 playwright-core 驱动系统 Chrome，nightly 工作流跑的就是后者。

没有框架，没有数据库，没有请求时数据。enrich.mjs 每个仓库只花一次 tree listing 加几次 raw fetch（免费），每次运行都刷新 stars。

颜色到底从哪来

- scripts/palette.mjs 解析 CSS（以及 dsh 插件通常随附的 CSS-in-TS —— src/client/style.ts），按选择器和 @media 把声明归入 dark / light / both，对照 vendored 的 design-platform.css 解析 var() 链和 light-dark()，把 alpha 合成到 scheme 底色上，再投射出六个角色。松散的 {"--dsw-x": "#…"} 和 setProperty 写法也算。
- scripts/enrich.mjs 找样式表：registry 设了 previewCss 就用它，否则按名字给仓库 tree 排序（theme、skin、dsw、token……），从 raw.githubusercontent 拉取，先按 --dsw- 声明打分，再按颜色字面量打分。
- scripts/csstext.mjs 决定什么能渲染。我们能读到的主题里只有 59 个把颜色放在 .css 文件里；其余都是 JavaScript 里的模板字符串，所以要把 CSS 从代码里提出来。它从不合成：一个主题如果在循环里用 setProperty 搭调色板，就没有样式表可渲染，只能保留它画出来的签名。
- 每个主题页都链接到确切的文件。如果我们读错了，开个 issue；如果 registry 设了 previewCss，那个文件优先。

Vendored：src/vendor/ —— @deepseek-ai/dsh-client-ui- 0.1.0-rc.6 样式表以及标记，MIT，附带 LICENSE 和 NOTICE。

与 DeepSeek 无关联。MIT。