<meta name="color-scheme"> значение атрибута HTML

Значение color-scheme атрибута name элемента <meta> указывает рекомендуемую цветовую схему, которую пользовательские агенты должны использовать для страницы. Если это значение задано, цветовая схема определяется с помощью атрибута content элемента <meta>, содержащего допустимое значение CSS-свойства color-scheme.

Цветовая схема темы применяется на уровне документа так же, как свойство CSS color-scheme задаёт предпочтительные и допустимые цветовые схемы для отдельных элементов. Основное назначение <meta name="color-scheme"> — указать совместимость и порядок предпочтения светлого и тёмного режимов. Например, чтобы указать, что документ предпочитает тёмный режим, но также поддерживает светлый:

<meta name="color-scheme" content="dark light" />

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

Примечания по использованию

Элемент <meta name="color-scheme"> имеет следующие дополнительные атрибуты:

content

Элемент <meta> с атрибутом name=color-scheme должен содержать атрибут content, задающий цветовую схему как значение CSS-свойства color-scheme. Атрибут content может принимать одно из следующих значений:

normal

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

light, dark, light dark, dark light

Одна или несколько цветовых схем, поддерживаемых документом. Если указано несколько цветовых схем, это означает, что документ предпочитает первую, но допускает вторую, если пользователь отдаёт ей предпочтение. Указание одной и той же цветовой схемы несколько раз равнозначно указанию её один раз.

only light

Указывает, что документ поддерживает только светлый режим со светлым фоном и тёмными цветами переднего плана. only dark недопустимо, поскольку принудительное отображение документа в тёмном режиме, если он с ним несовместим, может сделать содержимое нечитаемым, а все основные браузеры по умолчанию используют светлый режим, если не заданы другие настройки.

media Необязательно

Любой допустимый тип мультимедиа или медиазапрос. Если он указан, параметры цветовой схемы документа, определённые в атрибуте content, предлагаются браузеру при совпадении медиазапроса. Это особенно полезно для CSS-медиавыражения prefers-color-scheme.

Примеры

Использование ключевого слова color-scheme

Следующий пример сообщает браузеру, что страница поддерживает и светлую, и тёмную темы. Использование светлой или тёмной цветовой схемы зависит от предпочтений пользователя, например от настроек операционной системы или браузера:

<meta name="color-scheme" content="light dark" />

Спецификации

Совместимость с браузерами

См. также

• color-scheme — свойство CSS
• prefers-color-scheme — медиазапрос