Примером медиа-запроса настроек пользователя является проверка предпочтительной цветовой схемы.
Этот медиа-запрос делает стили адаптивными к настройкам пользователя.
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
/* Стили тёмного режима */
}
Ещё лучше, если при добавлении color-scheme элементы управления формой по умолчанию поменяют свою тему со светлой на тёмную (поддерживается только в Safari).