light-dark()

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

        
          
          div {  color: light-dark(black, white);  background-color: light-dark(white, black);}
          div {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если пользователь выбрал светлый режим, у элемента будет чёрный текст на белом фоне, если тёмный — белый текст на чёрном фоне.

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

Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значение.

Внутри круглых скобок через запятую указываются два цвета. Цвет может быть задан в любом доступном формате. Обратите внимание: можно передать только два аргумента. При большем или меньшем количестве аргументов, а также при невалидных аргументах, свойство не применится.

Чтобы увидеть, как меняются цвета в этом демо, можно эмулировать переключение режима через консоль разработчика, например, в Chrome DevTools:

1. Откройте консоль разработчика (F12).
2. Во вкладке «Элементы» (Elements) откройте другую вкладку «Стили» (Styles).
3. Нажмите кнопку «Включить или отключить распространённые эмуляции отрисовки» (Toggle common rendering emulations).
4. Выберите нужный вам пункт — light или dark.

Как включить в настройках операционной системы

• Windows: Параметры → Персонализация → Цвета → Выбор цвета.
• MacOS: Системные настройки → Оформление → Выбор оформления.
• Linux: Настройки → Внешний вид → Темы. Для некоторых дистрибутивов может потребоваться установить дополнительное приложение, которое позволит настроить рабочее окружение.

На данный момент функция light-dark() поддерживается в последних версиях браузеров. Если нужна поддержка старыми версиями, проверяйте её на Can I Use.