Функция CSS `light-dark()`

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

Синтаксис

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

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

/* image url values */
light-dark(
  url("light-icon.png"),
  url("dark-icon.png")
);

/* linear-gradient values */
light-dark(
  linear-gradient(135deg, ghostwhite 20%, tomato),
  linear-gradient(45deg, darkslategray 20%, gold)
);

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

Значения

Функция light-dark() имеет две формы:

• Принимает два значения <color>:

  <color> (светлая тема)

  Значение color, используемое, когда color-scheme имеет значение light или предпочтение не задано.

  <color> (тёмная тема)

  Значение color, используемое, когда color-scheme имеет значение dark.

• Принимает два значения <image>:

  <image> (светлая тема)

  Значение <image>, используемое, когда color-scheme имеет значение light или предпочтение не задано.

  <image> (тёмная тема)

  Значение <image>, используемое, когда color-scheme имеет значение dark.

  none

  Ключевое слово none создаёт полностью прозрачное изображение без естественного размера.

Описание

Пользователи могут указать предпочтительную цветовую схему в настройках операционной системы (например, светлую или тёмную тему) или настройках пользовательского агента. Функция light-dark() позволяет передать либо два значения цвета, где допустимо любое значение <color>, либо два значения изображения, где допустимо любое значение <image>. Функция light-dark() возвращает первое значение, если используемая цветовая схема — 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);
}

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

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

<color> = 
  <color-base> |
  currentColor |
  <system-color> |
  <light-dark()> |
  <deprecated-system-color>

<color-base> = 
  <hex-color> |
  <color-function> |
  <named-color> |
  <color-mix()> |
  transparent

<system-color> = 
  AccentColor |
  AccentColorText |
  ActiveText |
  ButtonBorder |
  ButtonFace |
  ButtonText |
  Canvas |
  CanvasText |
  Field |
  FieldText |
  GrayText |
  Highlight |
  HighlightText |
  LinkText |
  Mark |
  MarkText |
  SelectedItem |
  SelectedItemText |
  VisitedText

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

<deprecated-system-color> = 
  ActiveBorder |
  ActiveCaption |
  AppWorkspace |
  Background |
  ButtonHighlight |
  ButtonShadow |
  CaptionText |
  InactiveBorder |
  InactiveCaption |
  InactiveCaptionText |
  InfoBackground |
  InfoText |
  Menu |
  MenuText |
  Scrollbar |
  ThreeDDarkShadow |
  ThreeDFace |
  ThreeDHighlight |
  ThreeDLightShadow |
  ThreeDShadow |
  Window |
  WindowFrame |
  WindowText

<color-function> = 
  <rgb()> |
  <rgba()> |
  <hsl()> |
  <hsla()> |
  <hwb()> |
  <lab()> |
  <lch()> |
  <oklab()> |
  <oklch()> |
  <color()>

<named-color> = 
  aliceblue |
  antiquewhite |
  aqua |
  aquamarine |
  azure |
  beige |
  bisque |
  black |
  blanchedalmond |
  blue |
  blueviolet |
  brown |
  burlywood |
  cadetblue |
  chartreuse |
  chocolate |
  coral |
  cornflowerblue |
  cornsilk |
  crimson |
  cyan |
  darkblue |
  darkcyan |
  darkgoldenrod |
  darkgray |
  darkgreen |
  darkgrey |
  darkkhaki |
  darkmagenta |
  darkolivegreen |
  darkorange |
  darkorchid |
  darkred |
  darksalmon |
  darkseagreen |
  darkslateblue |
  darkslategray |
  darkslategrey |
  darkturquoise |
  darkviolet |
  deeppink |
  deepskyblue |
  dimgray |
  dimgrey |
  dodgerblue |
  firebrick |
  floralwhite |
  forestgreen |
  fuchsia |
  gainsboro |
  ghostwhite |
  gold |
  goldenrod |
  gray |
  green |
  greenyellow |
  grey |
  honeydew |
  hotpink |
  indianred |
  indigo |
  ivory |
  khaki |
  lavender |
  lavenderblush |
  lawngreen |
  lemonchiffon |
  lightblue |
  lightcoral |
  lightcyan |
  lightgoldenrodyellow |
  lightgray |
  lightgreen |
  lightgrey |
  lightpink |
  lightsalmon |
  lightseagreen |
  lightskyblue |
  lightslategray |
  lightslategrey |
  lightsteelblue |
  lightyellow |
  lime |
  limegreen |
  linen |
  magenta |
  maroon |
  mediumaquamarine |
  mediumblue |
  mediumorchid |
  mediumpurple |
  mediumseagreen |
  mediumslateblue |
  mediumspringgreen |
  mediumturquoise |
  mediumvioletred |
  midnightblue |
  mintcream |
  mistyrose |
  moccasin |
  navajowhite |
  navy |
  oldlace |
  olive |
  olivedrab |
  orange |
  orangered |
  orchid |
  palegoldenrod |
  palegreen |
  paleturquoise |
  palevioletred |
  papayawhip |
  peachpuff |
  peru |
  pink |
  plum |
  powderblue |
  purple |
  rebeccapurple |
  red |
  rosybrown |
  royalblue |
  saddlebrown |
  salmon |
  sandybrown |
  seagreen |
  seashell |
  sienna |
  silver |
  skyblue |
  slateblue |
  slategray |
  slategrey |
  snow |
  springgreen |
  steelblue |
  tan |
  teal |
  thistle |
  tomato |
  turquoise |
  violet |
  wheat |
  white |
  whitesmoke |
  yellow |
  yellowgreen

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})

<rgb()> = 
  rgb( <percentage>#{3} , <alpha-value>? ) |
  rgb( <number>#{3} , <alpha-value>? ) |
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<rgba()> = 
  rgba( <percentage>#{3} , <alpha-value>? ) |
  rgba( <number>#{3} , <alpha-value>? ) |
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> = 
  hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hsla()> = 
  hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> = 
  lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<lch()> = 
  lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<oklab()> = 
  oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<oklch()> = 
  oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<alpha-value> = 
  <number> |
  <percentage>

<hue> = 
  <number> |
  <angle>

<colorspace-params> = 
  [<custom-params> | <predefined-rgb-params> | <xyz-params>]

<rectangular-color-space> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020 |
  lab |
  oklab |
  xyz |
  xyz-d50 |
  xyz-d65

<polar-color-space> = 
  hsl |
  hwb |
  lch |
  oklch

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

<custom-color-space> = 
  <dashed-ident>

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> = 
  <xyz> [ <number> | <percentage> | none ]{3}

<predefined-rgb> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020

<xyz> = 
  xyz |
  xyz-d50 |
  xyz-d65

Примеры

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

По умолчанию в поддерживающих браузерах цвет, возвращаемый цветовой функцией 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;
}

section {
  padding: 0.8rem;
}

Результат

Установка градиентного фона в зависимости от цветовой схемы

В этом примере используется тот же HTML-код, что и в предыдущем, но вместо <p> добавлен <div>.

<h1><code>light-dark()</code> CSS function with images</h1>
<p class="supports">
  Your browser does not support <code>light-dark()</code> with images.
</p>
<div class="wrapper">
  <section>
    <h2>Automatic</h2>
    <div></div>
  </section>
  <section class="light">
    <h2>Light</h2>
    <div></div>
  </section>
  <section class="dark">
    <h2>Dark</h2>
    <div></div>
  </section>
</div>

CSS

: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));
}
.wrapper {
  display: flex;
  justify-content: space-around;
  padding: 0.8rem;
}
.light {
  /* forces light color-scheme */
  color-scheme: light;
}
.dark {
  /* forces dark color-scheme */
  color-scheme: dark;
}
section {
  width: 25%;
  padding: 5px;
  color: light-dark(
    var(--light-code),
    var(--dark-code)
  );
  border: 2px solid light-dark(var(--light-code), var(--dark-code));
}
@supports (background-image: light-dark(url("light.png"), url("dark.png"))) {
  .supports {display:none;}
}

Сначала определим светлые и тёмные значения linear-gradient() в виде пользовательских свойств.

:root {
  /*  light dark gradients  */
  --light-grad: linear-gradient(135deg, var(--light-bg) 20%, var(--light-code));
  --dark-grad: linear-gradient(45deg, var(--dark-bg) 30%, var(--dark-code));
}

section div {
  width: 80%;
  aspect-ratio: 1/1;
  margin: auto;
  border: 1px solid light-dark(var(--light-code), var(--dark-code));
}
@supports not (
  background-image: light-dark(url("light.png"), url("dark.png"))
) {
  section div {
    width: 60%;
  }
}

Затем используем пользовательские свойства с light-dark(), чтобы задать свойство background-image в зависимости от активной цветовой схемы.

section div {
  background-image: light-dark(
    var(--light-grad),
    var(--dark-grad)
  );
}

Результат

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

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

См. также

• color-scheme
• color
• <image>
• Цвета CSS: модуль
• prefers-contrast — @media: медиавозможность
• contrast()
• WCAG: цветовой контраст
• Пользовательские свойства CSS и var()