Функция CSS light-dark()

Определение и использование

CSS light-dark() Функция light-dark() позволяет установить два значения цвета, если пользователь установил светлую тему, то возвращается первый цвет; если пользователь установил тёмную тему, то возвращается второй цвет.

Чтобы использовать light-dark() функция, CSS color-scheme Атрибут должен быть установлен в light dark.

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

Пример

Использование light-dark() Функция light-dark() устанавливает два значения цвета:

:root {
  color-scheme: light dark;
  --light-bg: snow;
  --light-color: black;
  --dark-bg: black;
  --dark-color: snow;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

Попробуйте сами

CSS синтаксис

light-dark(lightcolor, darkcolor)
Значение Описание
lightcolor Обязателен. Указывает цветовую стоимость для темы с светлым фоном.
darkcolor Обязателен. Указывает цветовую стоимость для темы с тёмным фоном.

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

Версия: CSS Color Module Level 5

Поддержка браузеров

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

Chrome Edge Firefox Сafari Опера
123 123 120 17.5 109

Связанные страницы

Справочник:Свойство color-scheme CSS

Справочник:Функция var() в CSS

Урок:Переменные CSS