> For the complete documentation index, see [llms.txt](https://docs.cherryai.com.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cherryai.com.cn/docs/zhong-wen-fan-ti/pre-basic/settings/display/custom-css.md).

# 自定義 CSS

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

### 喺邊度設定

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

<figure><img src="/files/e1839b6160d8008adb1132932d4403b7b70dc25f" alt=""><figcaption><p>【設定】→【外觀】頁面底部嘅「自訂 CSS」代碼框</p></figcaption></figure>

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

### 一個可用嘅示例

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

```css
/* 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 區域俾出提示。咁嘅時候請先按而家嘅變量同選擇器去適配好樣式，再按提示刪除首行標記以重新啟用。

### 相關推薦

Cherry Studio 主題庫: <https://github.com/boilcy/cherrycss>

分享一啲中國風 Cherry Studio 主題皮膚: <https://linux.do/t/topic/325119/129>

***

### 💡 取得幫助同提交反饋

如果你喺配置或者使用過程中遇到任何疑問、Bug，或者有功能改善建議，請參考 [反饋與建議](/docs/zhong-wen-fan-ti/question-contact/suggestions.md) 入面提供嘅官方渠道。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.cherryai.com.cn/docs/zhong-wen-fan-ti/pre-basic/settings/display/custom-css.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
