Тёмный режим уже здесь

Тёмный режим уже здесь

• 2 мин чтения

Тёмный режим запущен на всей платформе Brandmine.

Автоматическое переключение темы

Мы уважаем ваши системные предпочтения:

  • macOS/iOS: Настройки → Дисплей и яркость → Тёмный
  • Windows: Параметры → Персонализация → Цвета → Тёмный
  • Android: Настройки → Дисплей → Тёмная тема

Сайт автоматически адаптируется. Ручное переключение не требуется.

Что мы оптимизировали

Семантическая цветовая система

  • ✅ Все цвета используют CSS-переменные (--bg-primary, --text-primary)
  • ✅ Автоматическое переключение на основе prefers-color-scheme
  • ✅ Фирменный бирюзовый цвет адаптируется с #38B2AC (светлый) на #4FD1C5 (тёмный)

Проверка контраста

  • ✅ Весь текст соответствует стандартам WCAG AA в обоих режимах
  • ✅ Светлый режим бирюзовый: только для фонов (не проходит как текст)
  • ✅ Тёмный режим бирюзовый: проходит все тесты (коэффициент контраста 10.04:1)

Покрытие компонентов

  • ✅ Все 50+ компонентов поддерживают тёмный режим
  • ✅ Формы, модальные окна, карточки, навигация — всё
  • ✅ Граничные случаи: состояния загрузки, валидация, пустые состояния

Почему автоматически?

Исследование пользователей: Большинство людей хотят, чтобы тёмный режим соответствовал их системным предпочтениям. Добавление ручного переключателя создаёт трение (где хранить предпочтение? куки? localStorage? что по умолчанию?).

Простота: Одно меньше решение для пользователей. Система знает, что вы хотите.

Время автономной работы: На OLED-экранах тёмный режим может продлить время автономной работы на 30-40%.

Технические детали

Основа: ADR-0034 документирует нашу полную стратегию тёмного режима.

Файлы:

  • assets/css/base/variables.css (определения цветов)
  • assets/css/components/dark-mode.css (1310 строк стилей компонентов)
  • docs/technical/dark-mode-colors.md (полный справочник цветов)

Производительность: JavaScript не требуется. Чистый CSS с медиа-запросами.

Что дальше (необязательно)

Мы можем добавить ручное переключение в будущем для пользователей, которые хотят переопределить свои системные предпочтения. Пока мы сохраняем простоту.

Попробуйте: Переключите ваше устройство в тёмный режим и испытайте Brandmine в совершенно новом свете (или его отсутствии).

Обновление (11 декабря)

Я узнал, что это немного сложнее, чем ожидалось, поэтому пришлось потратить несколько часов сегодня на устранение неполадок и тонкую настройку нашей установки тёмного режима — но теперь она работает как часы.