Своя цветовая схема
Seller 2.0 строит цветовую палитру сайта из одного базового цвета: тема автоматически генерирует 11 оттенков и записывает их в CSS-переменные --theme-color-50 … --theme-color-950. Этими переменными окрашиваются кнопки, ссылки, акценты и элементы интерфейса. Если автоматическая палитра не устраивает, её можно заменить своей.
Стандартный режим
Раздел панели темы Общие настройки → Оформление сайта → Цветовая схема:
| Настройка | Описание |
|---|---|
| Оформление | Светлая, тёмная или авто (по настройке устройства посетителя) |
| Базовый цвет | Главный цвет сайта — из него генерируется вся палитра оттенков |
| Акцентный цвет | Настройка зарезервирована: в текущей версии темы её значение никуда не подставляется и ни на что не влияет |
| Базовый фоновый цвет | Фон страниц сайта |
| Базовый цвет и фоновый цвет для тёмной версии | Те же настройки отдельно для тёмного оформления |
Как это работает: из базового цвета тема вычисляет оттенки и добавляет на страницу переменные:
:root {
--theme-color: #335eea;
--theme-color-50: …;
--theme-color-100: …;
/* … */
--theme-color-950: …;
}
Например, кнопка btn-theme использует --theme-color-600 как фон и --theme-color-700 при наведении.
Своя цветовая схема
Поля Своя цветовая схема и Своя цветовая схема для тёмной версии сайта позволяют задать все 11 оттенков вручную. Если поле заполнено, автоматическая генерация из базового цвета полностью отключается — используются только ваши значения.
Как подобрать палитру
- Откройте сервис UI Colors и подберите палитру: введите свой основной цвет — сервис построит шкалу оттенков 50–950 и покажет её на живых примерах интерфейса.
- Нажмите Export и скопируйте палитру в формате CSS-переменных.
- Замените префикс переменных на
--theme-colorи вставьте результат в поле настройки.
Содержимое поля вставляется на сайт как есть — внутрь :root { … } (тёмная версия — внутрь .dark { … }), поэтому в поле должны быть только объявления переменных:
--theme-color-50: #eef5ff;
--theme-color-100: #d9e8ff;
--theme-color-200: #bcd7ff;
--theme-color-300: #8ebeff;
--theme-color-400: #5999ff;
--theme-color-500: #3372ff;
--theme-color-600: #1b50f5;
--theme-color-700: #143ce1;
--theme-color-800: #1732b6;
--theme-color-900: #19308f;
--theme-color-950: #141f57;
Какие оттенки за что отвечают
| Переменная | Типичное применение |
|---|---|
--theme-color-50 – 100 | Светлые подложки, фоны выделения |
--theme-color-200 – 300 | Рамки, разделители, неактивные элементы |
--theme-color-500 | Основной цвет: ссылки, иконки, активные элементы |
--theme-color-600 | Кнопки (btn-theme), насыщенные акценты |
--theme-color-700 | Состояние наведения у кнопок и ссылок |
--theme-color-800 – 950 | Тексты и элементы на светлых подложках, тёмные акценты |
Тёмная версия
Для тёмного оформления заполните отдельное поле — переменные те же, значения свои. Обычно шкалу «переворачивают»: светлые оттенки делают тёмными и наоборот, чтобы контраст сохранился. UI Colors умеет показывать палитру в тёмном интерфейсе — проверьте читаемость перед экспортом.