Что такое prefers-color-scheme медиа-запрос и как он меняет подход к дизайну
Современные пользователи всё чаще переключаются между светлой и тёмной темами интерфейса — не только ради эстетики, но и из соображений комфорта и доступности. Браузеры и операционные системы подхватили эту тенденцию, предложив разработчикам инструмент — медиа-запрос `prefers-color-scheme`. Он позволяет адаптировать внешний вид сайтов в зависимости от предпочтений пользователя. Это не просто «модная фишка», а функциональность, напрямую влияющая на восприятие и юзабилити продукта.
Принцип работы prefers-color-scheme
Медиа-запрос `prefers-color-scheme` — часть стандарта CSS Media Queries Level 5. Он позволяет определить, предпочитает ли пользователь светлую (`light`) или тёмную (`dark`) цветовую схему. Существует и значение `no-preference`, если предпочтение не указано. Это даёт разработчику возможность адаптировать интерфейс без вмешательства пользователя.
Пример базового использования:
```css
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #f0f0f0;
}
}
```
Если система пользователя настроена на тёмную тему, браузер автоматически применит эти стили. В противном случае будут использоваться стили по умолчанию или стили для светлой темы.
Насколько широко поддерживается prefers-color-scheme
На момент 2024 года поддержка prefers-color-scheme в браузерах почти универсальна. По состоянию на апрель, более 97% пользователей интернета используют браузеры, которые корректно обрабатывают этот медиа-запрос. Он поддерживается во всех актуальных версиях Chrome, Firefox, Safari, Edge и даже в мобильных браузерах Android и iOS. Это делает prefers-color-scheme безопасным выбором даже для масштабных проектов.
Как использовать prefers-color-scheme эффективно
Внедрение этого медиа-запроса — это не просто переключение фона и текста. Это возможность создать полноценные альтернативные темы, которые учитывают контекст и цели пользователя. Вот несколько нестандартных подходов:
- Адаптивная графика: Используйте разные версии изображений или SVG-иконок в зависимости от темы. Например, логотип в светлой теме может быть тёмным, а в тёмной — светлым.
- Контрастные анимации: В тёмной теме многие цвета ведут себя иначе. Убедитесь, что CSS-анимации и переходы не теряются на фоне. Вы можете использовать prefers-color-scheme, чтобы изменить keyframes.
- Использование CSS custom properties: Задайте переменные для цветов и переключайте значения через медиа-запрос.
Пример с переменными:
```css
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #181818;
--text-color: #e0e0e0;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
```
Это удобный способ масштабировать тему и поддерживать её в больших проектах.
Нестандартные решения и практические советы
Многие разработчики ограничиваются базовой настройкой темы через prefers-color-scheme, но есть возможности пойти дальше:
1. Персонализация через JavaScript. Можно использовать JS для определения предпочтений и динамического применения классов, что удобно в SPA. Пример:
```javascript
const theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', theme);
```
2. Локальное сохранение предпочтений. Если пользователь вручную выбрал тему, её можно сохранить в `localStorage` и использовать при следующем визите, при этом учитывая системные настройки как дефолт.
3. Комбинирование с prefers-reduced-motion. Пользователи, предпочитающие тёмную тему, часто также отключают анимации. Комбинируя оба медиа-запроса, можно повысить доступность интерфейса.
4. Серверный рендеринг с учётом темы. Если вы используете SSR, можно передавать тему на сервер через cookie, установленные на клиенте. Это обеспечит корректную отрисовку уже на первом экране.
Когда не стоит использовать prefers-color-scheme
Несмотря на широкую поддержку prefers-color-scheme в браузерах, есть случаи, когда его применение может быть неуместным:
- Если у вас строгий бренд-гайд и цветовая гамма должна оставаться неизменной.
- Если ваш проект ориентирован на минимальное визуальное оформление.
- Если адаптация темы требует значительных ресурсов, а трафик с устройств с поддержкой тёмной темы незначителен.
В таких случаях можно предложить ручное переключение темы, не полагаясь на системные настройки.
prefers-color-scheme для начинающих: с чего начать
Если вы только начинаете осваивать prefers-color-scheme, начните с простого:
1. Определите набор цветов для светлой и тёмной темы.
2. Определите переменные через CSS custom properties.
3. Используйте медиа-запросы для переопределения переменных.
4. Проверьте отображение в разных браузерах и устройствах.
Важно протестировать интерфейс не только визуально, но и с точки зрения восприятия: читаемость, контрастность, удобство навигации.
Заключение
Медиа-запрос `prefers-color-scheme` — это мощный инструмент для создания адаптивных и доступных интерфейсов. Он позволяет учитывать предпочтения пользователей и повышать лояльность за счёт заботы о комфорте. Зная, как использовать prefers-color-scheme правильно, вы можете не только следовать современным стандартам, но и предложить пользователям по-настоящему персонализированный опыт. Не бойтесь экспериментировать — настройка темы через prefers-color-scheme может стать не просто технической задачей, а частью философии вашего продукта.
