Светлая и тёмная схема: проверить системное предпочтение
Предпочтение тёмной темы можно учитывать через CSS-медиазапрос. В упражнении проверяются не только фон и текст, но и поля, ссылки и контуры фокуса.
Назначение
Предпочтение тёмной темы можно учитывать через CSS-медиазапрос. В упражнении проверяются не только фон и текст, но и поля, ссылки и контуры фокуса.
Как это работает
Prefers-color-scheme сообщает о предпочтении пользователя. Свойство color-scheme помогает браузеру выбрать представление нативных элементов. Переменные позволяют согласованно менять основные цвета.
Пример
<style>:root{color-scheme:light dark;--surface:#f5faf6;--ink:#173a29}.theme-demo{background:var(--surface);color:var(--ink);padding:1rem}@media(prefers-color-scheme:dark){:root{--surface:#152b20;--ink:#e5f4e9}}</style>
<div class="theme-demo"><p>Проверка выбранной схемы.</p><label>Учебное поле <input value="Текст"></label><button type="button">Действие</button></div>Что должно получиться
В соответствующей схеме меняются заданные цвета, а браузер может адаптировать нативные контролы. Кнопка не выполняет действия: она добавлена для визуальной проверки состояния.
Граница применения и частая ошибка
Инверсия всех цветов фильтром не заменяет продуманную тему. Тёмная схема не гарантирует высокий контраст. Если приложение хранит явный выбор пользователя, нужно определить его приоритет относительно системного предпочтения.
Самостоятельная проверка
Переключите схему в настройках системы или эмуляции DevTools. Проверьте обычный текст, выбранное содержимое поля, фокус и отключённые элементы. Отдельно испытайте системный режим повышенной контрастности, если он важен для аудитории.