Определяем темную тему в CSS

16 Июля 2018 W3C зарегистрировала новый стандарт Media Queries Level 5.

Благодаря данному стандарту, можем использовать новое условие prefers-color-scheme в @media для определения темной темы в CSS:

/* Темное оформление */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}
/* Светлое оформление */
@media (prefers-color-scheme: light) {}

P.S. Поддержка нового условия (на 15 апреля 2019) есть только у Safari 12.1+ и Firefox 67+

2019   CSS
Популярное