自訂 CSS

透過自訂 CSS，你可以喺唔改動源碼嘅情況下調整軟件外觀，令介面更符合自己喜好，例如換字體、改主題色、調整訊息氣泡背景等。

喺邊度設定

打開 【設定】→【外觀】，喺頁面底部搵到 「自訂 CSS」 代碼框，將樣式寫入去就可以即時生效。留空就唔會載入任何自訂樣式。

你寫入嘅 CSS 會原樣注入到每個窗口嘅 <head> 入面，對應一個 <style id="user-defined-custom-css"> 元素。由於佢唔屬於軟件內部嘅樣式分層（cascade layer），喺同等選擇器下你嘅樣式優先級高過軟件自帶樣式，所以大多數普通聲明唔使 !important 都可以覆蓋生效。

一個可用嘅示例

下面呢段只使用軟件而家真實存在嘅變量同選擇器：

/* 1. 全局字體 */
body {
  font-family: "汉仪唐美人", sans-serif;
}

/* 2. 主題色同用戶消息氣泡背景（淺色主題 / 預設） */
:root {
  --primary: #1a8f5a;
  --chat-user: rgba(26, 143, 90, 0.08);
}

/* 3. 深色主題下單獨覆蓋(切到深色主題時根元素帶 .dark 類) */
.dark {
  --primary: #28b561;
  --chat-user: rgba(40, 181, 97, 0.12);
}

/* 4. 直接幫主內容區換背景色 */
#content-container {
  background-color: #f6f4ec;
}

關於主題變量

軟件用一套 CSS 自訂屬性(變量)去描述配色。淺色主題嘅預設值定義喺 :root 上，深色主題嘅覆蓋值定義喺 .dark 上——切換到深色主題時，根元素會被加上 .dark 類。因此要分辨淺色/深色，請分別寫喺 :root 同 .dark 選擇器下，而唔係用舊嘅 theme-mode 屬性選擇器。

常用嘅公開變量包括：

變量

含義

--background / --foreground

主背景色 / 主前景(文字)色

--primary / --primary-foreground

主題色 / 主題色上嘅文字色

--card / --popover

卡片、浮層背景色

--muted / --muted-foreground

弱化背景 / 弱化文字色

--border / --input / --ring

邊框、輸入框、聚焦描邊色

--sidebar 系列

側邊欄相關配色

--chat-user

用戶消息氣泡背景色

--link

鏈接顏色

--code-block / --inline-code

代碼塊 / 行內代碼背景色

--font-family / --code-font-family

全局字體 / 代碼字體

--radius

圓角基準值

完整嘅變量列表同預設值請參考源碼：

介面樣式與容器：https://github.com/CherryHQ/cherry-studio/tree/main/src/renderer/assets/styles
主題設計令牌(設計變量)：https://github.com/CherryHQ/cherry-studio/tree/main/packages/ui/src/styles

貼舊樣式表時嘅提示

如果你貼入嘅係為舊版本編寫、同而家介面唔相容嘅樣式表，軟件可能會自動禁用佢，並喺自訂 CSS 區域俾出提示。咁嘅時候請先按而家嘅變量同選擇器去適配好樣式，再按提示刪除首行標記以重新啟用。

💡 取得幫助同提交反饋

如果你喺配置或者使用過程中遇到任何疑問、Bug，或者有功能改善建議，請參考反饋與建議入面提供嘅官方渠道。

上一頁外觀

下一頁字體推薦

最後更新 1 個月前

呢個有冇幫助？