Улучшен стиль по умолчанию в темном режиме с использованием свойства CSS цветовой схемы и соответствующего метатега.

Свойство CSS color-scheme и соответствующий метатег позволяют разработчикам использовать на своих страницах настройки по умолчанию для конкретной темы таблицы стилей пользовательского агента.

Томас Штайнер

Фон

Медиа-функция предпочтений пользователя prefers-color-scheme

Функция мультимедийных предпочтений пользователя prefers-color-scheme дает разработчикам полный контроль над внешним видом своих страниц. Если вы с ним не знакомы, прочитайте мою статью prefers-color-scheme : «Привет, темнота, мой старый друг» , где я задокументировал все, что знаю о создании потрясающих темных режимов.

Одна часть головоломки, которая была лишь кратко упомянута в статье, — это CSS color-scheme и соответствующий одноименный метатег. Оба они упрощают вашу жизнь как разработчика, позволяя вам настроить на своей странице параметры по умолчанию таблицы стилей пользовательского агента, специфичные для темы, такие как, например, элементы управления формой, полосы прокрутки, а также системные цвета CSS. В то же время эта функция не позволяет браузерам самостоятельно применять какие-либо преобразования.

Поддержка браузера

prefers-color-scheme

Поддержка браузера

  • Хром: 76.
  • Край: 79.
  • Фаерфокс: 67.
  • Сафари: 12.1.

Источник

color-scheme

Поддержка браузера

  • Хром: 81.
  • Край: 81.
  • Фаерфокс: 96.
  • Сафари: 13.

Источник

Таблица стилей пользовательского агента

Прежде чем продолжить, позвольте мне кратко описать, что такое таблица стилей пользовательского агента. Большую часть времени вы можете думать о слове «пользовательский агент» (UA) как о причудливом способе сказать «браузер» . Таблица стилей UA определяет внешний вид страницы по умолчанию. Как следует из названия, таблица стилей UA зависит от рассматриваемого UA. Вы можете взглянуть на таблицу стилей UA Chrome (и Chromium) и сравнить ее с таблицами стилей Firefox или Safari (и WebKit). Обычно таблицы стилей UA согласуются по большинству вопросов. Например, все они делают ссылки синими, общий текст — черным, а цвет фона — белым, но есть и важные (а иногда и раздражающие) различия, например, стиль оформления элементов управления.

Подробно рассмотрим таблицу стилей UA WebKit и то, что она делает с темным режимом. (Выполните полнотекстовый поиск слова «темный» в таблице стилей.) Значение по умолчанию, предоставляемое таблицей стилей, меняется в зависимости от того, включен или выключен темный режим. Чтобы проиллюстрировать это, вот одно такое правило CSS, использующее псевдокласс :matches и внутренние переменные WebKit, такие как -apple-system-control-background , а также внутреннюю директиву препроцессора WebKit #if defined :

input,
input:matches([type="password"], [type="search"]) {
  -webkit-appearance: textfield;
  #if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
      HAVE_OS_DARK_MODE_SUPPORT
    color: text;
    background-color: -apple-system-control-background;
  #else
    background-color: white;
  #endif
  /* snip */
}

Вы заметили некоторые нестандартные значения свойств color и background-color выше. Ни text , ни -apple-system-control-background не являются допустимыми цветами CSS. Это внутренние семантические цвета WebKit.

Оказывается, CSS имеет стандартизированную семантическую систему цветов. Они указаны в CSS Color Module Level 4 . Например, Canvas (не путать с тегом <canvas> ) предназначен для фона содержимого или документов приложения, тогда как CanvasText предназначен для текста в содержимом приложения или документах. Они сочетаются друг с другом и не должны использоваться изолированно.

Таблицы стилей UA могут использовать либо свои собственные, либо стандартизированные цвета семантической системы, чтобы определить, как HTML-элементы должны отображаться по умолчанию. Если в операционной системе установлен темный режим или используется темная тема, CanvasText (или text ) будет условно установлен на белый цвет, а Canvas (или -apple-system-control-background ) будет установлен на черный цвет. Затем таблица стилей UA назначает следующий CSS только один раз и охватывает как светлый, так и темный режим. 

/**
  Not actual UA stylesheet code.
  For illustrative purposes only.
*/
body {
  color: CanvasText;
  background-color: Canvas
}

CSS color-scheme

Спецификация модуля настройки цвета CSS уровня 1 представляет модель и элементы управления автоматической регулировкой цвета пользовательским агентом с целью обработки пользовательских предпочтений, таких как темный режим, настройка контрастности или определенные желаемые цветовые схемы.

Определенное в нем свойство color-scheme позволяет элементу указывать, в каких цветовых схемах его удобно визуализировать. Эти значения согласовываются с предпочтениями пользователя, в результате чего выбранная цветовая схема влияет на элементы пользовательского интерфейса (UI), такие как цвета по умолчанию для элементов управления формы и полос прокрутки, а также используемые значения системных цветов CSS. В настоящее время поддерживаются следующие значения:

  • normal Указывает, что элемент вообще не поддерживает цветовые схемы, поэтому элемент должен отображаться с использованием цветовой схемы браузера по умолчанию.

  • [ light | dark ]+ Указывает, что элемент знает и может обрабатывать перечисленные цветовые схемы, а также выражает упорядоченное предпочтение между ними.

В этом списке light представляет собой светлую цветовую схему со светлыми цветами фона и темными цветами переднего плана, тогда как dark представляет собой противоположную схему с темными цветами фона и светлыми цветами переднего плана.

Для всех элементов рендеринг с использованием цветовой схемы должен привести к тому, что цвета, используемые во всем пользовательском интерфейсе браузера для элемента, будут соответствовать назначению цветовой схемы. Примерами являются полосы прокрутки, подчеркивания для проверки орфографии, элементы управления формами и т. д.

В элементе :root рендеринг с использованием цветовой схемы дополнительно должен влиять на цвет поверхности холста (то есть глобальный цвет фона), начальное значение свойства color и используемые значения системных цветов, а также должно влияют на полосы прокрутки области просмотра. 

/*
  The page supports both dark and light color schemes,
  and the page author prefers dark.
*/
:root {
  color-scheme: dark light;
}

Метатег color-scheme

Для использования свойства CSS color-scheme необходимо сначала загрузить CSS (если на него есть ссылка через <link rel="stylesheet"> ) и проанализировать его. Чтобы помочь пользовательским агентам немедленно отобразить фон страницы с желаемой цветовой схемой, значение color-scheme также может быть предоставлено в элементе <meta name="color-scheme"> . 

<!--
  The page supports both dark and light color schemes,
  and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">

Сочетание color-scheme и prefers-color-scheme

Поскольку и метатег, и свойство CSS (если оно применяется к элементу :root ) в конечном итоге приводят к одному и тому же поведению, я всегда рекомендую указывать цветовую схему через метатег, чтобы браузер мог быстрее адаптироваться к предпочтительной схеме.

Хотя для абсолютных базовых страниц дополнительные правила CSS не требуются, в общем случае всегда следует комбинировать color-scheme с prefers-color-scheme . Например, собственный CSS-цвет WebKit -webkit-link , используемый WebKit и Chrome для классической ссылки blue rgb(0,0,238) , имеет недостаточный коэффициент контрастности 2,23:1 на черном фоне и не соответствует требованиям WCAG AA, поскольку а также требованиям WCAG AAA.

Я открыл ошибки для Chrome , WebKit и Firefox , а также мета-проблему в стандарте HTML, чтобы исправить это.

Взаимодействие с prefers-color-scheme

Взаимодействие CSS-свойства color-scheme и соответствующего метатега с мультимедийной функцией предпочтений пользователя « prefers-color-scheme на первый взгляд может показаться запутанным. На самом деле, они очень хорошо играют вместе. Самое важное, что нужно понимать, это то, что color-scheme определяет исключительно внешний вид по умолчанию, тогда как prefers-color-scheme определяет стилизуемый внешний вид. Чтобы сделать это более понятным, предположим следующую страницу:

<head>
  <meta name="color-scheme" content="dark light">
  <style>
    fieldset {
      background-color: gainsboro;
    }
    @media (prefers-color-scheme: dark) {
      fieldset {
        background-color: darkslategray;
      }
    }
  </style>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, legere ancillae ne vis.
  </p>
  <form>
    <fieldset>
      <legend>Lorem ipsum</legend>
      <button type="button">Lorem ipsum</button>
    </fieldset>
  </form>
</body>

Встроенный код CSS на странице устанавливает background-color элемента <fieldset> в значение gainsboro в общем случае и в darkslategray , если пользователь предпочитает dark цветовую схему в соответствии с медиа-функцией предпочтений пользователя prefers-color-scheme .

С помощью элемента <meta name="color-scheme" content="dark light"> страница сообщает браузеру, что она поддерживает темную и светлую тему, отдавая предпочтение темной теме.

В зависимости от того, установлен ли в операционной системе темный или светлый режим, вся страница выглядит светлой на темном или наоборот, в зависимости от таблицы стилей пользовательского агента. Для изменения текста абзаца или цвета фона страницы не требуется никакого дополнительного CSS-кода, предоставленного разработчиком.

Обратите внимание, как background-color элемента <fieldset> меняется в зависимости от того, включен ли темный режим, в соответствии с правилами встроенной таблицы стилей, предоставленной разработчиком на странице. Это либо gainsboro , либо darkslategray .

Страница в облегченном режиме.
Облегченный режим: стили, указанные разработчиком и пользовательским агентом. Текст черный, а фон белый, как указано в таблице стилей пользовательского агента. background-color элемента <fieldset> — gainsboro согласно встроенной таблице стилей разработчика.
Страница в темном режиме.
Темный режим: стили, указанные разработчиком и пользовательским агентом. Текст белый, а фон черный, как указано в таблице стилей пользовательского агента. background-color элемента <fieldset> — darkslategray как указано во встроенной таблице стилей разработчика.

Внешний вид элемента <button> контролируется таблицей стилей пользовательского агента. Его color установлен в системный цвет ButtonText , а его background-color и четыре border-color установлены в системный цвет ButtonFace .

Страница облегченного режима, использующая свойство ButtonFace.
Светлый режим: background-color и различные border-color устанавливаются в системный цвет ButtonFace .

Теперь обратите внимание, как меняется border-color элемента <button> . Вычисленное значение для border-top-color и border-bottom-color переключается с rgba(0, 0, 0, 0.847) (черноватый) на rgba(255, 255, 255, 0.847) (беловатый), поскольку пользователь Агент динамически обновляет ButtonFace на основе цветовой схемы. То же самое относится и к color элемента <button> , которому присвоен соответствующий системный цвет ButtonText .

Показано, что вычисленные значения цвета соответствуют ButtonFace.
Облегченный режим: вычисленные значения border-top-color и border-bottom-color , которым в таблице стилей пользовательского агента присвоено значение ButtonFace теперь равны rgba(0, 0, 0, 0.847) .
Показано, что вычисленные значения цвета по-прежнему соответствуют ButtonFace в темном режиме.
Темный режим: вычисленные значения border-top-color и border-bottom-color , которым в таблице стилей пользовательского агента присвоено значение ButtonFace теперь равны rgba(255, 255, 255, 0.847) .

Демо

Вы можете увидеть эффекты color-scheme , примененной к большому количеству HTML-элементов, в демо-версии Glitch . В демо намеренно показаны нарушения WCAG AA и WCAG AAA с использованием цветов ссылок, упомянутых в предупреждении выше.

Демо в облегченном режиме.
Демо-версия переключилась на color-scheme: light .
Демо в темном режиме.
Демо-версия переключилась на color-scheme: dark . Обратите внимание на нарушение WCAG AA и WCAG AAA в цветах ссылок.

Благодарности

CSS color-scheme и соответствующий метатег были реализованы Rune Lillesveen . Руне также является соредактором спецификации CSS Color Adjustment Module Level 1. Изображение героя Филиппа Леоне на Unsplash .