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

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

Thomas Steiner

Фон

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

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

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

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

prefers-color-scheme

color-scheme

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

Прежде чем продолжить, позвольте мне кратко описать, что такое таблица стилей пользовательского агента. В большинстве случаев вы можете думать о слове «пользовательский агент» (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 . Например, собственный цвет WebKit CSS -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 .

Внешний вид элемента <button> контролируется таблицей стилей пользовательского агента. Его color установлен в системный цвет ButtonText , а его 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 .

Демо

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

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

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

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

Thomas Steiner

Фон

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

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

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

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

prefers-color-scheme

color-scheme

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

Прежде чем продолжить, позвольте мне кратко описать, что такое таблица стилей пользовательского агента. В большинстве случаев вы можете думать о слове «пользовательский агент» (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 . Например, собственный цвет WebKit CSS -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 .

Внешний вид элемента <button> контролируется таблицей стилей пользовательского агента. Его color установлен в системный цвет ButtonText , а его 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 .

Демо

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

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

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

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

Thomas Steiner

Фон

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

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

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

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

prefers-color-scheme

color-scheme

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

Прежде чем продолжить, позвольте мне кратко описать, что такое таблица стилей пользовательского агента. В большинстве случаев вы можете думать о слове «пользовательский агент» (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 . Например, собственный цвет WebKit CSS -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 .

Внешний вид элемента <button> контролируется таблицей стилей пользовательского агента. Его color установлен в системный цвет ButtonText , а его 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 .

Демо

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

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

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

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

Thomas Steiner

Фон

prefers-color-scheme пользователя предпочтения

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

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

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

prefers-color-scheme

color-scheme

Таблица стиля пользователя

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

Посмотрите на таблицу стилей Webkit UA и то, что она делает в отношении темного режима. (Сделайте полный текстовый поиск «темного» в таблице стиля.) По умолчанию, предоставленные изменениями в стиле таблицы в зависимости от того, включен или выключен темный режим. Чтобы проиллюстрировать это, вот одно из таких правил CSS с использованием :matches псевдо-классом и интернет-интернет-интернет-интерфейсом, такие как -apple-system-control-background , а также директива Webkit-Internal препроцессора #if defined : defined: defined: 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-Internal Semantic Colors.

Оказывается, CSS имеет стандартизированные цвета семантической системы. Они указаны в цветовом модуле CSS уровня 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
}

Собственность color-scheme CSS

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

Свойство color-scheme , определенное в нем, позволяет элементу указать, какие цветовые схемы ему удобны. Эти значения обсуждаются с предпочтениями пользователя, что приводит к выбранной цветовой схеме, которая влияет на пользовательские интерфейс (пользовательский интерфейс), такие как цвета управления управлением формой по умолчанию и полосы прокрутки, а также использованные значения цветов системы 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

Утверждение свойства 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 . Например, запатентованная Webkit CSS COLOR -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> Element для gainsboro в общем случае и darkslategray , если пользователь предпочитает dark цветовую схему в соответствии с функцией предпочтения пользователя prefers-color-scheme .

Через <meta name="color-scheme" content="dark light"> страница говорит браузер, что он поддерживает темную и легкую тему с предпочтением темной темы.

В зависимости от того, установлена ​​ли операционная система в режим Dark или Light, вся страница появляется свет на темной или наоборот, на основе таблицы стилей пользователя. Не существует дополнительных предоставленных разработчиков CSS для изменения текста абзаца или цвета фона страницы.

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

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

Теперь обратите внимание, как изменяется 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 системы.

Демо

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

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

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