Цветовая палитра и стили оформления сайта

Важно

Служба поддержки не оказывает помощь по работе с данным разделом. Документация является полной и актуальной, однако рекомендуется использовать только те настройки и параметры, которые подробно описаны ниже.

В текущей версии стилей некоторые переменные ещё могут быть изменены в будущих обновлениях, поэтому для стабильной работы сайта используйте исключительно уже задокументированные настройки.

В этом разделе подробно описано, как самостоятельно настроить цвета и внешний вид вашего сайта. Здесь представлены понятные объяснения и примеры использования переменных, с помощью которых вы сможете легко изменить оформление основных элементов страницы, таких как фон, текст, ссылки, кнопки и поля ввода.

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

---

Создание и настройка CSS-файла

Здесь описано, в каком файле и формате прописывать цвета и стили, чтобы изменения корректно применились на сервере вашего проекта с поддоменом app (например, app.ваш_домен). Следуйте инструкциям ниже для быстрой и удобной настройки внешнего вида сайта.

В каком файле настраивать цвета и стили сайта?

Чтобы ваши изменения применились, необходимо настроить файл со стилями на сервере вашего сайта.

Где расположена корневая директория вашего сайта?

Файл находится здесь: /public/static/custom-theme.css

Внимание

Если такого файла нет, создайте его вручную в указанной папке — иначе настройки не будут корректно применены на сайте.

Эти изменения необходимо выполнять именно на сервере вашего проекта с поддоменом app (например, app.ваш_домен). Убедитесь, что редактируете файл именно по указанному пути.

Как добавлять изменения?

Все изменения цветов записываются в специальном формате:

:root {
    --название-переменной: значение !important;
}

Важно:

Всегда ставьте в конце значения цвета слово !important. Это нужно, чтобы изменения точно применились на сайте.

Например, вы хотите изменить цвет фона всей страницы на белый:

: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 или любой другой шрифт

Тёмная тема

Тёмная тема включается отдельно пользователями сайта (если в панели управления установлен режим «Системный») или может быть принудительно задана администратором.

Ниже представлены переменные, с помощью которых можно настроить цвета и оформление сайта именно в тёмной теме. Вы можете использовать предложенный пример и изменить любые цвета на те, которые подходят вашим задачам и предпочтениям.

.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, в котором уже настроены несколько переменных для светлой и тёмной тем оформления сайта. Вы можете использовать его как основу, изменяя цвета под свои потребности и задачи. Просто скопируйте этот пример и вставьте в указанный выше файл на вашем сервере.

/* Светлая тема */
: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; /* Белый текст на кнопках */
}