前言¶
使用 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。 - 支持
oklch、hsl、hex顏色值,並自動忽略@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 需要重新生成啓動圖,無法熱加載。
典型用法¶
使用流程如下:
- 在 DSH 設置的 tweakcn 主題入口中,點擊“打開 tweakcn.com”,設計主題並導出
index.css。不要複製layout.tsx。 - 把
index.css內容粘貼到 DSH 主題設置中,點擊“應用”。界面會顯示“已解析:淺色 N 項 / 深色 M 項”的反饋。 - 如果希望保留這套主題,輸入名稱並點擊“保存爲主題”。之後可以在主題列表中切換、編輯或刪除。
- 需要還原原始外觀時,點擊“DSH 默認主題”。
適用場景與注意¶
這個插件適合希望把 tweakcn.com 主題快速導入 DSH、並且需要維護多套主題配置的場景。
使用前需要注意以下幾點:
- 必須粘貼 tweakcn.com 導出的
index.css。layout.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。