Реализация Dark Mode: CSS, JavaScript и системные предпочтения

Что такое Dark Mode и почему он важен?

Dark mode (тёмная тема) — это режим интерфейса, отображающий тёмный фон со светлым текстом. Снижает нагрузку на глаза в условиях низкой освещённости.

На OLED-экранах dark mode может продлить время работы батареи на 30-60%, так как тёмные пиксели выключены. Значительное преимущество для мобильных устройств.

Пользовательские предпочтения: при поддержке dark mode на уровне системы (macOS, Windows, iOS, Android) пользователи ожидают согласованного опыта во всех приложениях.

Доступность: некоторые пользователи (фотофобия, мигрень) предпочитают тёмные темы. Dark mode предоставляет преимущества доступности для этих пользователей.

Управление темами с помощью CSS-переменных

CSS custom properties (переменные) позволяют централизованно управлять цветами темы. Определите тему по умолчанию (light) в :root, тёмную тему в [data-theme="dark"].

Пример: :root { --bg: #ffffff; --text: #1a1a1a; } [data-theme="dark"] { --bg: #1a1a1a; --text: #e0e0e0; }. Все стили используют эти переменные.

Переходы цветов: body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; } обеспечивает плавный переход темы.

Контроль контраста: соблюдайте коэффициенты контраста WCAG и в dark mode. Светлый текст на тёмном фоне требует коэффициент контраста 4.5:1.

Тени и рамки: тени (box-shadow) менее видны в dark mode. Используйте рамки (border), чтобы сделать границы элементов более чёткими.

Переключение тем с помощью JavaScript

Кнопка переключения: когда пользователь нажимает кнопку, смените тему с помощью document.documentElement.setAttribute('data-theme', 'dark').

Сохранение предпочтения: сохраните выбор пользователя с помощью localStorage.setItem('theme', 'dark'). Читайте с помощью localStorage.getItem('theme') при загрузке страницы.

Предотвращение FOUC: чтобы избежать Flash of Unstyled Content (FOUC), примените настройку темы с помощью inline-скрипта в <head>. Это определяет тему до рендеринга.

Функция переключения: function toggleTheme() { const current = document.documentElement.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', next); localStorage.setItem('theme', next); }

Определение системных предпочтений

Media query prefers-color-scheme: применяйте стили на основе системных предпочтений в CSS с помощью @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } }.

Определение с помощью JavaScript: проверьте системное предпочтение dark mode с помощью window.matchMedia('(prefers-color-scheme: dark)').matches.

Отслеживание изменений: следите за изменениями системной темы с помощью matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { if (e.matches) setDark(); else setLight(); }).

Порядок приоритета: 1. Ручной выбор пользователя (localStorage), 2. Системное предпочтение (prefers-color-scheme), 3. Тема по умолчанию (light). Проверяйте в этом порядке.

Лучшие практики Dark Mode

Не используйте чистый чёрный (#000000). Очень тёмный серый (#121212 или #1a1a1a) выглядит лучше и снижает нагрузку на глаза.

Уменьшите насыщенность цветов. Яркие цвета (красный, зелёный, синий) в dark mode вызывают нагрузку на глаза. Используйте десатурированные цвета.

Корректируйте изображения. Яркие изображения могут быть раздражающими в dark mode. Слегка затемняйте изображения с помощью filter: brightness(0.8).

Тестируйте все компоненты. Формы, таблицы, блоки кода, графики должны выглядеть правильно в dark mode. Проверяйте каждый компонент в dark mode.

Meta theme-color: установите цвет UI браузера (адресная строка) в соответствии с dark mode с помощью <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">.

Dark Mode во фреймворках

Tailwind CSS: определяйте стили dark mode с префиксом dark:. Как dark:bg-gray-900 dark:text-white. Обеспечивает ручной контроль со стратегией классов.

React: простая реализация dark mode с помощью хука useDarkMode или библиотеки next-themes. Управление темами, совместимое с SSR.

Vue: реактивный dark mode с помощью composable useDark из @vueuse/core. Автоматическое определение системных предпочтений.

Bootstrap: поддержка dark mode в Bootstrap 5.3+ с атрибутом data-bs-theme="dark". Управление темами с помощью CSS-переменных.