Новая CSS функция light-dark() для переключения цвета темы

Медиазапрос prefers-color-scheme позволяет выполнять действия, применяемые только при включении светлого или тёмного режима в системе пользователя. Например, можно изменить цвет фона страницы на чёрный, если в системе пользователя включён тёмный режим, следующим образом.

body {
  background-color: white;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
  }
}

Аналогичным образом можно изменить цвет текста в зависимости от системных предпочтений пользователя.

Новая CSS функция light-dark()

Теперь, чтобы сделать все это более удобным, в CSS появилась новая функция light-dark(), позволяющая указать два значения для свойства. Первое значение будет применяться, когда пользователь включит светлый режим в своей системе, а второе — когда пользователь включит тёмный режим в своей системе.

Вот как его можно использовать.

body {
  background-color: light-dark(#FFF, #000);
  color: light-dark(#333, #ccc);
}

Как видите, больше не нужно использовать медиазапрос prefers-color-scheme. Об этом позаботится функция light-dark(). Кроме того, она является более гибкой, поскольку можно задавать различные значения для разных свойств.

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

Примечание. CSS-свойство color-scheme позволяет элементу указать, в каких цветовых схемах ему удобно отображаться.

Это означает, что для работы функции light-dark() необходимо также включить объявление color-scheme.

:root {
  color-scheme: light dark;
}

:root {
  --text-color: light-dark(#333, #ccc);
  /* В режиме Light Mode = возвращается 1-е значение.
  В Dark Mode = возвращается 2-е значение. */
}

Свойство color-scheme можно также использовать для определённого элемента, чтобы оно применялось только к нему.

p {
  color-scheme: dark;
  background-color: light-dark(#FFF, #000);
}

Поддержка браузерами

Что касается поддержки браузерами, то в настоящее время функция light-dark() поддерживается в Firefox 120, но мы надеемся, что в скором времени она будет поддерживаться и в других браузерах.

Подробнее о функции light-dark() можно прочитать на странице спецификации.