Автоопределение свелой/темной темы девайса пользователя средствами css

16 Июля 2018 W3C зарегистрировала новый стандарт Media Queries Level 5 и теперь спустя время его можно смело использовать.
Больше не требуется прибегать к каким то хитростям, в виде js, или двух тем оформления с кнопками смены переключения с темного на светлый режим. От этого много плюсов, так как тема устройства пользователя определяется автоматически и отображается в том цвете который предпочитает посетитель сайта.
Как это использовать? Для этого достаточно использовать новое условие prefers-color-scheme в @media для определения темной темы в css:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #fff;
    }
}
/* Light mode */
@media (prefers-color-scheme: light) {}

Для светлого оформление это условие можно не использовать и даже нужно пока не использовать, так как не все браузеры это поддерживают.
Какие браузеры это поддерживают, можно посмотреть на специализированном ресурсе
Если использовать оба условия dark & light, то браузеры которые, то не поддерживают, не смогут загрузить стили.
Рекомендую использовать лишь dark и прописать для него стили ниже основных, таким способом браузеры которые отстают в развитии, загрузят основные стили проигнорировав непонятное для них условие prefers-color-scheme
Вышеуказанное условие работает во всех нормальных браузерах, таких как: Safari, Chrom*, Firefox не допотопных мобильных и дестктоп версиях.
Пример работы можно увидеть на этом блоге, если переключить режим Dark/Light mode на вашем устройстве.