Тёмная тема в CSS: prefers-color-scheme и CSS‑переменные

Быстрые ссылки

• Что поддерживает тёмные темы в браузерах?
• Как использовать prefers-color-scheme в CSS
• Настройка тёмной темы через CSS‑переменные

Что поддерживают браузеры для тёмных тем

На момент написания большинство современных браузеров поддерживают prefers-color-scheme. Проверьте актуальный статус на caniuse.com, где есть таблица поддержки по браузерам:

Важно знать:

• Старые браузеры, включая IE11, не поддерживают этот медиа‑запрос. Они просто проигнорируют его и применят ваши базовые стили.
• prefers-color-scheme — опциональный механизм: он не ломает CSS, а только добавляет поведение для тех пользователей, у кого есть предпочтение.

Как использовать prefers-color-scheme в CSS

Используйте prefers-color-scheme как обычный медиа‑запрос. Задайте базовую (по умолчанию) тему, затем переопределяйте для тёмной схемы.

Пример простой реализации:

body {
  background-color: #fff;
  color: #000;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

Вы также можете комбинировать этот медиа‑запрос с другими, например для применения тёмной темы только на мобильных устройствах:

@media (max-width: 768px) and (prefers-color-scheme: dark) {
  /* тёмные стили только на узких экранах */
}

Настройка тёмной темы с помощью CSS‑переменных

CSS‑переменные упрощают поддержку двух палитр. Вместо ручного переопределения каждого цвета, объявите переменные в :root и поменяйте их внутри медиа‑запроса.

Базовая схема и использование переменных:

:root {
  --primary: #000;
  --background: #fff;
}

body {
  background-color: var(--background);
}

p {
  color: var(--primary);
}

Переопределяем переменные для тёмной темы:

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #ddd;
    --background: #222;
  }
}

Преимущество: смена переменных автоматически обновляет все связанные правила. Дополнительные CSS‑правила для тёмной темы можно поместить в отдельный @media‑блок (желательно ниже основных правил, чтобы они имели приоритет).

Фолбэк для IE11 и устаревших браузеров

IE11 и похожие старые браузеры не поддерживают медиа‑запрос. Если вы хотите избежать ошибок и обеспечить максимально корректную работу, используйте «двойное» объявление свойства:

p {
  color: #000; /* фолбэк для старых браузеров */
  color: var(--primary); /* современные браузеры возьмут переменную */
}

Этот подход безопасен: старые браузеры прочитают первый цвет и проигнорируют var() как неизвестное значение.

Если вы не используете CSS‑переменные вовсе, можно полностью переопределить стили внутри @media (prefers-color-scheme: dark), но это более громоздко.

Когда это не сработает

• Пользователь не настроил системный тёмный режим. Тогда браузер вернёт light и вы увидите базовые стили.
• Браузер не поддерживает prefers-color-scheme (например, старые версии или IE11).
• Встроенные браузеры в некоторых приложениях могут игнорировать системные настройки.

Практический совет: всегда делайте базовую тему нейтральной и обеспечьте хорошую контрастность на обоих вариантах.

Альтернативные подходы

• JavaScript‑переключатель: храните выбор пользователя в localStorage и применяйте класс на или . Это даёт явный контроль, но требует больше кода.
• Серверная отрисовка: определяйте тему на сервере по кукам или заголовкам и отдавайте преднастроенные CSS. Это полезно для SSR‑приложений.
• Гибрид: используйте prefers-color-scheme по умолчанию, но позволяйте пользователю переопределить выбор через UI (и сохраняйте выбор в куке/localStorage).

Мини‑методология внедрения тёмной темы (шаги)

1. Проанализируйте текущую палитру и выделите переменные для всех ключевых цветов (фон, текст, акценты, бордеры).
2. Добавьте :root с переменными и примените их в стилях.
3. Добавьте @media (prefers-color-scheme: dark) и переопределите переменные для тёмной палитры.
4. Протестируйте в поддерживаемых браузерах и на мобильных устройствах.
5. Добавьте фолбэки (двойные свойства) для старых браузеров, если это важно.
6. Предоставьте UI‑переключатель, если хотите, чтобы пользователь мог переопределять системные настройки.

Чек‑лист для ролей

Дизайнеры:

• Определите палитру для светлой и тёмной темы.
• Проверьте контрастность на соответствие WCAG.

Фронтенд‑разработчики:

• Вынесите цвета в CSS‑переменные.
• Реализуйте prefers-color-scheme и фолбэки.
• Добавьте тесты рендеринга для обоих режимов.

Тестировщики:

• Проверьте переключение при смене системной темы.
• Протестируйте на старых браузерах и на мобильных.
• Убедитесь, что читаемость и доступность не ухудшены.

Критерии приёмки

• Базовая тема корректно отображается в современных браузерах.
• При системной тёмной теме цвета переключаются автоматически.
• Текст всегда имеет достаточный контраст (проверено вручную или с помощью инструмента).
• На IE11 нет визуальных ошибок; применяется фолбэк‑цвет.
• Если есть переключатель в интерфейсе — он сохраняет выбор и переопределяет системную тему.

Факты и полезные сведения

• Поддержка: большинство современных браузеров поддерживают prefers-color-scheme (проверьте caniuse для деталей).
• Безопасность: использование пользовательских цветов через CSS не несёт дополнительных рисков безопасности.
• UX: пользователи ожидают согласованного поведения с системой. Предоставление переключателя — добрый тон.

Примеры кода и шпаргалка

Быстрая шпаргалка по стилям:

:root {
  --bg: #fff;
  --text: #111;
  --muted: #666;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1113;
    --text: #e6e6e6;
    --muted: #9a9a9a;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

a { color: var(--muted); }

Если вы поддерживаете IE11 и отказываетесь от переменных, используйте двойные объявления:

a {
  color: #007acc; /* фолбэк */
  color: var(--accent);
}

Тестовые сценарии и приёмка

• Изменить системную тему на светлую/тёмную и убедиться в переключении цветов.
• Проверить на мобильных и десктопных браузерах.
• Проверить, что контраст текста соответствует ожиданиям при обоих режимах.
• Проверить работу переключателя в интерфейсе и сохранение выбора.

Когда не использовать prefers-color-scheme

• Если целевая аудитория использует устаревшие браузеры и вам критичен единообразный внешний вид в них.
• Если дизайн сильно зависит от изображений/фоновых градиентов, которые тяжело адаптировать без дополнительных правил.

Итог

Использование prefers-color-scheme совместно с CSS‑переменными даёт простой и масштабируемый путь для внедрения тёмной темы. Добавьте фолбэки для старых браузеров и тесты, чтобы обеспечить надёжность и доступность интерфейса.

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