Theme System Guide
AI-оптимизированный справочник по цветам и темам goLoot TMA.
Цель: Когда нужно изменить цвет элемента — этот документ объясняет что и где менять.
Quick Reference
Когда использовать какой цвет
| Элемент | Tailwind класс | CSS Variable |
|---|---|---|
| Основная кнопка (CTA) | bg-btn-primary-bg/15 | --btn-primary-bg |
| Кнопка "Забрать" / "Вывести" | bg-btn-gold-bg/15 | --btn-gold-bg |
| Disabled кнопка | bg-btn-disabled-bg/10 | --btn-disabled-bg |
| Основной текст | text-glass-text | --color-glass-text |
| Вторичный текст | text-glass-muted | --color-glass-muted |
| Фон карточки | bg-glass-card | --color-glass-card |
| Фон приложения | bg-app-bg | --color-app-bg |
| Граница | border-glass-border/25 | --color-glass-border |
| Прогресс-бар (трек) | bg-progress-track | --progress-track |
| Skeleton loader | .skeleton-shimmer (CSS class) | --skeleton-base, --skeleton-shimmer |
Button Variants
Primary (Blue) — Основные действия
Используй для: "Открыть", "Сохранить", "Что внутри?"
className="bg-btn-primary-bg/15 text-btn-primary-text border border-btn-primary-border/40
hover:bg-btn-primary-bg/25 active:scale-95 transition-all duration-200"
Gold — Награды и Claim
Используй для: "Забрать", "Получить награду", "Вывести"
className="bg-btn-gold-bg/15 text-btn-gold-text border border-btn-gold-border/50
hover:bg-btn-gold-bg/25 active:scale-95 transition-all duration-200"
Disabled — Заблокированные состояния
Используй для: Claimed, Locked, In Progress
className="bg-btn-disabled-bg/10 text-btn-disabled-text border-2 border-btn-disabled-border/20
cursor-not-allowed opacity-60"
DO NOT USE (Запрещённые паттерны)
Эти паттерны ломают переключение тем — не используй их:
| Плохой паттерн | Замени на |
|---|---|
text-[#cccccc] | text-glass-text |
text-[#888888] | text-glass-muted |
bg-[#181818] | bg-app-bg |
bg-[#1e1e1e] | bg-progress-track |
bg-[#2a2a2a] | bg-progress-track |
bg-[rgba(61,152,217,0.15)] | bg-btn-primary-bg/15 |
text-[#6ab3e8] | text-btn-primary-text |
border-[rgba(61,152,217,*)] | border-btn-primary-border/* |
bg-[rgba(255,184,77,0.15)] | bg-btn-gold-bg/15 |
text-[#ffb84d] | text-btn-gold-text |
bg-[rgba(120,120,120,*)] | bg-btn-disabled-bg/* |
text-[#666666] | text-btn-disabled-text |
Архитектура
Слои переменных
┌─────────────────────────────────────────────────┐
│ Tailwind Classes (используй в компонентах) │
│ bg-btn-primary-bg/15, text-glass-text │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ Component Tokens (семантические) │
│ --btn-primary-bg, --btn-gold-text │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ Palette (примитивы RGB) │
│ --color-glass-text: 204, 204, 204 │
└─────────────────────────────────────────────────┘
Как работает переключение тем
- Zustand store хранит
theme: 'dark' | 'light' - App.tsx устанавливает
data-themeна<body> - CSS автоматически применяет правильные переменные:
body[data-theme='dark'] {
--btn-primary-bg: 61, 152, 217; /* тёмно-синий */
}
body[data-theme='light'] {
--btn-primary-bg: 52, 152, 219; /* ярко-синий */
}
- Tailwind классы подхватывают значения автоматически
Файлы системы
| Файл | Назначение |
|---|---|
frontend/src/index.css | CSS переменные (lines 115-210) |
frontend/tailwind.config.js | Маппинг переменных → классы |
frontend/src/stores/settingsStore.ts | Zustand store для темы |
frontend/src/App.tsx | Применение data-theme |
Как добавить новый цвет
1. Добавь CSS переменную
В frontend/src/index.css:
/* В body[data-theme='dark'] */
--my-new-color: 100, 150, 200;
/* В body[data-theme='light'] */
--my-new-color: 120, 170, 220;
2. Добавь в Tailwind config
В frontend/tailwind.config.js:
colors: {
'my-new': 'rgba(var(--my-new-color), <alpha-value>)',
}
3. Используй в компоненте
<div className="bg-my-new/20 text-my-new">
Цветовая палитра
Dark Theme
| Переменная | RGB | Hex | Назначение |
|---|---|---|---|
--color-app-bg | 24, 24, 24 | #181818 | Фон приложения |
--color-glass-card | 36, 36, 36 | #242424 | Фон карточек |
--color-glass-text | 204, 204, 204 | #cccccc | Основной текст |
--color-glass-muted | 136, 136, 136 | #888888 | Вторичный текст |
--color-glass-border | 120, 120, 120 | #787878 | Границы |
--btn-primary-bg | 61, 152, 217 | #3d98d9 | Синие кнопки |
--btn-gold-bg | 255, 184, 77 | #ffb84d | Золотые кнопки |
--btn-disabled-bg | 120, 120, 120 | #787878 | Disabled |
--skeleton-base | 36, 36, 36 | #242424 | Skeleton фон (= glass-card) |
--skeleton-shimmer | 60, 60, 60 | #3c3c3c | Skeleton градиент sweep |
Light Theme
| Переменная | RGB | Hex | Назначение |
|---|---|---|---|
--color-app-bg | 50, 50, 50 | #323232 | Фон приложения |
--color-glass-card | 95, 95, 95 | #5f5f5f | Фон карточек |
--color-glass-text | 245, 245, 245 | #f5f5f5 | Основной текст |
--color-glass-muted | 190, 190, 190 | #bebebe | Вторичный текст |
--color-glass-border | 170, 170, 170 | #aaaaaa | Границы |
--btn-primary-bg | 52, 152, 219 | #3498db | Синие кнопки |
--btn-gold-bg | 255, 193, 7 | #ffc107 | Золотые кнопки |
--btn-disabled-bg | 160, 160, 160 | #a0a0a0 | Disabled |
--skeleton-base | 95, 95, 95 | #5f5f5f | Skeleton фон (= glass-card) |
--skeleton-shimmer | 130, 130, 130 | #828282 | Skeleton градиент sweep |
Semantic Colors (статические)
Эти цвета одинаковы для обеих тем:
| Класс | Hex | Назначение |
|---|---|---|
ui-success | #4ade80 | Успех (зелёный) |
ui-error | #ef4444 | Ошибка (красный) |
ui-warning | #ffc107 | Предупреждение (жёлтый) |
ui-info | #0088cc | Информация (синий) |
Проверка Grep
После миграции компонентов эти команды должны вернуть 0 результатов:
grep -r "text-\[#cccccc\]" frontend/src/components --include="*.tsx"
grep -r "text-\[#888888\]" frontend/src/components --include="*.tsx"
grep -r "bg-\[rgba(61,152,217" frontend/src/components --include="*.tsx"
grep -r "bg-\[rgba(255,184,77" frontend/src/components --include="*.tsx"
grep -r "bg-\[rgba(120,120,120" frontend/src/components --include="*.tsx"