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

# Пользовательский CSS

С помощью пользовательского CSS можно менять внешний вид приложения без изменения исходного кода, чтобы интерфейс больше соответствовал вашим предпочтениям — например, сменить шрифт, изменить основной цвет темы, настроить фон пузырей сообщений и т. д.

### Где это настраивается

После того как **【Настройки】→【Внешний вид】**, внизу страницы найдите **«Пользовательский CSS»** в поле кода, просто впишите стили — они сразу вступят в силу. Если оставить пустым, никакие пользовательские стили не будут загружены.

<figure><img src="https://3765361039-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Ut5BptC3t8CtSU1UWpM%2Fuploads%2Fgit-blob-b6adcd0ead703c7f46ba537135b1374f62e22267%2Fappearance-custom-css.png?alt=media" 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>

***

### 💡 Получить помощь и отправить отзыв

Если в процессе настройки или использования у вас возникнут вопросы, баги или предложения по улучшению функций, пожалуйста, обратитесь к [Обратная связь и предложения](/docs/russian/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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.cherryai.com.cn/docs/russian/pre-basic/settings/display/custom-css.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.