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

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

<figure><img src="https://3765361039-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Ut5BptC3t8CtSU1UWpM%2Fuploads%2Fgit-blob-84252ecfad5fc4beeb48c7392c4ca504943a5cd9%2Ftelegram-cloud-photo-size-5-6311935435315724879-y.jpg?alt=media" 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>