Цвета, зависящие от цветовой схемы CSS, с функцией light-dark()

Системные цвета могут реагировать на текущее значение color-scheme. Функция light-dark() предоставляет авторам те же возможности.

Bramus

Системные цвета в CSS

В CSS можно использовать множество цветов из одного из множества цветовых пространств. Например, можно использовать названия цветов, шестнадцатеричные коды цветов, функции цвета, связанные с определенным цветовым пространством, и более общую функцию color().

Например, цвет cornflowerblue можно также обозначить как #6495ED, hsl(218.54deg 79.19% 66.08%) или color(display-p3 0.43 0.58 0.9).

Помимо этих различных названий и форматов, CSS включает цвета, описанные как системные цвета, указанные в CSS Color Module Level 4. Эти системные цвета определяются браузером и представлены ключевым словом.

Например, системный цвет Canvas (не путайте с элементом <canvas>) представляет собой фон контента или документов приложения. Оно хорошо сочетается с CanvasText, которое представляет "текст в контенте приложения или документах", и должно использоваться вместе с ним.

В CSS они используются следующим образом:

body {
  color: CanvasText;
  background-color: Canvas;
}

По умолчанию CanvasText – это цвет, близкий к black, а Canvas – цвет, близкий к white. Реализация зависит от браузера. Например, CanvasText в Chrome дает #121212, а в Safari – немного более светлый #1e1e1e.

Скрытая сила этих системных цветов заключается в том, что они могут реагировать на вычисленное значение свойства color-scheme. Например, значения CanvasText и Canvas меняются местами, если для color-scheme используется dark.

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

В демонстрации ниже вы можете изменить значение color-scheme, заданное для :root, и посмотреть, как изменится страница.

  • Если задано значение light dark, это означает, что элемент поддерживает как светлую, так и тёмную тему. Выбор значения зависит от медиаусловия prefers-color-scheme.
  • Значение light указывает, что элемент поддерживает светлую цветовую схему.
  • Если задано значение dark, это означает, что элемент поддерживает темную цветовую схему.
Страница, на которой можно изменить значение для color-scheme. При переключении между светлой и темной темами цвета страницы меняются, хотя объявления в элементе body остаются прежними.

Представляем light-dark()

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

До сих пор реагировать на используемое значение color-scheme могли только системные цвета. Благодаря light-dark(), указанному в CSS Color Module Level 5, теперь у вас есть такая же возможность.

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

  • Если используется цветовая схема light или неизвестная, возвращается вычисленное значение первого значения.
  • Если используется цветовая схема dark, возвращается вычисленное значение второго цвета.

Результат функции light-dark() – <color>. Его можно использовать в ССЦ везде, где принимается <color>. Например, в свойствах color и background-color, а также в функции linear-gradient().

В примере ниже используется цвет фона #333 в тёмной теме и #ccc в светлой теме (или неизвестной теме).

:root {
  color-scheme: light dark;
}

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

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

Практическое применение

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

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}
Страница, которая реагирует на светлую или тёмную тему через prefers-color-scheme.
Значения цвета изменяются в CSS с помощью запроса медиа.

Благодаря light-dark() этот код можно упростить. Поскольку для color-scheme задано значение light dark в :root, значения этих цветов автоматически меняются при переключении ОС со светлого режима на темную тему и наоборот.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}
Страница, которая реагирует на светлую или тёмную тему с помощью prefers-color-scheme.
Значения цвета изменяются с помощью light-dark().

Кроме того, можно принудительно задать для определенного поддерева DOM только светлую или темную тему, установив для свойства color-scheme значение dark или light. В примере ниже это применяется к :root.

Страница, которая реагирует на светлую или тёмную тему с помощью prefers-color-scheme.
Значения цвета изменяются с помощью light-dark().
Используя один из вариантов, вы можете принудительно включить светлую или тёмную тему. Это достигается за счет изменения значения color-scheme.