План внедрения тёмной темы

Внедри тёмную тему правильно.

Правило №1: Тёмная — это не "светлая, но чёрная". Это отдельная палитра со своими правилами.

1. Стратегия токенов

Не пиши color: #FFF и color: #000. Пиши семантически:

:root {
  --bg: #fff;
  --fg: #0a0a0a;
  --border: #e5e5e5;
}

[data-theme="dark"] {
  --bg: #0a0a0a;
  --fg: #fafafa;
  --border: #262626;
}

Все компоненты ссылаются только на токены.

2. Палитра тёмной темы

• Фон: не чёрный (#000). Слишком контрастно. Используй #0A-#10
• Текст: не белый (#FFF). Слишком слепит. #F0-#FA
• Поверхности: elevated > bg по светлоте (карточка чуть светлее фона)
• Границы: заметны но не кричат — на 5-10% светлее фона
• Акцент: проверь контраст. Иногда нужен оттенок светлее чем в светлой теме

3. Контраст

• Обычный текст: ≥ 4.5:1 к фону
• Крупный текст (≥ 18px bold): ≥ 3:1
• UI-элементы: ≥ 3:1
• Используй WebAIM contrast checker

4. Тени

• В тёмной тени почти не видны. Используй:
  • Подсветку сверху (внутренняя граница светлее)
  • Glow вокруг (мягкий цветной)
  • Чёткую границу
• Чёрная тень на чёрном — невидима

5. Цвета изображений

• Логотип: версия для тёмной (часто инвертированный или альтернативный)
• Иллюстрации: НЕ filter: invert() — выглядит мерзко. Перерисуй или выбери темно-friendly
• Скриншоты UI: запиши обе версии
• Diagrams: цвета элементов могут поменяться

6. Цветные акценты

• Сатурация в тёмной обычно ниже чем в светлой (иначе режет глаза)
• Зелёный успех в светлой #16A34A → в тёмной #4ADE80
• Красный ошибка в светлой #DC2626 → в тёмной #F87171

7. UI-детали

• Карточки: фон + тонкая граница (нет тени)
• Поля ввода: чуть светлее фона страницы
• Popover / dropdown: ещё чуть светлее
• Hover-состояния: повышение яркости на 5-8%

8. Переключатель

• Sun/Moon иконка — самый понятный паттерн
• Не "Light / Dark / Auto" в одной кнопке — слишком много опций. Сделай Switch + опция Auto в настройках
• Уважай prefers-color-scheme для первого визита

9. Тестирование

• Проверь все экраны в обеих темах
• Проверь специальные сценарии: ошибки, success, пустые состояния
• Проверь печать (всегда светлая)
• Проверь скриншоты в маркетинге (есть обе версии?)

Анти-паттерны

• filter: invert(1) на всём документе
• Те же цвета акцента — режут глаза в тёмной
• Глубоко-чёрный фон #000
• "Гибридная" тема — попытка сэкономить и сделать одну для обеих