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

Важно

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

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


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

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

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

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

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

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

Внимание

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

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

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

:root {
    --название-переменной: значение !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-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?