From b8dc6134b469d0ef90ee61fcdb3f6f2de01f6321 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Fri, 13 Mar 2026 08:22:26 -0400 Subject: [PATCH 1/2] Added image form of light-dark() and examples, #12513 --- css-color-5/Overview.bs | 56 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 54 insertions(+), 2 deletions(-) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index a36cd7711c6d..648e5da040e3 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -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. + 
-		light-dark() = light-dark( <>, <> )
+		light-dark() =  light-dark( [<>, <>] | [<>, <>])
- 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 used color scheme is ''light'' or unknown, or to the computed value of the second color, if the used color scheme is ''dark''. + For the image form, this function returns the first image, + if the used color scheme is ''light'' or unknown, + or the second image, + if the used color scheme is ''dark''. + +
+ For example, to maintain a legible contrast on links, + for light mode and dark mode: + + 
+			a:link {
+			    color: light-dark(blue, #81D9FE);
+			    background-color: light-dark(white, black);
+		}
+
+ + The traditional blue link text + is legible on a white background + (WCAG contrast 8.59:1, AAA pass) + but would not be legible on a black background + (WCAG contrast 2.44:1, AA fail). + Instead, a lighter blue #81D9FE + is used in dark mode. + (WCAG contrast 13.28:1, AAA pass). + +
+

Legible link text

+

Illegible link text

+

Legible link text

+
+
+ +
+ For example, to provide easily visible list bullets + for light mode and dark mode: + + 
+			ul.fancy {
+			    list-style-image: light-dark(
+					url("icons/deep-maroon-ball.png"),
+					url("icons/pale-yellow-star.png")
+				);
+			}
+
+ +
+ + + light-dark-basic.html light-dark-currentcolor.html From b9eb65c3e8623850b8346eb7fe841956f02c27bd Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Fri, 13 Mar 2026 08:32:22 -0400 Subject: [PATCH 2/2] [css-color-5][editorial] Add wpt to silence bikeshed warning which prevents publication --- css-color-5/Overview.bs | 1 + 1 file changed, 1 insertion(+) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index 648e5da040e3..8af44497a191 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -2871,6 +2871,7 @@ or any other color or monochrome output device which has been characterized. 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