29786 ship light dark

files/en-us/mozilla/firefox/releases/120/index.md

@@ -20,6 +20,7 @@ This article provides information about the changes in Firefox 120 that affect d
 
 ### CSS
 
+- The {{CSSXref("color_value/light-dark", "light-dark()")}} CSS Color function is now supported. This allows the setting of a colors for both light & dark without the need for `prefers-color-scheme` media feature ([Firefox bug 1856999](https://bugzil.la/1856999)).
 - The [`lh` and `rlh`](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#line_height_units) line height units are now supported. These allow setting properties relative to the line height of an element, for example, precisely aligning background decoration with multiline text ([Firefox bug 1310170](https://bugzil.la/1310170)).
 
 #### Removals

files/en-us/web/css/color-scheme/index.md

@@ -77,6 +77,7 @@ To opt the entire page into the user's color scheme preferences declare `color-s
 ## See also
 
 - [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query to detect user preferences for color schemes.
+- {{CSSXref("color_value/light-dark", "light-dark()")}} color function to set colors for both light and dark color schemes.
 - [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color)
 - Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
 - {{cssxref("background-image")}}

files/en-us/web/css/color_value/index.md

@@ -50,6 +50,10 @@ oklab(59% 0.1 0.1 / 0.5)
 /* Oklch (Lightness, Chroma, Hue) */
 oklch(60% 0.15 50)
 oklch(60% 0.15 50 / 0.5)
+
+/* light-dark */
+light-dark(white, black)
+light-dark(rgb(255 255 255), rgb(0 0 0))
 ```
 
 A `<color>` value can be specified using one of the methods listed below:
@@ -62,6 +66,7 @@ A `<color>` value can be specified using one of the methods listed below:
   - [Oklab](https://bottosson.github.io/posts/oklab/) color space: {{CSSXref("color_value/oklab", "oklab()")}}, {{CSSXref("color_value/oklch", "oklch()")}};
   - Other color spaces: {{CSSXref("color_value/color", "color()")}}.
 - By mixing two colors: {{CSSXref("color_value/color-mix", "color-mix()")}}.
+- By specifying two colors, the first used for light color-schemes and the second used for dark color-schemes: {{CSSXref("color_value/light-dark", "light-dark()")}}.
 
 ### currentcolor keyword
 

files/en-us/web/css/color_value/light-dark/index.md

@@ -0,0 +1,144 @@
+---
+title: light-dark()
+slug: Web/CSS/color_value/light-dark
+page-type: css-function
+browser-compat: css.types.color.light-dark
+---
+
+{{CSSRef}}
+
+The **`light-dark()`** [CSS](/en-US/docs/Web/CSS) [`<color>` function](/en-US/docs/Web/CSS/CSS_Functions#color_functions) enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the a user has requested light or dark color theme - without needing to encase the theme colors withing a [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) [media feature](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#targeting_media_features) query.
+Users are able to indicate their color-scheme preference through their operating system settings (e.g. light or dark mode) or their user agent settings. The `light-dark()` function enables providing two color values where any `<color>` value is accepted. The `light-dark()` CSS color function returns the first value if the user's preference is set to `light` or if no preference is set and the second value if the user's preference is set to `dark`.
+
+To enable support for the `light-dark()` color function, the {{CSSXref("color-scheme")}} must have a value of `light dark`, usually set on the {{CSSXref(":root")}} [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes).
+
+```css
+:root {
+  color-scheme: light dark;
+}
+body {
+  color: light-dark(#333b3c, #efefec);
+  background-color: light-dark(#efedea, #223a2c);
+}
+```
+
+## Syntax
+
+```css
+/* 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`
+
+  - : {{CSSXref("&lt;color&gt;")}} value to be set for light {{CSSXref("color-scheme")}}.
+
+- `dark-color`
+  - : {{CSSXref("&lt;color&gt;")}} value to be set for dark {{CSSXref("color-scheme")}}.
+
+### Formal syntax
+
+{{csssyntax}}
+
+## 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 {{glossary("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.
+
+```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 light 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.
+
+```css-nolint
+: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 demonstation purposes. If the user has made a preference, you generally should not override their preferences.
+
+```css
+.light {
+  /* forces light color-scheme */
+  color-scheme: light;
+}
+.dark {
+  /* forces dark color-scheme */
+  color-scheme: dark;
+}
+```
+
+```css hidden
+section {
+  padding: 0.8rem;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("setting_colors_based_on_color_scheme", "100%", 500)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{CSSXref("color-scheme")}}
+- {{CSSXref("&lt;color&gt;")}}
+- [CSS color](/en-US/docs/Web/CSS/CSS_colors) module

files/en-us/web/css/css_colors/index.md

@@ -51,6 +51,7 @@ To see the code for this color syntax converter, [view the source on GitHub](htt
 - [`color-contrast()`](/en-US/docs/Web/CSS/color_value/color-contrast) {{Experimental_Inline}}
 - [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix)
 - [`device-cmyk()`](/en-US/docs/Web/CSS/color_value/device-cmyk) {{Experimental_Inline}}
+- {{CSSXref("color_value/light-dark", "light-dark()")}} {{Experimental_Inline}}
 
 ### Data types
 

files/en-us/web/css/css_functions/index.md

@@ -203,6 +203,8 @@ The {{CSSxRef("color_value","<color>")}} CSS [data type](/en-US/docs/Web/C
   - : Selects the highest color contrast from a list of colors, compare to a base color value.
 - {{CSSxRef("color_value/device-cmyk", "device-cmyk()")}} {{Experimental_Inline}}
   - : Defines CMYK colors in a device-independent way.
+- {{CSSXref("color_value/light-dark", "light-dark()")}} {{Experimental_Inline}}
+  - : Returns one of two provided colors based on the current color scheme.
 
 ## Image functions