Темная тема на чистом CSS: использование prefers-color-scheme

Темная тема на чистом CSS: современные стандарты веб-разработки

В современном вебе темная тема — это не просто дань моде, а стандарт пользовательского опыта (UX). Она снижает нагрузку на глаза в вечернее время и позволяет экономить заряд аккумулятора на устройствах с OLED-экранами. Благодаря медиа-запросу prefers-color-scheme, реализация темной темы стала максимально простой и эффективной задачей, не требующей сложных JavaScript-скриптов.

Что такое prefers-color-scheme?

Это медиа-запрос CSS, который определяет, какую цветовую схему предпочитает пользователь на уровне своей операционной системы (Windows, macOS, iOS или Android). Браузер передает эту информацию сайту, а мы, как разработчики, можем моментально адаптировать дизайн под запрос пользователя.

Доступны три основных значения:

light: пользователь предпочитает светлую тему.
dark: пользователь предпочитает темную тему.
no-preference: система не предоставила данных (используется значение по умолчанию).

Реализация через CSS-переменные

Лучший способ внедрения темной темы — использование CSS-переменных (custom properties). Это позволяет централизованно управлять цветовой палитрой всей страницы. Давайте рассмотрим практический пример.

Шаг 1: Определение переменных

Сначала мы задаем глобальные переменные внутри селектора :root. В блоке :root мы прописываем дефолтную (светлую) тему, а затем переопределяем их при срабатывании медиа-запроса.

:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --accent-color: #007bff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #e0e0e0;
        --accent-color: #bb86fc;
    }
}

Шаг 2: Применение переменных к элементам

Теперь вместо жестко заданных цветов используем созданные переменные. Это делает код чистым и легко поддерживаемым:

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

Почему это круто?

Использование чистого CSS для управления темой дает несколько ключевых преимуществ:

Производительность: браузеру не нужно выполнять тяжелые JS-скрипты при загрузке страницы.
Отсутствие вспышек (FOUC): стили применяются до отрисовки контента, поэтому пользователь не видит резкой смены цветов.
Нативная поддержка: решение работает на уровне браузера и не зависит от сторонних библиотек.
Автоматизация: если пользователь переключит тему в настройках ОС, ваш сайт обновится автоматически без перезагрузки страницы.

Советы для профессионалов

При создании темных тем важно помнить о правилах доступности (A11y):

Не используйте чисто черный цвет (#000000) для фона. Темно-серые оттенки (например, #121212) выглядят естественнее и меньше утомляют зрение.
Следите за контрастностью: текст в темной теме должен легко читаться на фоне. Используйте инструменты проверки контрастности, чтобы убедиться, что вы соответствуете стандартам WCAG.
Добавьте плавные переходы: свойство transition для цветов фона и текста сделает смену тем максимально приятной для пользователя.

Реализация темы через prefers-color-scheme — это фундамент современной верстки. Она демонстрирует заботу о пользователе и глубокое понимание возможностей браузерного API. Начните внедрять этот подход уже сегодня, чтобы сделать ваши проекты профессиональными и адаптивными.