我做了一个 DSH 主题插件发布到 npm 了写代码的地方也可以有诗意。前言大家好我是一名喜欢折腾的开发者。最近在玩DeepSeek HarnessDSH——一个基于 Web 的 AI 编程助手。用了一段时间后我觉得它的界面虽然简洁但少了点「味道」。作为一个热爱中国传统文化的程序员我想能不能给 DSH 换上一身水墨意境的东方之美于是我花了几天时间做了一个 DSH 主题插件 ——墨韵dsh-web-theme并且已经发布到 npm 和 GitHub 上了效果展示先来看看实机效果墨韵MoYun是什么墨韵是一个为DeepSeek Harness打造的中国水墨画风格主题插件核心特性特性说明️5 套水墨主题远山孤松、烟雨江南、竹影清风、梅傲霜雪、山水留白️自定义壁纸上传本地图片自动压缩优化️背景模糊 透明度独立滑块随心调节墨点粒子特效飘动的墨点动画营造灵动氛围8 种语言中/英/日/韩/西/法/德/俄 自动切换纯原生实现基于 DSH 官方 token 系统零侵入两种玩法玩法一开箱即用的意境主题意境远山孤松远山淡影苍松独立烟雨江南水乡烟雨灯影朦胧竹影清风翠竹摇曳清风徐来梅傲霜雪梅花傲雪枝干虬曲山水留白留白写意远山孤亭戴上即雅致不用任何调参。玩法二随你掌控的写意在预设之上你还能️ 上传自定义壁纸️ 调节背景模糊与透明度 开关墨点粒子特效↩️ 随时一键还原想要的意境自己画。技术实现这个插件的技术架构挺有意思的。DSH 的口号是「一切皆插件」主题系统也是 token 驱动的。双面插件架构DSH 的插件分为「双面」——Host 半边和浏览器半边dsh-web-theme标准 dsh-plugin / 双面插件 ├── Host 半边src/index.ts │ └── cordis.patch.yml 插入 loader 入口 │ └── 注册主题图片 API 路由 └── 浏览器半边client/client.js └── ctx.theme.register(5 套主题) └── ctx.theme.overrideTokens(壁纸半透明) └── 注册设置面板 UI核心 API 调用// 注册 5 套水墨主题ctx.theme.register(themes)// 恢复用户上次选择的主题ctx.theme.setTheme(savedTheme)// 壁纸透明叠加层ctx.theme.overrideTokens({--dsw-alias-bg-base:rgba(0,0,0,0.6)})// 挂载设置面板 UIctx.slots.inject(settings.section,{id:moyun,label:墨韵主题})持久化方案数据存储位置原因主题选择localStorage轻量、快速壁纸图片IndexedDB支持大图存储设置偏好Host settings API跨标签页同步安装方法最简单的方式推荐dsh plugin--profilewebadddsh-web-theme dsh web一行命令安装重启 DSH Web 即可。从 GitHub 安装dsh plugin--profilewebaddgithub:luckzhangfengbo/dsh-web-theme告诉 AI Agent 帮你装请帮我安装 dsh-web-theme 墨韵水墨主题插件装完告诉我如何重启。兼容性项要求DSH0.1.0-rc.6Node.js18浏览器Chrome / Safari支持 CSS 变量与同类产品对比能力墨韵本插件同类换肤方案原生 token 主题✅✅中国水墨画风格✅❌墨点粒子特效✅❌8 种语言国际化✅部分DSH 原生设置面板✅❌开发踩坑记录说点干货分享一下我开发过程中遇到的问题1. 包体积过大最初发布时包体积高达107MB原因是主题原图太大。解决方法预览缩略图用 230px 宽度Hero 截图压缩到 800px 宽度主题原图保留 2848×1600API 服务用最终包体积控制在26MB。2. npm 2FA 验证npm 现在要求两步验证2FA才能发布。发布时需要npmpublish--accesspublic# 终端会提示输入 OTPEnter OTP:1234563. Registry 切换国内用户默认用的是 CNPM 镜像但发布需要用官方源npmconfigsetregistry https://registry.npmjs.org/4. 插件加载机制DSH 的插件通过cordis.patch.yml声明需要正确配置exports{exports:{./client:./client.js},dsh:{bundle:./cordis.patch.yml}}后续计划更多水墨主题四季系列、山水长卷在线主题 Studio浏览器内调色 实时预览首帧无闪烁FOUC改进社区主题投稿与分享项目地址GitHub: https://github.com/luckzhangfengbo/dsh- npm 包地址: https://www.npmjs.com/package/dsh-web-themesh-web-themeDSH Marketplace: 搜索dsh-web-theme最后做这个插件的初衷很简单——写代码的地方也可以有诗意。如果你喜欢这个插件欢迎⭐ 给 GitHub 点个 Star 给 npm 点个 Like 在评论区说说你的想法 提交 Issue 或 PR感谢阅读希望你也能在 DSH 里找到属于自己的那片水墨意境。️本文由 dsh-web-theme 作者原创欢迎转载注明出处即可。