# Цветовая палитра и стили оформления сайта
{% hint style="danger" %}
## Важно
Служба поддержки не оказывает помощь по работе с данным разделом. Документация является полной и актуальной, однако рекомендуется использовать только те настройки и параметры, которые подробно описаны ниже.
В текущей версии стилей некоторые переменные ещё могут быть изменены в будущих обновлениях, поэтому для стабильной работы сайта используйте исключительно уже задокументированные настройки.
{% endhint %}
В этом разделе подробно описано, как самостоятельно настроить цвета и внешний вид вашего сайта. Здесь представлены понятные объяснения и примеры использования переменных, с помощью которых вы сможете легко изменить оформление основных элементов страницы, таких как фон, текст, ссылки, кнопки и поля ввода.
Информация изложена максимально доступно, чтобы даже пользователи без технического опыта могли быстро и без труда персонализировать внешний вид сайта под свои потребности.
***
## Создание и настройка CSS-файла
Здесь описано, в каком файле и формате прописывать цвета и стили, чтобы изменения корректно применились на сервере вашего проекта с поддоменом **app** (например, **app.ваш\_домен**). Следуйте инструкциям ниже для быстрой и удобной настройки внешнего вида сайта.
### В каком файле настраивать цвета и стили сайта?
Чтобы ваши изменения применились, необходимо настроить файл со стилями на сервере вашего сайта.
{% content-ref url="../../pomosh-i-spravka/infrastruktura/gde-raspolozhena-kornevaya-direktoriya-vashego-saita" %}
[gde-raspolozhena-kornevaya-direktoriya-vashego-saita](https://docs.iexexchanger.com/pomosh-i-spravka/infrastruktura/gde-raspolozhena-kornevaya-direktoriya-vashego-saita)
{% endcontent-ref %}
Файл находится здесь: `/public/static/custom-theme.css`
{% hint style="danger" %}
## Внимание
Если такого файла нет, **создайте его вручную в указанной папке** — иначе настройки не будут корректно применены на сайте.
{% endhint %}
{% hint style="info" %}
Эти изменения необходимо выполнять именно на сервере вашего проекта с поддоменом app (например, **app.ваш\_домен**). Убедитесь, что редактируете файл именно по указанному пути.
{% endhint %}
### Как добавлять изменения?
Все изменения цветов записываются в специальном формате:
```css
:root {
--название-переменной: значение !important;
}
```
{% hint style="danger" %}
## Важно:
Всегда ставьте в конце значения цвета слово `!important`. Это нужно, чтобы изменения точно применились на сайте.
{% endhint %}
Например, вы хотите изменить цвет фона всей страницы на белый:
```css
:root {
--body-background: #ffffff !important;
}
```
***
## Настройка светлой и тёмной темы сайта
Здесь подробно описано, как настроить оформление вашего сайта для двух режимов отображения:
* Светлая тема используется по умолчанию и идеально подходит для работы в дневное время или при хорошем освещении.
* Тёмная тема рекомендована для комфортного использования сайта вечером или при недостаточном освещении.
Вы сможете легко изменять цвета фона, текста, кнопок и других элементов интерфейса, подстраивая внешний вид сайта под свои предпочтения.
Вы можете принудительно управлять темой оформления сайта в панели управления:
Перейдите в раздел: **Настройки → Настройки оформления → Стиль**
Здесь доступны три варианта:
* **Системный —** тема оформления выбирается пользователем самостоятельно.
* **Светлая —** принудительно устанавливается светлая тема для всех пользователей.
* **Тёмная —** принудительно устанавливается тёмная тема для всех пользователей.
### Светлая (По умолчанию)
Ниже представлены все переменные, отвечающие за оформление светлой темы сайта.
Для каждой переменной указано подробное описание того, за какие элементы интерфейса она отвечает. Также даны примеры того, как можно легко и быстро настроить цвета и стили этих элементов по своему желанию.
#### Основные цвета страницы и текста
| Переменная | Что изменяет? | Пример / Значение по умолчанию |
| ----------------------------- | ----------------------------------- | ----------------------------------- |
| `--body-background` | Цвет основного фона всей страницы | `#faf9ff` (очень светлый сиреневый) |
| `--body-text-color` | Основной цвет текста | `#000` (чёрный) |
| `--background` | Цвет фона блоков и карточек | `#ffffff` (белый) |
| `--background-text-color` | Цвет текста внутри блоков | `#000` (чёрный) |
| `--default-text-color` | Основной акцентный цвет текста | `#7B62FF` (фиолетовый) |
| `--default-link` | Цвет ссылок на сайте | `#7B62FF` (фиолетовый) |
| `--text-foreground` | Дополнительный цвет текста | `#95abb7` (серо-голубой) |
| `--text-secondary-foreground` | Вторичный (менее яркий) цвет текста | `#878792` (серый) |
#### Цвета верхней панели и разделов сайта
| Переменная | Что изменяет? | Пример / Значение по умолчанию |
| ------------------------- | ------------------------------------------ | ------------------------------ |
| `--header-bg` | Фон верхней панели сайта (шапки) | `#ffffff` (белый) |
| `--header-text-color` | Цвет текста и иконок в верхней панели | `#000` (чёрный) |
| `--section-bg` | Цвет фона основных разделов и секций сайта | `#ffffff` (белый) |
| `--section-text-color` | Цвет текста внутри секций | `#000` (чёрный) |
| `--header-logotype-color` | Цвет логотипа в шапке | `#7B62FF` (фиолетовый) |
#### Цвета кнопок и акцентных элементов
| Переменная | Что изменяет? | Пример / Значение по умолчанию |
| ----------------------------- | ----------------------------------------- | ---------------------------------- |
| `--primary-background` | Цвет основных кнопок и активных элементов | `#7B62FF` (фиолетовый) |
| `--primary-text-color` | Цвет текста на этих элементах | `#ffffff` (белый) |
| `--primary-button-bg-color` | Цвет фона основной кнопки | `#7B62FF` (фиолетовый) |
| `--primary-button-text-color` | Цвет текста на основной кнопке | `#ffffff` (белый) |
| `--menu-active-text-color` | Цвет текста активного пункта меню | `white` (белый) |
| `--menu-active-bg-color` | Цвет фона активного пункта меню | совпадает с `--primary-background` |
#### Цвета фона дополнительных элементов и разделителей
| Переменная | Что изменяет? | Пример / Значение по умолчанию |
| ------------------------------ | ------------------------------------------- | ------------------------------ |
| `--secondary-bg` | Цвет вторичного фона | `#f4f5f7` (светло-серый) |
| `--secondary-text-color` | Цвет текста на вторичном фоне | `#000` (чёрный) |
| `--secondary-light-bg` | Дополнительный светлый цвет вторичного фона | `#fafafc` (почти белый) |
| `--secondary-light-text-color` | Цвет текста на дополнительном светлом фоне | `#2d2d2d` (тёмно-серый) |
| `--divider-color` | Цвет разделительных линий | `#eceef2` (светло-серый) |
| `--border-color` | Цвет границ элементов | `#c1c1c1` (серый) |
| `--input-background` | Цвет полей ввода | `#f6f5f9` (светлый серый) |
#### Стили для обменного блока и форм ввода
| Переменная | Что изменяет? | Пример / Значение по умолчанию |
| ---------------------------- | ---------------------------------- | ------------------------------ |
| `--exchange-default-bg` | Основной цвет фона обменного блока | `#ffffff` (белый) |
| `--exchange-block-bg` | Цвет конкретного блока обмена | совпадает с `--background` |
| `--exchange-input-amount-bg` | Цвет поля ввода суммы обмена | `#f3f4f8` (светло-серый) |
#### Тени и эффекты для элементов интерфейса
| Переменная | Что изменяет? | Пример / Значение по умолчанию |
| ----------------------------------- | -------------------------------------------- | ------------------------------ |
| `--default-box-shadow` | Стандартная тень блоков и карточек | Стандартное значение |
| `--primary-shadow` | Тень для акцентных элементов | Стандартное значение |
| `--primary-shadow-md` | Средняя (заметная) тень для важных элементов | Стандартное значение |
| `--secondary-shadow` | Лёгкая тень для второстепенных элементов | Стандартное значение |
| `--primary-background-foreground` | Эффект фона акцентных элементов | `rgba(123, 98, 255, 0.13)` |
| `--secondary-background-foreground` | Эффект фона второстепенных элементов | `rgb(233 233 233 / 23%)` |
***
#### Стилизация нижней панели сайта (footer)
| Переменная | Что изменяет? | Пример / Значение по умолчанию |
| --------------------- | ---------------------------------- | ---------------------------------- |
| `--footer-background` | Цвет нижней панели сайта (подвала) | совпадает с `--primary-background` |
| `--footer-text-color` | Цвет текста в нижней панели сайта | совпадает с `--primary-text-color` |
#### Скругление углов элементов
| Переменная | Что изменяет? | Пример / Значение по умолчанию |
| ------------------------- | --------------------------------------- | ------------------------------ |
| `--default-border-radius` | Радиус скругления углов блоков и кнопок | `20px` |
#### Дополнительные
| Переменная | Что изменяет? | Пример |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| `--default-font-family` | Шрифт текста на сайте. По умолчанию используется стандартный шрифт, но вы можете указать любой другой по своему выбору. | "Roboto", "Arial", sans-serif или любой другой шрифт |
### Тёмная тема
Тёмная тема включается отдельно пользователями сайта (если в панели управления установлен режим **«Системный»**) или может быть принудительно задана администратором.
Ниже представлены переменные, с помощью которых можно настроить цвета и оформление сайта именно в тёмной теме. Вы можете использовать предложенный пример и изменить любые цвета на те, которые подходят вашим задачам и предпочтениям.
```css
.dark {
--body-background: #171721 !important;
--body-text-color: #ffffff !important;
--header-bg: #1e1e2a !important;
--header-text-color: #ffffff !important;
--section-bg: #1e1e2a !important;
--section-text-color: #ffffff !important;
--input-background: #100f14 !important;
--border-color: #292935 !important;
--divider-color: oklch(.37 .013 285.805) !important;
}
```
Тёмная тема обычно имеет темный фон и светлый текст для комфорта глаз при слабом освещении.
***
## Полный пример файла
Ниже представлен полностью готовый пример файла `custom-theme.css`, в котором уже настроены несколько переменных для светлой и тёмной тем оформления сайта. Вы можете использовать его как основу, изменяя цвета под свои потребности и задачи. Просто скопируйте этот пример и вставьте в указанный выше файл на вашем сервере.
```css
/* Светлая тема */
:root {
--body-background: #ffffff !important; /* Белый фон всей страницы */
--body-text-color: #222222 !important; /* Тёмный текст */
--primary-background: #007bff !important; /* Синий акцентный цвет кнопок */
--primary-text-color: #ffffff !important; /* Белый текст на кнопках */
}
/* Тёмная тема */
.dark {
--body-background: #121212 !important; /* Почти чёрный фон всей страницы */
--body-text-color: #f5f5f5 !important; /* Светло-серый текст */
--primary-background: #1a73e8 !important; /* Синий акцентный цвет кнопок */
--primary-text-color: #ffffff !important; /* Белый текст на кнопках */
}
```
---
# 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.iexexchanger.com/nastroiki/vneshnii-vid/cvetovaya-palitra-i-stili-oformleniya-saita.md?ask=
```
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.
