С обновлением операционной системы Apple до MacOS Mojave в ней появилась поддержка так называемой темной темы оформления, или на английском языке Dark Mode.
Поддержку темного режима предоставляет всё больше приложений, а не только стандартные приложения от Apple. Как и другие нововведения от яблочной кампании, темные темы пошли в массы. Всё понятно с приложениями, но что же о веб сайтах?
Разработчики из Apple позаботились и об этом и в техническом превью релизе браузера Safari (Safari Tech Preview 68) внедрили поддержку Dark Mode с помощью запроса @media в CSS. Для всех эта функция станет доступна в Safari 12.1, который будет выпущен в течение нескольких месяцев.
/* Text and background color for light mode */body {
color: #333;
}
/* Text and background color for dark mode */@media (prefers-color-scheme: dark) {
body {
color: #ddd;
background-color: #222;
}
}
Новый параметр для медиа запроса может принимать следующие значения:
prefers-color-scheme: light / dark / no-preference;
Как это будет выглядеть можно увидеть в видео ниже:
Источник: https://paulmillr.com/posts/using-dark-mode-in-css/