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

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

<figure><img src="/files/4b1fd4f18dfefdd68cb9ddfc05a96f178dc98867" 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/russian/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.