Тема, цвета и фон витрины
Витрина поддерживает 7 готовых тем и возможность выбора акцентного цвета. Всё настраивается в админке.
Путь: Админка → Оформление витрины → Дизайн
Готовые темы
Tirify поставляется с 7 темами. Каждая меняет цветовую схему витрины.
| Код темы | Название | Характер |
|---|---|---|
red_black | Red/Black | Тёмная, красный акцент, sharp corners (6/10/14) |
dark_blue | Dark Blue | Тёмная, синий акцент (6/10/16) |
light_clean | Light Clean | Светлая, чистый минимализм (6/10/16) |
dark_red | Dark Red | Тёмная, тёмно-красный (4/8/12) |
green_military | Green Military | Тёмная, военный зелёный, квадратные углы (2/4/8) |
purple_neon | Purple Neon | Тёмная, неоновый фиолет, скруглённые (6/12/20) |
minimal_grey | Minimal Grey | Светлая, монохромная (4/6/10) |
Тема меняет:
- Цвета фона (
--background,--card,--popover) - Цвет текста (
--foreground,--muted-foreground) - Акцентный цвет (
--primary,--primary-foreground) - Цвета границ (
--border) - Скругления (
--theme-radius-sm/md/lg)
Акцентный цвет
Помимо выбора темы, можно переопределить акцентный цвет магазина:
- HEX-пикер в админке → «Акцентный цвет»
- Применяется как
--primary(кнопки, ссылки, активные элементы) - Переопределяет акцент темы
Фон страницы
Background URL — URL картинки, которая показывается как фон всей витрины.
- Картинка растягивается на весь экран (
cover) - Overlay opacity — затемнение поверх фона (0 = без затемнения, 0.8 = почти чёрный)
- Работает через
body::before(затемнение) иbody::after(картинка) - Картинка фиксированная (
fixed), не скроллится
Используйте URL с вашего CDN или файлового хостинга. Картинка должна быть доступна по HTTPS. Не используйте относительные пути.
Фавикон
Favicon URL — иконка магазина во вкладке браузера.
- URL PNG-файла (рекомендуется минимум 48×48, лучше 180×180)
- Система автоматически генерирует размеры: 16×16, 32×32, 48×48, 180×180 (apple-touch-icon)
- Исходник: favicon-32 (каноничный URL)
Color mode (светлая / тёмная)
По умолчанию витрина уважает системную тему пользователя (prefers-color-scheme). Владелец может:
- Запретить переключение — снять галку «Разрешить смену темы»
- Тогда витрина всегда в той теме, которую задал владелец
- Переключатель в хедере не показывается
Как тема применяется
При сохранении темы в админке витрина обновляется мгновенно — перезагрузка страницы не требуется. Выбранная тема и акцентный цвет автоматически применяются ко всем элементам витрины.
Скругления (border-radius)
Единая шкала радиусов на витрине:
| Класс | Значение | Где |
|---|---|---|
rounded-sm | 6px | Бейджи, чипы, инпуты |
rounded-md | 10px | Кнопки, контролы |
rounded-lg | 12px | Карточки, панели, плитки |
rounded-xl | 16px | Баннеры, крупные модалки |
Тема может переопределять эти значения через --theme-radius-sm/md/lg.
Следующие шаги
- Кастомный CSS/JS — продвинутая кастомизация
- Виджеты — что показывать на главной
- Страницы — контентные страницы
- Ссылки — меню и навигация