# 自定義 CSS

可以透過自訂 CSS 去修改軟件外觀，令佢更加符合自己嘅喜好，例如咁樣：

<figure><img src="/files/9b181519b85f073cdb947f1aac30de843036cc12" alt=""><figcaption><p>自訂 CSS</p></figcaption></figure>

```css
:root {
  --color-background: #1a462788;
  --color-background-soft: #1a4627aa;
  --color-background-mute: #1a462766;
  --navbar-background: #1a4627;
  --chat-background: #1a4627;
  --chat-background-user: #28b561;
  --chat-background-assistant: #1a462722;
}

#content-container {
  background-color: #2e5d3a !important;
}
```

### 內置變量

```css
:root {
  font-family: "汉仪唐美人" !important; /* 字體 */
}

/* 深度思考展開字體顏色 */
.ant-collapse-content-box .markdown {
  color: red;
}

/* 主題變量 */
:root {
  --color-black-soft: #2a2b2a; /* 深色背景色 */
  --color-white-soft: #f8f7f2; /* 淺色背景色 */
}

/* 深色主題 */
body[theme-mode="dark"] {
  /* 顏色 */
  --color-background: #2b2b2b; /* 深色背景色 */
  --color-background-soft: #303030; /* 淺色背景色 */
  --color-background-mute: #282c34; /* 中性色背景色 */
  --navbar-background: var(-–color-black-soft); /* 導航欄背景色 */
  --chat-background: var(–-color-black-soft); /* 聊天背景色 */
  --chat-background-user: #323332; /* 用戶聊天背景色 */
  --chat-background-assistant: #2d2e2d; /* 助手聊天背景色 */
}

/* 深色主題特定樣式 */
body[theme-mode="dark"] {
  #content-container {
    background-color: var(-–chat-background-assistant) !important; /* 內容容器背景色 */
  }

  #content-container #messages {
    background-color: var(-–chat-background-assistant); /* 訊息背景色 */
  }

  .inputbar-container {
    background-color: #3d3d3a; /* 輸入框背景色 */
    border: 1px solid #5e5d5940; /* 輸入框邊框顏色 */
    border-radius: 8px; /* 輸入框邊框圓角 */
  }

  /* 代碼樣式 */
  code {
    background-color: #e5e5e20d; /* 代碼背景色 */
    color: #ea928a; /* 代碼文字顏色 */
  }

  pre code {
    color: #abb2bf; /* 預格式化代碼文字顏色 */
  }
}

/* 淺色主題 */
body[theme-mode="light"] {
  /* 顏色 */
  --color-white: #ffffff; /* 白色 */
  --color-background: #ebe8e2; /* 淺色背景色 */
  --color-background-soft: #cbc7be; /* 淺色背景色 */
  --color-background-mute: #e4e1d7; /* 中性色背景色  */
  --navbar-background: var(-–color-white-soft); /* 導航欄背景色 */
  --chat-background: var(-–color-white-soft); /* 聊天背景色 */
  --chat-background-user: #f8f7f2; /* 用戶聊天背景色 */
  --chat-background-assistant: #f6f4ec; /* 助手聊天背景色 */
}

/* 淺色主題特定樣式 */
body[theme-mode="light"] {
  #content-container {
    background-color: var(-–chat-background-assistant) !important; /* 內容容器背景色 */
  }

  #content-container #messages {
    background-color: var(-–chat-background-assistant); /* 訊息背景色 */
  }

  .inputbar-container {
    background-color: #ffffff; /* 輸入框背景色 */
    border: 1px solid #87867f40; /* 輸入框邊框顏色 */
    border-radius: 8px; /* 輸入框邊框圓角，改成你鍾意嘅大小 */
  }

  /* 代碼樣式 */
  code {
    background-color: #3d39290d; /* 代碼背景色 */
    color: #7c1b13; /* 代碼文字顏色 */
  }

  pre code {
    color: #000000; /* 預格式化代碼文字顏色 */
  }
}
```

更多主題變量請參考源代碼：<https://github.com/CherryHQ/cherry-studio/tree/main/src/renderer/src/assets/styles>

### 相關推薦

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

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


---

# Agent Instructions: 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:

```
GET https://docs.cherry-ai.com/docs/zhong-wen-fan-ti/pre-basic/personalization-settings/css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.