Создание цветовой темы с помощью light-dark(), contrast-color() и запросов стилей

В сфере искусственного интеллекта произошло заметное событие. aio350 8 минут назад Создание цветовой темы с помощью light-dark(), contrast-color() и запросов стилей Средний 6 мин 160 CSS * Веб-разработка * Туториал Перевод Автор оригинала: Una Kravets В этом небольшом туториале я покажу вам, как с помощью нескольких новых возможностей CSS можно создать действительно прикольную динамичную систему тематизации (theming). Эта техника позволяет создавать тематизированные компоненты с тенями в светлом режиме и светящимися границами в темном режиме, с текстом, который всегда остается читаемым, независимо от динамичного цвета его фона. Доступно во всех современных браузерах с мая 2026 года.

Вот что мы будем использовать:@property для регистрации значения кастомного свойства (custom property) с осмысленным синтаксисомlight-dark() - разрешает значения на основе вычисленной (computed) color-scheme (учитывающей настройки пользователей (user preferences))contrast-color() автоматически выбирает черный или белый текст для любого фона на основе алгоритма определения контраста WCAG@container style() - ветвление (branching) кастомных цветовых палитр с помощью запросов стилей (style queries) на основе того, во что разрешается (resolve) contrast-color()И опциональная директива @function для того, чтобы сделать код чище (хотя она пока имеет ограниченную поддержку браузеров). Шаг 1: light-dark() как основаlight-dark() - это, по сути, более простая альтернатива медиа-запросам настроек пользователей, касающихся цветовой темы. Функция принимает два значения цвета и возвращает первое в светлой цветовой схеме и второе в темной.

Технические детали

Она “читает” из вычисленной color-scheme элемента. Это означает, что она реагирует как на prefers-color-scheme, так и на любое явное свойство color-scheme, установленное в CSS или с помощью JavaScript Следует отметить одну вещь: light-dark() реагирует на вычисленную color-scheme, а не на медиа-запросы prefers-color-scheme. Установка color-scheme: light dark на корневом элементе (root) указывает браузеру учитывать настройки пользовательской ОС, но мы можем перезаписать схему путем явной установки color-scheme: dark (или light).

Это означает, что мы можем перезаписать схему на любом уровне:/* По умолчанию, учитываем настройки ОС */ /* Переключаем раздел в темный режим, независимо от настроек ОС */ Каждый вызов light-dark() внутри . dark-section - включая вызовы внутри @function --elevation() (см. ниже) - будут разрешаться в темное значение.

В данном случае преимуществами по сравнению с медиа-запросами являются наследование и композиция. Шаг 2: переключение механизма выделенияВ светлых темах карточки выглядят объемными благодаря теням. Но в темных темах тени растворяются в фоне… поэтому нам нужен другой механизм выделения (elevation - дословно, подъем).

Мы создадим едва заметное неоновое свечение краев темных поверхностей. light-dark() принимает только значения , поэтому ей нельзя передать определения теней целиком.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.