diff --git a/tests/github/WICG/app-history/spec.html b/tests/github/WICG/app-history/spec.html
index 6d2acb31de..24faa33944 100644
--- a/tests/github/WICG/app-history/spec.html
+++ b/tests/github/WICG/app-history/spec.html
@@ -761,15 +761,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/background-fetch/index.html b/tests/github/WICG/background-fetch/index.html
index bf61e80270..7426325a87 100644
--- a/tests/github/WICG/background-fetch/index.html
+++ b/tests/github/WICG/background-fetch/index.html
@@ -980,15 +980,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/background-sync/spec/PeriodicBackgroundSync-index.html b/tests/github/WICG/background-sync/spec/PeriodicBackgroundSync-index.html
index 884396ab6d..f6a8b1d0e4 100644
--- a/tests/github/WICG/background-sync/spec/PeriodicBackgroundSync-index.html
+++ b/tests/github/WICG/background-sync/spec/PeriodicBackgroundSync-index.html
@@ -923,15 +923,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/contact-api/spec/index.html b/tests/github/WICG/contact-api/spec/index.html
index a4e809587d..99ce1228fe 100644
--- a/tests/github/WICG/contact-api/spec/index.html
+++ b/tests/github/WICG/contact-api/spec/index.html
@@ -699,15 +699,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/content-index/spec/index.html b/tests/github/WICG/content-index/spec/index.html
index d4851fc5d8..71f1d4e6ad 100644
--- a/tests/github/WICG/content-index/spec/index.html
+++ b/tests/github/WICG/content-index/spec/index.html
@@ -941,15 +941,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/conversion-measurement-api/index.html b/tests/github/WICG/conversion-measurement-api/index.html
index 07bdf6689a..4792916945 100644
--- a/tests/github/WICG/conversion-measurement-api/index.html
+++ b/tests/github/WICG/conversion-measurement-api/index.html
@@ -699,15 +699,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/cookie-store/index.html b/tests/github/WICG/cookie-store/index.html
index b704ef40f3..96121dc2b0 100644
--- a/tests/github/WICG/cookie-store/index.html
+++ b/tests/github/WICG/cookie-store/index.html
@@ -718,15 +718,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/document-policy/index.html b/tests/github/WICG/document-policy/index.html
index 522fed2fd8..ba49f5f1b2 100644
--- a/tests/github/WICG/document-policy/index.html
+++ b/tests/github/WICG/document-policy/index.html
@@ -573,15 +573,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/element-timing/index.html b/tests/github/WICG/element-timing/index.html
index 88f5e3309b..730c851d98 100644
--- a/tests/github/WICG/element-timing/index.html
+++ b/tests/github/WICG/element-timing/index.html
@@ -923,15 +923,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/entries-api/index.html b/tests/github/WICG/entries-api/index.html
index 97c870bf36..ed141c9aff 100644
--- a/tests/github/WICG/entries-api/index.html
+++ b/tests/github/WICG/entries-api/index.html
@@ -924,15 +924,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/event-timing/index.html b/tests/github/WICG/event-timing/index.html
index 9d0debd734..9465e3e01d 100644
--- a/tests/github/WICG/event-timing/index.html
+++ b/tests/github/WICG/event-timing/index.html
@@ -923,15 +923,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/file-system-access/index.html b/tests/github/WICG/file-system-access/index.html
index c85eadc0d2..9f02d0a119 100644
--- a/tests/github/WICG/file-system-access/index.html
+++ b/tests/github/WICG/file-system-access/index.html
@@ -942,15 +942,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/get-installed-related-apps/spec/index.html b/tests/github/WICG/get-installed-related-apps/spec/index.html
index 8a9cb2e274..931e821a56 100644
--- a/tests/github/WICG/get-installed-related-apps/spec/index.html
+++ b/tests/github/WICG/get-installed-related-apps/spec/index.html
@@ -699,15 +699,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/idle-detection/index.html b/tests/github/WICG/idle-detection/index.html
index d9270d010b..c94712ec30 100644
--- a/tests/github/WICG/idle-detection/index.html
+++ b/tests/github/WICG/idle-detection/index.html
@@ -936,15 +936,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/keyboard-lock/index.html b/tests/github/WICG/keyboard-lock/index.html
index 8b735a3ecd..01cd4ad987 100644
--- a/tests/github/WICG/keyboard-lock/index.html
+++ b/tests/github/WICG/keyboard-lock/index.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/keyboard-map/index.html b/tests/github/WICG/keyboard-map/index.html
index 6ed3479949..b4cc3b33ff 100644
--- a/tests/github/WICG/keyboard-map/index.html
+++ b/tests/github/WICG/keyboard-map/index.html
@@ -923,15 +923,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/kv-storage/spec.html b/tests/github/WICG/kv-storage/spec.html
index 888d688aa9..a4eb8cf31a 100644
--- a/tests/github/WICG/kv-storage/spec.html
+++ b/tests/github/WICG/kv-storage/spec.html
@@ -744,15 +744,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/largest-contentful-paint/index.html b/tests/github/WICG/largest-contentful-paint/index.html
index e9304f03d5..46060fef0e 100644
--- a/tests/github/WICG/largest-contentful-paint/index.html
+++ b/tests/github/WICG/largest-contentful-paint/index.html
@@ -923,15 +923,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/layout-instability/index.html b/tests/github/WICG/layout-instability/index.html
index 60fc14956e..5c9b66e364 100644
--- a/tests/github/WICG/layout-instability/index.html
+++ b/tests/github/WICG/layout-instability/index.html
@@ -923,15 +923,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/local-font-access/index.html b/tests/github/WICG/local-font-access/index.html
index 34f9812939..69ad0dbc4d 100644
--- a/tests/github/WICG/local-font-access/index.html
+++ b/tests/github/WICG/local-font-access/index.html
@@ -721,15 +721,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/page-lifecycle/spec.html b/tests/github/WICG/page-lifecycle/spec.html
index b7af7e66b7..a1e1ee1c49 100644
--- a/tests/github/WICG/page-lifecycle/spec.html
+++ b/tests/github/WICG/page-lifecycle/spec.html
@@ -699,15 +699,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/periodic-background-sync/index.html b/tests/github/WICG/periodic-background-sync/index.html
index a310831df8..f48dbf4ee6 100644
--- a/tests/github/WICG/periodic-background-sync/index.html
+++ b/tests/github/WICG/periodic-background-sync/index.html
@@ -923,15 +923,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/portals/index.html b/tests/github/WICG/portals/index.html
index 72186bd723..429cd9e8f4 100644
--- a/tests/github/WICG/portals/index.html
+++ b/tests/github/WICG/portals/index.html
@@ -923,15 +923,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/scroll-to-text-fragment/index.html b/tests/github/WICG/scroll-to-text-fragment/index.html
index a966a707b6..04ed372f71 100644
--- a/tests/github/WICG/scroll-to-text-fragment/index.html
+++ b/tests/github/WICG/scroll-to-text-fragment/index.html
@@ -699,15 +699,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/video-rvfc/index.html b/tests/github/WICG/video-rvfc/index.html
index e331ab53f6..b4a48f2c4b 100644
--- a/tests/github/WICG/video-rvfc/index.html
+++ b/tests/github/WICG/video-rvfc/index.html
@@ -699,15 +699,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/web-locks/index.html b/tests/github/WICG/web-locks/index.html
index ecd5154d50..690d83d422 100644
--- a/tests/github/WICG/web-locks/index.html
+++ b/tests/github/WICG/web-locks/index.html
@@ -942,15 +942,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WICG/webpackage/loading.html b/tests/github/WICG/webpackage/loading.html
index 9d27ed6ffe..a6a750dec1 100644
--- a/tests/github/WICG/webpackage/loading.html
+++ b/tests/github/WICG/webpackage/loading.html
@@ -694,15 +694,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WebAudio/web-audio-api/index.html b/tests/github/WebAudio/web-audio-api/index.html
index 56c4402254..765f82ba65 100644
--- a/tests/github/WebAudio/web-audio-api/index.html
+++ b/tests/github/WebAudio/web-audio-api/index.html
@@ -1099,15 +1099,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WebBluetoothCG/web-bluetooth/index.html b/tests/github/WebBluetoothCG/web-bluetooth/index.html
index 6e1c761a84..09c0978d7c 100644
--- a/tests/github/WebBluetoothCG/web-bluetooth/index.html
+++ b/tests/github/WebBluetoothCG/web-bluetooth/index.html
@@ -973,15 +973,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/WebBluetoothCG/web-bluetooth/scanning.html b/tests/github/WebBluetoothCG/web-bluetooth/scanning.html
index 3151384604..a7b1e1493d 100644
--- a/tests/github/WebBluetoothCG/web-bluetooth/scanning.html
+++ b/tests/github/WebBluetoothCG/web-bluetooth/scanning.html
@@ -706,15 +706,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/heycam/webidl/index.html b/tests/github/heycam/webidl/index.html
index e94c7c3a22..8aa9c00663 100644
--- a/tests/github/heycam/webidl/index.html
+++ b/tests/github/heycam/webidl/index.html
@@ -848,15 +848,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/immersive-web/anchors/index.html b/tests/github/immersive-web/anchors/index.html
index 6785805741..50271e5d22 100644
--- a/tests/github/immersive-web/anchors/index.html
+++ b/tests/github/immersive-web/anchors/index.html
@@ -753,15 +753,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/immersive-web/depth-sensing/index.html b/tests/github/immersive-web/depth-sensing/index.html
index e6b7ce59a9..6cba6ee9a5 100644
--- a/tests/github/immersive-web/depth-sensing/index.html
+++ b/tests/github/immersive-web/depth-sensing/index.html
@@ -753,15 +753,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/immersive-web/hit-test/index.html b/tests/github/immersive-web/hit-test/index.html
index 4f7f975283..0bd128b20b 100644
--- a/tests/github/immersive-web/hit-test/index.html
+++ b/tests/github/immersive-web/hit-test/index.html
@@ -979,15 +979,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/immersive-web/layers/webxrlayers-1.html b/tests/github/immersive-web/layers/webxrlayers-1.html
index e0a08e46b7..6876de833b 100644
--- a/tests/github/immersive-web/layers/webxrlayers-1.html
+++ b/tests/github/immersive-web/layers/webxrlayers-1.html
@@ -757,15 +757,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/immersive-web/lighting-estimation/index.html b/tests/github/immersive-web/lighting-estimation/index.html
index 4fffd2646c..ae2fa228b0 100644
--- a/tests/github/immersive-web/lighting-estimation/index.html
+++ b/tests/github/immersive-web/lighting-estimation/index.html
@@ -756,15 +756,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/immersive-web/real-world-geometry/plane-detection.html b/tests/github/immersive-web/real-world-geometry/plane-detection.html
index d50e70c0a8..103e37311c 100644
--- a/tests/github/immersive-web/real-world-geometry/plane-detection.html
+++ b/tests/github/immersive-web/real-world-geometry/plane-detection.html
@@ -753,15 +753,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/immersive-web/webxr-hand-input/index.html b/tests/github/immersive-web/webxr-hand-input/index.html
index b1a588b25b..ea8f70a38b 100644
--- a/tests/github/immersive-web/webxr-hand-input/index.html
+++ b/tests/github/immersive-web/webxr-hand-input/index.html
@@ -981,15 +981,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/immersive-web/webxr-test-api/index.html b/tests/github/immersive-web/webxr-test-api/index.html
index 347e1ad391..dfcb25ad6c 100644
--- a/tests/github/immersive-web/webxr-test-api/index.html
+++ b/tests/github/immersive-web/webxr-test-api/index.html
@@ -757,15 +757,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/immersive-web/webxr/index.html b/tests/github/immersive-web/webxr/index.html
index 9bd5d04d66..eeaad2c9cd 100644
--- a/tests/github/immersive-web/webxr/index.html
+++ b/tests/github/immersive-web/webxr/index.html
@@ -986,15 +986,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/privacycg/private-click-measurement/private-click-measurement.html b/tests/github/privacycg/private-click-measurement/private-click-measurement.html
index f0d400c948..797920e455 100644
--- a/tests/github/privacycg/private-click-measurement/private-click-measurement.html
+++ b/tests/github/privacycg/private-click-measurement/private-click-measurement.html
@@ -699,15 +699,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/FileAPI/index.html b/tests/github/w3c/FileAPI/index.html
index b57e17e9d1..fb0e0a85ef 100644
--- a/tests/github/w3c/FileAPI/index.html
+++ b/tests/github/w3c/FileAPI/index.html
@@ -922,15 +922,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/IndexedDB/index.html b/tests/github/w3c/IndexedDB/index.html
index ce821d9213..6b7c3b2d09 100644
--- a/tests/github/w3c/IndexedDB/index.html
+++ b/tests/github/w3c/IndexedDB/index.html
@@ -964,15 +964,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/ServiceWorker/docs/index.html b/tests/github/w3c/ServiceWorker/docs/index.html
index bd6f53d227..186816f00f 100644
--- a/tests/github/w3c/ServiceWorker/docs/index.html
+++ b/tests/github/w3c/ServiceWorker/docs/index.html
@@ -925,15 +925,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/ServiceWorker/docs/v1/index.html b/tests/github/w3c/ServiceWorker/docs/v1/index.html
index 70c06cd3ea..025ed3c6e3 100644
--- a/tests/github/w3c/ServiceWorker/docs/v1/index.html
+++ b/tests/github/w3c/ServiceWorker/docs/v1/index.html
@@ -925,15 +925,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/ServiceWorker/publish/service_worker/WD-service-workers-20160830/index.html b/tests/github/w3c/ServiceWorker/publish/service_worker/WD-service-workers-20160830/index.html
index a4fc0b92ef..e453e4bc65 100644
--- a/tests/github/w3c/ServiceWorker/publish/service_worker/WD-service-workers-20160830/index.html
+++ b/tests/github/w3c/ServiceWorker/publish/service_worker/WD-service-workers-20160830/index.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/ServiceWorker/publish/service_worker_1/WD-service-workers-1-20161011/index.html b/tests/github/w3c/ServiceWorker/publish/service_worker_1/WD-service-workers-1-20161011/index.html
index dd03b66160..fe95df292a 100644
--- a/tests/github/w3c/ServiceWorker/publish/service_worker_1/WD-service-workers-1-20161011/index.html
+++ b/tests/github/w3c/ServiceWorker/publish/service_worker_1/WD-service-workers-1-20161011/index.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/accelerometer/index.html b/tests/github/w3c/accelerometer/index.html
index cb9d2c6b40..a0ca42500c 100644
--- a/tests/github/w3c/accelerometer/index.html
+++ b/tests/github/w3c/accelerometer/index.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/ambient-light/index.html b/tests/github/w3c/ambient-light/index.html
index ee978cde53..3f67ece016 100644
--- a/tests/github/w3c/ambient-light/index.html
+++ b/tests/github/w3c/ambient-light/index.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/clipboard-apis/index.html b/tests/github/w3c/clipboard-apis/index.html
index b89beebfa6..04562b08a2 100644
--- a/tests/github/w3c/clipboard-apis/index.html
+++ b/tests/github/w3c/clipboard-apis/index.html
@@ -925,15 +925,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/css-houdini-drafts/css-animation-worklet-1/Overview.html b/tests/github/w3c/css-houdini-drafts/css-animation-worklet-1/Overview.html
index 89b5e0b00e..4f6d584174 100644
--- a/tests/github/w3c/css-houdini-drafts/css-animation-worklet-1/Overview.html
+++ b/tests/github/w3c/css-houdini-drafts/css-animation-worklet-1/Overview.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/css-houdini-drafts/css-layout-api/Overview.html b/tests/github/w3c/css-houdini-drafts/css-layout-api/Overview.html
index 9deb9c66c3..c1c293fed1 100644
--- a/tests/github/w3c/css-houdini-drafts/css-layout-api/Overview.html
+++ b/tests/github/w3c/css-houdini-drafts/css-layout-api/Overview.html
@@ -715,15 +715,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/css-houdini-drafts/css-paint-api/Overview.html b/tests/github/w3c/css-houdini-drafts/css-paint-api/Overview.html
index 5498153e09..893c2acaf7 100644
--- a/tests/github/w3c/css-houdini-drafts/css-paint-api/Overview.html
+++ b/tests/github/w3c/css-houdini-drafts/css-paint-api/Overview.html
@@ -939,15 +939,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/css-houdini-drafts/css-properties-values-api/Overview.html b/tests/github/w3c/css-houdini-drafts/css-properties-values-api/Overview.html
index 19401ea61a..d16d10886f 100644
--- a/tests/github/w3c/css-houdini-drafts/css-properties-values-api/Overview.html
+++ b/tests/github/w3c/css-houdini-drafts/css-properties-values-api/Overview.html
@@ -925,15 +925,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/css-houdini-drafts/css-typed-om/Overview.html b/tests/github/w3c/css-houdini-drafts/css-typed-om/Overview.html
index b4854414f5..4fcb78978e 100644
--- a/tests/github/w3c/css-houdini-drafts/css-typed-om/Overview.html
+++ b/tests/github/w3c/css-houdini-drafts/css-typed-om/Overview.html
@@ -942,15 +942,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/csswg-drafts/css-conditional-3/Overview.html b/tests/github/w3c/csswg-drafts/css-conditional-3/Overview.html
index 9e939ca932..4cc1532f3b 100644
--- a/tests/github/w3c/csswg-drafts/css-conditional-3/Overview.html
+++ b/tests/github/w3c/csswg-drafts/css-conditional-3/Overview.html
@@ -926,15 +926,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/fxtf-drafts/geometry/Overview.html b/tests/github/w3c/fxtf-drafts/geometry/Overview.html
index c905509089..cc6224bd02 100644
--- a/tests/github/w3c/fxtf-drafts/geometry/Overview.html
+++ b/tests/github/w3c/fxtf-drafts/geometry/Overview.html
@@ -1125,15 +1125,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/geolocation-sensor/index.html b/tests/github/w3c/geolocation-sensor/index.html
index 0bc12f20c3..4819d2113e 100644
--- a/tests/github/w3c/geolocation-sensor/index.html
+++ b/tests/github/w3c/geolocation-sensor/index.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/gyroscope/index.html b/tests/github/w3c/gyroscope/index.html
index 1f815b3837..084bb94676 100644
--- a/tests/github/w3c/gyroscope/index.html
+++ b/tests/github/w3c/gyroscope/index.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/longtasks/index.html b/tests/github/w3c/longtasks/index.html
index c838636562..59c791a9f6 100644
--- a/tests/github/w3c/longtasks/index.html
+++ b/tests/github/w3c/longtasks/index.html
@@ -930,15 +930,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/magnetometer/index.html b/tests/github/w3c/magnetometer/index.html
index 2e99b856c7..30c17907b0 100644
--- a/tests/github/w3c/magnetometer/index.html
+++ b/tests/github/w3c/magnetometer/index.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/mediacapture-record/MediaRecorder.html b/tests/github/w3c/mediacapture-record/MediaRecorder.html
index c4de50794a..2db77ac60c 100644
--- a/tests/github/w3c/mediacapture-record/MediaRecorder.html
+++ b/tests/github/w3c/mediacapture-record/MediaRecorder.html
@@ -718,15 +718,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/orientation-sensor/index.html b/tests/github/w3c/orientation-sensor/index.html
index c5854b6c36..0b92900e8e 100644
--- a/tests/github/w3c/orientation-sensor/index.html
+++ b/tests/github/w3c/orientation-sensor/index.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/orientation-sensor/releases/FPWD.html b/tests/github/w3c/orientation-sensor/releases/FPWD.html
index 2a0e61245f..acb8d86056 100644
--- a/tests/github/w3c/orientation-sensor/releases/FPWD.html
+++ b/tests/github/w3c/orientation-sensor/releases/FPWD.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/paint-timing/painttiming.html b/tests/github/w3c/paint-timing/painttiming.html
index c8a08e42e6..ed9b84157e 100644
--- a/tests/github/w3c/paint-timing/painttiming.html
+++ b/tests/github/w3c/paint-timing/painttiming.html
@@ -925,15 +925,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/permissions/index.html b/tests/github/w3c/permissions/index.html
index a151fd8e4c..1c28e23338 100644
--- a/tests/github/w3c/permissions/index.html
+++ b/tests/github/w3c/permissions/index.html
@@ -925,15 +925,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/proximity/index.html b/tests/github/w3c/proximity/index.html
index b569b71203..c358c93cc2 100644
--- a/tests/github/w3c/proximity/index.html
+++ b/tests/github/w3c/proximity/index.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/reporting/network-reporting.html b/tests/github/w3c/reporting/network-reporting.html
index 4efc9551d9..b567cd1226 100644
--- a/tests/github/w3c/reporting/network-reporting.html
+++ b/tests/github/w3c/reporting/network-reporting.html
@@ -575,15 +575,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/sensors/index.html b/tests/github/w3c/sensors/index.html
index 1ce2ba5294..072093ed09 100644
--- a/tests/github/w3c/sensors/index.html
+++ b/tests/github/w3c/sensors/index.html
@@ -723,15 +723,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/webappsec-credential-management/index.html b/tests/github/w3c/webappsec-credential-management/index.html
index 5f29e2b04a..d6d6b9dcf9 100644
--- a/tests/github/w3c/webappsec-credential-management/index.html
+++ b/tests/github/w3c/webappsec-credential-management/index.html
@@ -925,15 +925,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/webappsec-csp/index.html b/tests/github/w3c/webappsec-csp/index.html
index f84cca95cf..536f61b76e 100644
--- a/tests/github/w3c/webappsec-csp/index.html
+++ b/tests/github/w3c/webappsec-csp/index.html
@@ -734,15 +734,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/webappsec-fetch-metadata/index.html b/tests/github/w3c/webappsec-fetch-metadata/index.html
index e0d59ac40c..a6275875db 100644
--- a/tests/github/w3c/webappsec-fetch-metadata/index.html
+++ b/tests/github/w3c/webappsec-fetch-metadata/index.html
@@ -799,15 +799,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/webappsec-permissions-policy/index.html b/tests/github/w3c/webappsec-permissions-policy/index.html
index 034cd75855..d0cbb1721d 100644
--- a/tests/github/w3c/webappsec-permissions-policy/index.html
+++ b/tests/github/w3c/webappsec-permissions-policy/index.html
@@ -941,15 +941,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/webdriver-bidi/index.html b/tests/github/w3c/webdriver-bidi/index.html
index 9c2ff84102..a10fa7dc15 100644
--- a/tests/github/w3c/webdriver-bidi/index.html
+++ b/tests/github/w3c/webdriver-bidi/index.html
@@ -575,15 +575,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/webtransport/index.html b/tests/github/w3c/webtransport/index.html
index ea2c0db0b2..8f2d1cce26 100644
--- a/tests/github/w3c/webtransport/index.html
+++ b/tests/github/w3c/webtransport/index.html
@@ -701,15 +701,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/w3c/webvtt/index.html b/tests/github/w3c/webvtt/index.html
index 2e52fe9cc1..29fea4555a 100644
--- a/tests/github/w3c/webvtt/index.html
+++ b/tests/github/w3c/webvtt/index.html
@@ -713,15 +713,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/whatwg/fullscreen/fullscreen.html b/tests/github/whatwg/fullscreen/fullscreen.html
index b5e178649d..119e27934e 100644
--- a/tests/github/whatwg/fullscreen/fullscreen.html
+++ b/tests/github/whatwg/fullscreen/fullscreen.html
@@ -70,15 +70,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/whatwg/quirks/quirks.html b/tests/github/whatwg/quirks/quirks.html
index e17055ffa5..3a22b2ee5c 100644
--- a/tests/github/whatwg/quirks/quirks.html
+++ b/tests/github/whatwg/quirks/quirks.html
@@ -72,15 +72,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/whatwg/storage/storage.html b/tests/github/whatwg/storage/storage.html
index 34fba95fac..48e8560fb1 100644
--- a/tests/github/whatwg/storage/storage.html
+++ b/tests/github/whatwg/storage/storage.html
@@ -70,15 +70,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/github/whatwg/streams/index.html b/tests/github/whatwg/streams/index.html
index 7affce5d96..9c14d6c4ea 100644
--- a/tests/github/whatwg/streams/index.html
+++ b/tests/github/whatwg/streams/index.html
@@ -73,15 +73,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}
diff --git a/tests/var002.html b/tests/var002.html
index 01e0516958..617dc4f7e7 100644
--- a/tests/var002.html
+++ b/tests/var002.html
@@ -414,15 +414,37 @@
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)
+
+For darkmode:
+0 = oklab(50% 0% 108%)
+1 = oklab(50% -51% 51%)
+2 = oklab(50% -64% -20%)
+3 = oklab(50% 6% 19%)
+4 = oklab(50% -12% -64%)
+5 = oklab(50% 44% -19%)
+6 = oklab(50% 102% 38%)
*/
+
[data-algorithm] var { cursor: pointer; }
-var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
-var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
-var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
-var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
-var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
-var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
-var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
+var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
+
+var[data-var-color] { --var-bg: #F4D200; }
+var[data-var-color="1"] { --var-bg: #FF87A2; }
+var[data-var-color="2"] { --var-bg: #96E885; }
+var[data-var-color="3"] { --var-bg: #3EEED2; }
+var[data-var-color="4"] { --var-bg: #EACFB6; }
+var[data-var-color="5"] { --var-bg: #82DDFF; }
+var[data-var-color="6"] { --var-vg: #FFBCF2; }
+
+@media (prefers-color-scheme: dark) {
+ var[data-var-color] { --var-bg: #bc1a00; }
+ var[data-var-color="1"] { --var-bg: #007f00; }
+ var[data-var-color="2"] { --var-bg: #008698; }
+ var[data-var-color="3"] { --var-bg: #7f5b2b; }
+ var[data-var-color="4"] { --var-bg: #004df3; }
+ var[data-var-color="5"] { --var-bg: #a1248a; }
+ var[data-var-color="6"] { --var-vg: #ff0000; }
+}