ЗНАКОМИМСЯ С МЕДИАФУНКЦИЕЙ PREFERS-COLOR-SCHEME
Информация взята из источника 2020 года
Где данная функция отмечена на уровне спецификации Media Queries Level 5
На сегодняшний день поддерживается на таком уровне
У медиафункции PREFERS-COLOR-SCHEME
есть три возможности: light, dark и no-preference
Данная функция запрашивает данные с вашего устройства, а именно какая тема у вас выбрана в настройках.
НАПРИМЕР, мой код
body {background-color: hsl(240,7.7%,5.1%);} /* цвет фона по умолчанию, я выбрала темную*/
@media (prefers-color-scheme: light) {body {background-color: hsl(199,36%,76%);}} /* цвет светлой темы*/
первой строкой указываете стиль по умолчаю
вторая строка делает медиазапрос, если устройство отвечает, что тема светлая - меняет цвет на новый
* прошу прощения за нижепредставленные скрины, пока не доработан их полный вид.
и вот так у меня отображают разные телефоны
слева телефон со светлой темой, справа - темная
естественно в стилях вы можете прописать не только фон
Отредактировано nou (28.02.24 01:22)