CSS Academy · Урок

Свойство color-scheme

Используйте свойство color-scheme, чтобы сообщить браузеру, какие темы поддерживает элемент.

Урок 3 из 412 шагов

«Свойство color-scheme» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое color-scheme

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

Значения color-scheme

Допустимые значения:

normal: элемент использует схему документа по умолчанию
light: элемент поддерживает только светлую схему
dark: элемент поддерживает только тёмную схему
light dark: поддерживаются обе схемы; браузер выбирает одну на основе предпочтения
dark light: предпочтительна тёмная схема, при отсутствии поддержки используется светлая

Элементы интерфейса браузера

Браузер автоматически оформляет следующие элементы в соответствии с color-scheme:

Полосы прокрутки
Поля ввода, многострочные поля и раскрывающиеся списки
Флажки и переключатели
Ползунки диапазона
Средства выбора даты и времени

Настройка элемента html

Настройка color-scheme для корневого элемента изменяет отображение системного интерфейса на всей странице:

<input type="checkbox" /> <select><option>A</option><option>B</option></select>

Эквивалент метатега

Также можно объявить color-scheme в HTML в виде метатега, чтобы применить его раньше, до загрузки CSS:

<pre class="code-sample">&lt;meta name="color-scheme" content="light dark"&gt;</pre>

Режим dark без пользовательских цветов

Минимальная реализация режима dark: задайте color-scheme: dark, и браузер автоматически оформит элементы форм и полосы прокрутки:

<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />

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

Используйте prefers-color-scheme, чтобы определить предпочтение и одновременно задать собственные токены AND свойство color-scheme:

<div class="demo">Themed via variables + color-scheme</div>

Область действия color-scheme

Применяйте color-scheme к отдельным элементам, чтобы создать изолированные светлые области на странице в режиме dark:

<div class="light-widget">Always-light widget<br/><input type="date" /></div>

Принудительные цвета и высокая контрастность Windows

Медиазапрос forced-colors обнаруживает режим высокой контрастности Windows. Используйте color-scheme и forced-colors вместе для комплексной поддержки доступности.

<div class="card">Card respects forced-colors mode</div>

Ключевые слова system-color

Когда активен forced-colors, используйте ключевые слова системных цветов CSS, соответствующие доступной цветовой палитре пользователя:

<button>System-styled button</button>

Быстрая проверка

Какое поведение CSS включает настройка color-scheme: dark для элемента html?

Ответь в интерактивном уроке

Повторение

color-scheme указывает браузеру, как оформлять собственные элементы управления интерфейса для элемента или страницы. Используйте глобально color-scheme: light dark, чтобы включить автоматическую адаптацию встроенного интерфейса. Сочетайте это свойство с пользовательскими свойствами CSS для полной реализации режима dark. Используйте метатег для раннего применения до загрузки CSS.

Можно начать бесплатно

Изучай CSS с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 40
Уроки: 159

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Свойство color-scheme» бесплатный?

Да — полный текст урока «Свойство color-scheme» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Свойство color-scheme»?

Используйте свойство color-scheme, чтобы сообщить браузеру, какие темы поддерживает элемент. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Свойство color-scheme»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy