> 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="/files/fa9a8b486bd227da61a86395e8678e2816c82182" 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 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/russian/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.
