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。
  • 支持 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 需要重新生成啓動圖,無法熱加載。

典型用法

使用流程如下:

  1. 在 DSH 設置的 tweakcn 主題入口中,點擊“打開 tweakcn.com”,設計主題並導出 index.css。不要複製 layout.tsx。
  2. 把 index.css 內容粘貼到 DSH 主題設置中,點擊“應用”。界面會顯示“已解析:淺色 N 項 / 深色 M 項”的反饋。
  3. 如果希望保留這套主題,輸入名稱並點擊“保存爲主題”。之後可以在主題列表中切換、編輯或刪除。
  4. 需要還原原始外觀時,點擊“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。

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

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

小夜