С обновлением операционной системы Apple до MacOS Mojave в ней появилась поддержка так называемой темной темы оформления, или на английском языке Dark Mode.
Поддержку темного режима предоставляет всё больше приложений, а не только стандартные приложения от Apple. Как и другие нововведения от яблочной кампании, темные темы пошли в массы. Всё понятно с приложениями, но что же о веб сайтах?
Разработчики из Apple позаботились и об этом и в техническом превью релизе браузера Safari (Safari Tech Preview 68) внедрили поддержку Dark Mode с помощью запроса @media в CSS. Для всех эта функция станет доступна в Safari 12.1, который будет выпущен в течение нескольких месяцев.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* 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; } } |
Новый параметр для медиа запроса может принимать следующие значения:
|
1 |
prefers-color-scheme: light / dark / no-preference; |
Как это будет выглядеть можно увидеть в видео ниже:
Источник: https://paulmillr.com/posts/using-dark-mode-in-css/