color-scheme: схема оформления

Подсказывает браузеру, тёмная или светлая схема у элемента.

Уровень: средний 10 разделов 12 минут

1. Что это и зачем

Подсказывает браузеру, тёмная или светлая схема у элемента.

Цвет в CSS задаётся в цветовых моделях: hex, rgb(a), hsl(a) и их нотациях, включая современные oklch. Фон управляется свойством background с десятком подсвойств — от цвета до градиентов и повторения картинки.

{title} — это про контраст, а не про «красоту»: сначала читаемость, потом настроение.

2. Синтаксис и пример

:root { color-scheme: light dark; }

Запись выше — базовый вариант использования. Обратите внимание, как color-scheme: схема оформления вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Градиенты — это фоновые изображения, сгенерированные браузером; их можно накладывать и комбинировать с картинками. Прозрачность достигается альфа-каналом, а не «лёгким» оттенком.

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

4. Как это работает под капотом

{title} — это про контраст, а не про «красоту»: сначала читаемость, потом настроение.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Современная модель цвета (hsl, oklch, color()) поддерживается везде в 2020-х. Старые hex-значения тоже всегда работают, поэтому миграция безопасна.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Влияет на скроллбары, автозаполнение, системные виджеты.

Несоответствие реальной теме ломает вид форм.

7. Практическое задание

Объявите цветовую схему для тёмной темы.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

:root { color-scheme: light dark; }

8. Как применять в проектах

Палитра заводится в переменные :root и используется во всём интерфейсе; тёмная тема меняет переменные, а не отдельные страницы.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

цвета вынесены в переменные;
контраст текста и фона ≥ 4.5:1 для текста;
состояния (hover/active) различимы по цвету И форме;
градиенты не конфликтуют с тёмной темой;
прозрачность не «серотит» текст;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам