color-scheme: светлое и тёмное оформление нативных частей
Color-scheme сообщает браузеру, какие цветовые схемы поддерживает область документа. Оно влияет на нативные части интерфейса, но не создаёт полноценную тёмную тему для всех авторских цветов.
Назначение
Color-scheme сообщает браузеру, какие цветовые схемы поддерживает область документа. Оно влияет на нативные части интерфейса, но не создаёт полноценную тёмную тему для всех авторских цветов.
Как это работает
Light dark разрешает обе схемы, выбор зависит от среды. В примере системные цвета Canvas и CanvasText помогают согласовать фон и текст контейнера с нативным полем.
Пример
<style>.scheme-box{color-scheme:light dark;background:Canvas;color:CanvasText;border:1px solid;padding:1rem}.scheme-box input{font:inherit;padding:.5rem}</style>
<section class="scheme-box"><h3>Учебная настройка</h3><label for="scheme-title">Название</label><input id="scheme-title" value="Пример"></section>Что должно получиться
В подходящих условиях поле и системные цвета отражают выбранную светлую или тёмную схему. Окружающая страница при этом не обязана автоматически менять собственные явно заданные цвета.
Граница применения и частая ошибка
Не объявляйте поддержку dark, если авторский текст или фон при этом становятся нечитаемыми. Prefers-color-scheme позволяет выбрать собственные стили, а color-scheme сообщает браузеру о поддержке. Это связанные, но разные механизмы.
Самостоятельная проверка
Переключите предпочтение цветовой схемы в инструментах браузера. Проверьте поле, фон и выделение текста. Затем добавьте фиксированный цвет и убедитесь, что контраст сохраняется в обоих режимах.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.