deepseek harness主题插件dsh-web-theme
2026/8/31 4:47:29 网站建设 项目流程

🎨 我做了一个 DSH 主题插件,发布到 npm 了!

写代码的地方,也可以有诗意。

前言

大家好,我是一名喜欢折腾的开发者。最近在玩DeepSeek Harness(DSH)——一个基于 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--profilewebadd'github:luckzhangfengbo/dsh-web-theme'

告诉 AI Agent 帮你装

请帮我安装 dsh-web-theme 墨韵水墨主题插件,装完告诉我如何重启。

兼容性

要求
DSH0.1.0-rc.6+
Node.js>=18
浏览器Chrome / Safari(支持 CSS 变量)

与同类产品对比

能力墨韵(本插件)同类换肤方案
原生 token 主题
中国水墨画风格
墨点粒子特效
8 种语言国际化部分
DSH 原生设置面板

开发踩坑记录

说点干货,分享一下我开发过程中遇到的问题:

1. 包体积过大

最初发布时包体积高达107MB!原因是主题原图太大。解决方法:

  • 预览缩略图用 230px 宽度
  • Hero 截图压缩到 800px 宽度
  • 主题原图保留 2848×1600(API 服务用)

最终包体积控制在26MB

2. npm 2FA 验证

npm 现在要求两步验证(2FA)才能发布。发布时需要:

npmpublish--accesspublic# 终端会提示输入 OTPEnter OTP:123456

3. 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-theme
  • 📖DSH Marketplace: 搜索dsh-web-theme

最后

做这个插件的初衷很简单——写代码的地方,也可以有诗意。

如果你喜欢这个插件,欢迎:

  • ⭐ 给 GitHub 点个 Star
  • 👍 给 npm 点个 Like
  • 💬 在评论区说说你的想法
  • 🔧 提交 Issue 或 PR

感谢阅读!希望你也能在 DSH 里找到属于自己的那片水墨意境。🖌️


本文由 dsh-web-theme 作者原创,欢迎转载,注明出处即可。

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询