Цвета, зависящие от цветовой схемы 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 :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 .