> 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/en-us/pre-basic/settings/display/custom-css.md).

# Custom CSS

With custom CSS, you can adjust the software’s appearance without modifying the source code, making the interface more to your liking—for example, changing fonts, tweaking the theme color, or adjusting the chat bubble background.

### Where to set it

After enabling it **【Settings】→【Appearance】**&#x61;t the bottom of the page, find **"Custom CSS"** code box, and enter your styles there to take effect in real time. If left blank, no custom styles will be loaded.

<figure><img src="/files/ebf53547d2ebb149b80028326b61c8e50b9de0b3" alt=""><figcaption><p>the "Custom CSS" code box at the bottom of the 【Settings】→【Appearance】 page</p></figcaption></figure>

The CSS you enter will be injected as-is into each window's `<head>` corresponding to a `<style id="user-defined-custom-css">` element. Since it does not belong to the software’s internal style layer (cascade layer), your styles have higher priority than the built-in styles under the same selector, so most ordinary declarations do not need `!important` to override them and take effect.

### An example that works

The following uses only variables and selectors that actually exist in the software:

```css
/* 1. Global font */
body {
  font-family: "Hanyi Tang Beauty", sans-serif;
}

/* 2. Theme color and user message bubble background (light theme / default) */
:root {
  --primary: #1a8f5a;
  --chat-user: rgba(26, 143, 90, 0.08);
}

/* 3. Separate overrides in dark theme (the root element gets the .dark class when switching to dark theme) */
.dark {
  --primary: #28b561;
  --chat-user: rgba(40, 181, 97, 0.12);
}

/* 4. Change the background color of the main content area directly */
#content-container {
  background-color: #f6f4ec;
}
```

### About theme variables

The software uses a set of CSS custom properties (variables) to describe its color scheme. The default values for the light theme are defined on `:root` , and the override values for the dark theme are defined on `.dark` —when switching to dark theme, the root element will be given the `.dark` class. So to distinguish between light and dark, write them separately under the `:root` and `.dark` selector instead of using the old `theme-mode` attribute selector.

Common public variables include:

| Variable                               | Meaning                                              |
| -------------------------------------- | ---------------------------------------------------- |
| `--background` / `--foreground`        | Main background color / main foreground (text) color |
| `--primary` / `--primary-foreground`   | Theme color / text color on the theme color          |
| `--card` / `--popover`                 | Card and popover background colors                   |
| `--muted` / `--muted-foreground`       | Muted background / muted text color                  |
| `--border` / `--input` / `--ring`      | Border, input field, and focus outline color         |
| `--sidebar` series                     | Sidebar-related colors                               |
| `--chat-user`                          | User message bubble background color                 |
| `--link`                               | Link color                                           |
| `--code-block` / `--inline-code`       | Code block / inline code background color            |
| `--font-family` / `--code-font-family` | Global font / code font                              |
| `--radius`                             | Base radius value                                    |

For the complete list of variables and default values, refer to the source code:

* Interface styles and containers:<https://github.com/CherryHQ/cherry-studio/tree/main/src/renderer/assets/styles>
* Theme design tokens (design variables):<https://github.com/CherryHQ/cherry-studio/tree/main/packages/ui/src/styles>

### Tips for pasting an old stylesheet

If you paste a stylesheet written for an older version and incompatible with the current interface, the software may automatically disable it and show a tip in the Custom CSS area. In that case, first adapt the styles to the current variables and selectors, then delete the marker on the first line as prompted to re-enable it.

### Related recommendations

Cherry Studio theme gallery: <https://github.com/boilcy/cherrycss>

Share some Chinese-style Cherry Studio theme skins: <https://linux.do/t/topic/325119/129>

***

### 💡 Get help and submit feedback

If you encounter any questions or bugs during configuration or use, or have suggestions for feature improvements, please refer to the official channels provided in [Feedback and Suggestions](/docs/en-us/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/en-us/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.
