dsh-client-ui-tweakcn:将 tweakcn.com 的 index.css 映射为 DSH 主题

前言

使用 DSH 时,如果希望套用 tweakcn.com 上设计好的主题,直接改客户端样式很容易漏掉 token 映射,也不方便在几套主题之间来回切换。dsh-client-ui-tweakcn 解决的是这一步:把 tweakcn.com 导出的 index.css 粘贴进 DSH,由插件完成主题变量映射,并支持保存、切换和编辑主题。

下面介绍这个插件的定位、核心功能、安装方式和使用注意点。

这是什么

dsh-client-ui-tweakcn 是 DSH 客户端主题插件,由 AIRIKE1 维护,许可证为 MIT。

它把 tweakcn.com 导出的 index.css 映射为 DSH 语义 token,覆盖配色、圆角、阴影和字体,并支持将粘贴内容保存为主题,之后随时切换、编辑或删除。

核心功能

这个插件主要提供以下能力:

  • 把 tweakcn.com 导出的 index.css 粘贴进设置后,自动映射配色、--radius--shadow-*--font-sans / --font-mono
  • 支持 oklchhslhex 颜色值,并自动忽略 @theme@layer 等无关内容。
  • 支持将任何粘贴内容命名保存为主题,并在 DSH 默认、Violet(内置)与已保存主题之间切换、编辑、删除。
  • 主题的 :root / .dark 值跟随 DSH 外观,支持合并 :root, .dark@media prefers-color-scheme 解析。
  • --radius 映射到 --tweakcn-radius,上限为 16px,圆形元素保持圆形。
  • --shadow-2xs…2xl 映射到 --dsw-shadow-lv1/2/3
  • --font-sans 映射到 --dsw-font-family--font-mono 映射到 --ds-font-family-code
  • 应用或保存后显示浅色 / 深色解析项数反馈;如果粘贴了 layout.tsx,会明确报错。
  • 启动安全、本地优先,插件故障不阻止 DSH 启动。
  • 提供 tweakcn.com 直达按钮。
  • 仓库提供中英文双语 README 和 INSTALL.md

安装与启用

安装方式主要有三种。

插件市场安装

在 DSH 中打开设置,进入插件市场,搜索:

dsh-client-ui-tweakcn

找到后一键安装。

仓库脚本安装

在仓库目录执行:

.\install.ps1

执行完成后,重启 DSH Desktop。

手动安装

手动安装适用于 DSH 桌面版,也适用于需要手动处理 bundle 的 web profile。

先把插件目录放到桌面 profile 的 node_modules 下:

%USERPROFILE%\.dsh\profiles\desktop\node_modules\dsh-client-ui-tweakcn

然后在桌面 profile 的 package.json 中,给 dsh.profile.bundles 追加条目:

"dsh-client-ui-tweakcn"

完成后重启 DSH Desktop。新插件 bundle 需要重新生成启动图,无法热加载。

典型用法

使用流程如下:

  1. 在 DSH 设置的 tweakcn 主题入口中,点击“打开 tweakcn.com”,设计主题并导出 index.css。不要复制 layout.tsx
  2. index.css 内容粘贴到 DSH 主题设置中,点击“应用”。界面会显示“已解析:浅色 N 项 / 深色 M 项”的反馈。
  3. 如果希望保留这套主题,输入名称并点击“保存为主题”。之后可以在主题列表中切换、编辑或删除。
  4. 需要还原原始外观时,点击“DSH 默认主题”。

适用场景与注意

这个插件适合希望把 tweakcn.com 主题快速导入 DSH、并且需要维护多套主题配置的场景。

使用前需要注意以下几点:

  • 必须粘贴 tweakcn.com 导出的 index.csslayout.tsx 只是 Next.js 页面外壳,不包含颜色定义,粘贴后会报错。
  • 仅包含深色块的主题不会回填浅色,浅色会保持 DSH 默认。
  • 圆角和阴影只在粘贴的 CSS 中声明了 --radius / --shadow-* 时生效,否则保持 DSH 原生样式。
  • 成功色和警告色会保留 DSH 语义绿 / 琥珀,不做主题化。
  • 新插件安装后需要重启 DSH Desktop。
  • 本地状态是唯一权威,陈旧回包无法撤销当前选择。
  • 插件以当前 dsh 进程权限运行,安装前应检查源码和 MIT 许可证。

链接

GitHub 仓库:

https://github.com/AIRIKE1/dsh-client-ui-tweakcn

插件市场入口可以在 DSH 设置中打开,按 dsh-client-ui-tweakcn 搜索;本文不假定一个未在资料中确认的独立目录页 URL。

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

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

小夜