Цвета, зависящие от цветовой схемы 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 , это означает, что элемент поддерживает темную цветовую схему.

Знакомимся со 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 установлена ​​на 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);
}

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