Skip to content

Added image form of light-dark() and examples, fixes #12513 #13651

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tabatkins merged 2 commits into from
Mar 15, 2026
+55 −2
Merged

Added image form of light-dark() and examples, fixes #12513 #13651

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8dc613
Added image form of light-dark() and examples, #12513
svgeesus Mar 13, 2026
b9eb65c
[css-color-5][editorial] Add wpt to silence bikeshed warning which pr…
svgeesus Mar 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 55 additions & 2 deletions css-color-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2764,15 +2764,67 @@ or any other color or monochrome output device which has been characterized.
System colors have the ability to react to the current used ''color-scheme'' value.
The ''light-dark()'' function exposes the same capability to authors.

There are two forms of this function: one takes a pair of colors
while the other takes a pair of images.

<pre class='prod'>
<dfn export>light-dark()</dfn> = light-dark( <<color>>, <<color>> )
<dfn export>light-dark()</dfn> = light-dark( [<<color>>, <<color>>] | [<<image>>, <<image>>])
</pre>

This function computes to the computed value of the first color,
For the color form, this function computes to the computed value of the first color,
if the <a>used color scheme</a> is ''light'' or unknown,
or to the computed value of the second color,
if the <a>used color scheme</a> is ''dark''.

For the image form, this function returns the first image,
if the <a>used color scheme</a> is ''light'' or unknown,
or the second image,
if the <a>used color scheme</a> is ''dark''.

<div class="example" id="ex-light-dark-color">
For example, to maintain a legible contrast on links,
for light mode and dark mode:

<pre class="lang-css">
a:link {
color: light-dark(blue, #81D9FE);
background-color: light-dark(white, black);
}
</pre>

The traditional <span class="swatch" style="--color: blue"></span> blue link text
is legible on a <span class="swatch" style="--color: #fff"></span> white background
(WCAG contrast 8.59:1, AAA pass)
but would not be legible on a <span class="swatch" style="--color: #000"></span> black background
(WCAG contrast 2.44:1, AA fail).
Instead, a lighter blue <span class="swatch" style="--color: #81D9FE"></span> #81D9FE
is used in dark mode.
(WCAG contrast 13.28:1, AAA pass).

<div style="margin:1em; margin-left: 2em; text-decoration: underline; background: inherit">
<p style="padding: 4px; background-color: white; color: blue"> Legible link text</p>
<p style="padding: 4px; background-color: black; color: blue"> Illegible link text</p>
<p style="padding: 4px; background-color: black; color: #81D9FE"> Legible link text</p>
</div>
</div>

<div class="example" id="ex-light-dark-image">
For example, to provide easily visible list bullets
for light mode and dark mode:

<pre class="lang-css">
ul.fancy {
list-style-image: light-dark(
url("icons/deep-maroon-ball.png"),
url("icons/pale-yellow-star.png")
Copy link
Copy Markdown
Contributor

@yisibl yisibl Mar 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So light-dark(<url>, <gradient>) is valid too, right?

);
}
</pre>

</div>



<wpt>
light-dark-basic.html
light-dark-currentcolor.html
Expand Down Expand Up @@ -2819,6 +2871,7 @@ or any other color or monochrome output device which has been characterized.
<wpt>
contrast-color-001.html
contrast-color-currentcolor-inherited.html
animation/contrast-color-interpolation.html
parsing/color-computed-contrast-color-function.html
parsing/color-invalid-contrast-color-function.html
parsing/color-valid-contrast-color-function.html
Expand Down