Цветовая палитра и стили оформления сайта
Важно
Служба поддержки не оказывает помощь по работе с данным разделом. Документация является полной и актуальной, однако рекомендуется использовать только те настройки и параметры, которые подробно описаны ниже.
В текущей версии стилей некоторые переменные ещё могут быть изменены в будущих обновлениях, поэтому для стабильной работы сайта используйте исключительно уже задокументированные настройки.
В этом разделе подробно описано, как самостоятельно настроить цвета и внешний вид вашего сайта. Здесь представлены понятные объяснения и примеры использования переменных, с помощью которых вы сможете легко изменить оформление основных элементов страницы, таких как фон, текст, ссылки, кнопки и поля ввода.
Информация изложена максимально доступно, чтобы даже пользователи без технического опыта могли быстро и без труда персонализировать внешний вид сайта под свои потребности.
Создание и настройка CSS-файла
Здесь описано, в каком файле и формате прописывать цвета и стили, чтобы изменения корректно применились на сервере вашего проекта с поддоменом app (например, app.ваш_домен). Следуйте инструкциям ниже для быстрой и удобной настройки внешнего вида сайта.
В каком файле настраивать цвета и стили сайта?
Чтобы ваши изменения применились, необходимо настроить файл со стилями на сервере вашего сайта.
Где расположена корневая директория вашего сайта?Файл находится здесь: /public/static/custom-theme.css
Внимание
Если такого файла нет, создайте его вручную в указанной папке — иначе настройки не будут корректно применены на сайте.
Как добавлять изменения?
Все изменения цветов записываются в специальном формате:
: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; /* Белый текст на кнопках */
}Last updated
Was this helpful?