() В CSS наконец-то завезли функцию light-dark(), которая делает всю грязную работу в одну строчку. Ты просто скармливаешь ей два цвета: первый для дня, второй для ночи. Как это выглядит в коде: CSS :root { /* Говорим браузеру, что у нас тут равноправие тем как бы */ color-scheme: light dark; } body { /* Днем работаем / Ночью тушим свет */ background-color: light-dark(#fff, #1e1e1e); color: light-dark(#333, #f5f5f5); } Браузер сам смотрит в настройки телефона или компа пользователя. Если у него включена темная тема - магия сработает автоматически, и применятся вторые цвета. Без единого медиа-запроса и без единой строчки на JavaScript. Пользуйтесь, это уже работает во всех современных браузерах!❤️ #cssсвойстводня
👍 CSS-свойство дня: light-dark()
В CSS наконец-то завезли функцию light-dark(), которая делает всю грязную работу в одну строчку. Ты просто скармливаешь ей два цвета: первый для дня, второй для ночи.
Как это выглядит в коде:
CSS
:root {
/* Говорим браузеру, что у нас тут равноправие тем как бы */
color-scheme: light dark;
}
body {
/* Днем работаем / Ночью тушим свет */
background-color: light-dark(#fff, #1e1e1e);
color: light-dark(#333, #f5f5f5);
}
Браузер сам смотрит в настройки телефона или компа пользователя. Если у него включена темная тема - магия сработает автоматически, и применятся вторые цвета. Без единого медиа-запроса и без единой строчки на JavaScript.
Пользуйтесь, это уже работает во всех современных браузерах!❤️
#cssсвойстводня
