CSS стили для Dark Mode

С обновлением операционной системы 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/

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *