light-dark()
Выбирает один из двух цветов в зависимости от текущей цветовой схемы.
Синтаксис
light-dark(light-color, dark-color)Параметры
| Параметр | Тип | Описание |
|---|---|---|
| light-color | color | Цвет для светлой схемы. |
| dark-color | color | Цвет для тёмной схемы. |
Примеры
Одно объявление для обеих тем:
<style>
.card { color-scheme: light dark; padding: 12px;
background: light-dark(white, #222); color: light-dark(#222, white); border: 1px solid gray; }
</style>
<div class="card">Switch the system theme — this card follows it.</div>
<div class="card" style="color-scheme: dark;">This card is forced dark.</div>Примечания
light-dark() работает только там, где color-scheme разрешает обе схемы. Он избавляет от отдельного блока @media (prefers-color-scheme: dark) для каждого цвета. Поддерживается всеми актуальными браузерами с 2024 года.
См. также
- color-scheme — Сообщает браузеру, какие цветовые схемы поддерживает страница, чтобы встроенные элементы и полосы прокрутки им соответствовали.
- @media — Применяет правила только при заданных условиях — ширине окна, теме системы и других.
- var() — Подставляет значение пользовательского свойства (переменной CSS).
Вопросы и ответы по теме
В учебнике
- Тёмная тема — Как сделать тёмную тему сайта — свойство color-scheme, медиазапрос prefers-color-scheme, цвета в переменных, функция light-dark() и переключатель темы.