light-dark()

Baseline 2024

Новое доступно

С мая 2024 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

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

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

:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}

Синтаксис

/* Named color values */
color: light-dark(black, white);

/* RGB color values */
color: light-dark(rgb(0 0 0), rgb(255 255 255));

/* Custom properties */
color: light-dark(var(--light), var(--dark));

Значения

Функциональная запись: light-dark(light-color, dark-color)

light-color: <color> значение, которое нужно установить для светлой color-scheme.
dark-color: <color> значение, которое нужно установить для тёмной color-scheme.

Формальный синтаксис

<light-dark()> = 
  light-dark( <color> , <color> )

Пример

Установка цветов на основе цветовой схемы

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

HTML

Мы включаем три раздела для определения светлых цветов, тёмных цветов и цветов, выбранных на основе цветовой схемы пользователя.

<h1><code>light-dark()</code> CSS function</h1>
<section>
  <h2>Automatic</h2>
  <p>This section will react to the users system or user agent setting.</p>
</section>
<section class="light">
  <h2>Light</h2>
  <p>
    This section will be light due to the <code>color-scheme: light;</code>.
  </p>
</section>
<section class="dark">
  <h2>Dark</h2>
  <p>This section will be dark due to the <code>color-scheme: dark;</code>.</p>
</section>

CSS

Мы включаем цвета для светлой и тёмной тем. Также определяем color-scheme для документа в :root для включения функции light-dark() цвета для всего документа.

:root {
  /* this has to be set to switch between light or dark */
  color-scheme: light dark;

  --light-bg: ghostwhite;
  --light-color: darkslategray;
  --light-code: tomato;

  --dark-bg: darkslategray;
  --dark-color: ghostwhite;
  --dark-code: gold;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}
code {
  color: light-dark(var(--light-code), var(--dark-code));
}

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

Примечание: Обычно этого делать не нужно, мы используем его здесь для демонстрационных целей. Если пользователь выбрал предпочтение, то обычно не стоит переопределять его предпочтения.

.light {
  /* forces light color-scheme */
  color-scheme: light;
}
.dark {
  /* forces dark color-scheme */
  color-scheme: dark;
}

Результат

Спецификации

Спецификация
CSS Цвет Модуль Уровня 5 # light-dark

Совместимость браузеров

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`light-dark`	123	123	120	109	17.5	123	120	82	17.5	27.0	123

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark