RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark below:

light-dark() - CSS | MDN

/* 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));

Values

Functional notation: light-dark(light-color, dark-color)

light-color: <color> value to be set for light color-scheme.
dark-color: <color> value to be set for dark color-scheme.

Formal syntax

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

Example Setting colors based on color scheme

By default, in supporting browsers, the color returned by the light-dark() color function depends on the user preference set through an operating system's settings (e.g., light or dark mode) or from a user agent setting. You can also change this setting in the browser's developer tools.

HTML

We include three sections to enable targeting light colors, dark colors, and the colors selected based on the user's preferred color scheme.

<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

We include colors for both light and dark themes. We also define color-scheme for the document on the :root to enable the light-dark() color function for the entire document.

: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));
}

In addition to enabling the light-dark() function, the color-scheme property enables overriding a user's color scheme for document sections. Forcing a page section to only use a light or dark color scheme can be done by setting the color-scheme property to light or dark.

Note: Generally this should not be done, we are using it here for demonstration purposes. If the user has made a preference, you generally should not override their preferences.

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

section {
  padding: 0.8rem;
}

Result Specifications Browser compatibility

Loadingâ¦