Системные цвета имеют возможность реагировать на текущее используемое значение color-scheme
. Функция light-dark()
предоставляет авторам те же возможности.
Системные цвета в 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
, это означает, что элемент поддерживает темную цветовую схему.
Представляем light-dark()
До сих пор реакция на используемое значение color-scheme
была зарезервирована для системных цветов. Благодаря функции light-dark()
, указанной в CSS Color Module Level 5 , у вас теперь есть такая же возможность.
light-dark()
— это функция, которая принимает два аргумента, оба из которых должны быть <color>
. Один из обоих выбирается в зависимости от используемой цветовой гаммы.
- Если используемая цветовая схема
light
или неизвестна, возвращается вычисленное значение первого значения. - Если используемая цветовая схема
dark
, возвращается вычисленное значение второго цвета.
Результатом light-dark()
является <color>
. Его можно использовать в CSS везде, где допускается <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;
}
}
Благодаря light-dark()
этот код можно упростить. Поскольку для color-scheme
:root
задано значение light dark
, значения этих цветов автоматически изменяются при переходе вашей ОС из светлого режима в темный и наоборот.
:root {
color-scheme: light dark;
--primary-color: light-dark(#333, #fafafa);
--primary-background: light-dark(#e4e4e4, #121212);
--highlight-color: light-dark(hotpink, lime);
}
В качестве дополнительного бонуса можно заставить определенное поддерево DOM использовать только светлый или темный режим, установив для color-scheme
значение dark
или light
. В следующем примере это применяется к :root
.