Repository: tc39/ecmarkup
Pull request #632: Support Dark Mode
Author: login: arai-a
Created: 2025-01-26T10:54:48Z | Merged: 2025-03-14T17:20:27Z

This adds dark mode for the spec.

The colors and the variable names are chosen without much consideration, and I'm open to any changes.

There are some issue with the transparent images, such as the ECMA logo.
If there's dark-mode logo or any other solution, let me know.
For other images in figure, I've added always-#fff background color.

<img width="1430" alt="dark" src="https://github.com/user-attachments/assets/4e59a1d4-8c0f-4a65-a9ee-87a4aae7af78" />



Diff:
diff --git a/css/elements.css b/css/elements.css
index 9240965e..d3f11e62 100644
--- a/css/elements.css
+++ b/css/elements.css
@@ -1,3 +1,167 @@
+:root {
+  --foreground-color: #111;
+  --background-color: #fff;
+
+  --link-foreground-color: #206ca7;
+  --link-hover-foreground-color: #239dee;
+
+  --user-code-foreground-color: brown;
+
+  --var-foreground-color: #218379;
+
+  --referenced0-background-color: #ffff6c;
+  --referenced1-background-color: #ffa4a8;
+  --referenced2-background-color: #96e885;
+  --referenced3-background-color: #3eeed2;
+  --referenced4-background-color: #eacfb6;
+  --referenced5-background-color: #82ddff;
+  --referenced6-background-color: #ffbcf2;
+
+  --note-background-color: #e9fbe9;
+  --note-border-color: #52e052;
+  --note-editor-border-color: #faa;
+
+  --nt-link-foreground-color: #333;
+
+  --production-rhs-background-color: #f0f0f0;
+  --production-rhs-border-color: #888;
+
+  --params-foreground-color: #2aa198;
+  --opt-foreground-color: #b58900;
+
+  --title-foreground-color: #f60;
+
+  --caption-foreground-color: #555555;
+
+  --table-header-background-color: #eeeeee;
+
+  --highlight-background-color-start: rgba(249, 241, 172, 1);
+  --highlight-background-color-end: rgba(249, 241, 172, 0);
+
+  --highlight-background-color: rgba(249, 241, 172, 1);
+
+  --ins-background-color: #e0f8e0;
+  --ins-border-color: #396;
+
+  --del-background-color: #fee;
+
+  --control-foreground-color: #eee;
+  --control-dimmed-foreground-color: #666;
+  --control-background-color: #ddd;
+  --control-dark-background-color: #ccc;
+  --control-border-color: #aaa;
+  --control-light-border-color: #bbb;
+  --control-shortcut-background-color: #eee;
+  --control-shortcut-shadow-color: #ccc;
+  --control-dialog-fade-color: rgba(255, 255, 255, 0.6);
+
+  --control-link-foreground-color: #1567a2;
+
+  --control-input-background-color: #bbb;
+  --control-input-border-color: #999;
+
+  --menu-header-background-color: #bbb;
+  --menu-revealed-link-foreground-color: #206ca7;
+  --menu-unpin-hover-foreground-color: #bb1212;
+
+  --menu-trace-list-foreground-color: #999;
+  --menu-trace-list-background-color: #222;
+
+  --toolbox-tail-background-outside-color: rgba(0, 0, 0, 0);
+  --toolbox-tail-border-outside-color: rgba(204, 204, 204, 0);
+
+  --normative-optional-background-color: #ffeedd;
+  --normative-optional-border-color: #ff6600;
+
+  --attributes-tag-foreground-color: #884400;
+
+  --figure-background: #fff;
+}
+
+@supports (color-scheme: dark) {
+  @media only screen and (prefers-color-scheme: dark) {
+    :root {
+      --foreground-color: #fcfcfc;
+      --background-color: #171717;
+
+      --link-foreground-color: #439de2;
+      --link-hover-foreground-color: #80cafb;
+
+      --user-code-foreground-color: brown;
+
+      --var-foreground-color: #4fb6ab;
+
+      --referenced0-background-color: #6d6d1e;
+      --referenced1-background-color: #7e171c;
+      --referenced2-background-color: #1f6211;
+      --referenced3-background-color: #1a7a6b;
+      --referenced4-background-color: #7b4719;
+      --referenced5-background-color: #185870;
+      --referenced6-background-color: #731761;
+
+      --note-background-color: #1b2f1b;
+      --note-border-color: #31a331;
+      --note-editor-border-color: #801e1e;
+
+      --nt-link-foreground-color: #d0d0d0;
+
+      --production-rhs-background-color: #4d4d4d;
+      --production-rhs-border-color: #888;
+
+      --params-foreground-color: #57d0c7;
+      --opt-foreground-color: #d8b750;
+
+      --title-foreground-color: #f60;
+
+      --caption-foreground-color: #b0b0b0;
+
+      --table-header-background-color: #303030;
+
+      --highlight-background-color-start: rgba(114, 105, 24, 1);
+      --highlight-background-color-end: rgba(114, 105, 24, 0);
+
+      --highlight-background-color: rgba(114, 105, 24, 1);
+
+      --ins-background-color: #1e4a1e;
+      --ins-border-color: #61d89b;
+
+      --del-background-color: #4a1f1f;
+
+      --control-foreground-color: #101010;
+      --control-dimmed-foreground-color: #d0d0d0;
+      --control-background-color: #202020;
+      --control-dark-background-color: #303030;
+      --control-border-color: #505050;
+      --control-light-border-color: #606060;
+      --control-shortcut-background-color: #505050;
+      --control-shortcut-shadow-color: #000000;
+      --control-dialog-fade-color: rgba(0, 0, 0, 0.6);
+
+      --control-link-foreground-color: #7ebce9;
+
+      --control-input-background-color: #606060;
+      --control-input-border-color: #a0a0a0;
+
+      --menu-header-background-color: #404040;
+      --menu-revealed-link-foreground-color: #9bd0f7;
+      --menu-unpin-hover-foreground-color: #f29c9c;
+
+      --menu-trace-list-foreground-color: #222;
+      --menu-trace-list-background-color: #999;
+
+      --toolbox-tail-background-outside-color: rgba(0, 0, 0, 0);
+      --toolbox-tail-border-outside-color: rgba(204, 204, 204, 0);
+
+      --normative-optional-background-color: #352c24;
+      --normative-optional-border-color: #ff6600;
+
+      --attributes-tag-foreground-color: #e6a96d;
+
+      --figure-background: #fff;
+    }
+  }
+}
+
 /* IBM Plex fonts (Latin subset) have been downloaded from Google Fonts and modified to add support back in for the `zero` substitution (slashed zeroes) */
 
 /* https://fonts.googleapis.com/css2?family=IBM%20Plex%20Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap */
@@ -91,7 +255,7 @@
 }
 
 html {
-  background-color: #fff;
+  background-color: var(--background-color);
 }
 
 body {
@@ -105,7 +269,7 @@ body {
   font-variant-numeric: slashed-zero;
   padding: 0;
   margin: 0;
-  color: #111;
+  color: var(--foreground-color);
 }
 
 #spec-container {
@@ -132,16 +296,16 @@ span[aria-hidden='true'] {
 
 a {
   text-decoration: none;
-  color: #206ca7;
+  color: var(--link-foreground-color);
 }
 
 a:visited {
-  color: #206ca7;
+  color: var(--link-foreground-color);
 }
 
 a:hover {
   text-decoration: underline;
-  color: #239dee;
+  color: var(--link-hover-foreground-color);
 }
 
 a.e-user-code,
@@ -152,9 +316,9 @@ span.e-user-code {
 a.e-user-code::before,
 span.e-user-code::before {
   display: none;
-  color: brown;
-  background-color: white;
-  border: 2pt solid brown;
+  color: var(--user-code-foreground-color);
+  background-color: var(--background-color);
+  border: 2pt solid var(--user-code-foreground-color);
   padding: 0.3ex;
   margin: 0 0.25em 0 0;
   line-height: normal;
@@ -169,8 +333,8 @@ span.e-user-code::before {
 
 a.e-user-code:hover::before,
 span.e-user-code:hover::before {
-  background-color: brown;
-  color: white;
+  background-color: var(--user-code-foreground-color);
+  color: var(--background-color);
 }
 
 html.show-ao-annotations a.e-user-code::before,
@@ -197,7 +361,7 @@ pre code {
 }
 
 pre code.hljs {
-  background-color: #fff;
+  background-color: var(--background-color);
   margin: 0;
   padding: 0;
 }
@@ -214,20 +378,29 @@ ol.toc ol.toc {
 
 var {
   border-radius: 5px;
-  color: #218379;
+  color: var(--var-foreground-color);
   transition: all 0.25s ease-out;
   cursor: pointer;
   padding: 0 4px;
   margin: 0 -4px;
   mix-blend-mode: multiply;
 }
+
+@supports (color-scheme: dark) {
+  @media only screen and (prefers-color-scheme: dark) {
+    var {
+      mix-blend-mode: normal;
+    }
+  }
+}
+
 var.field {
   font: inherit;
   color: inherit;
 }
 /* suppress line break opportunities between `.` and `[[FieldName]]` */
 var.field::before {
-  content: '\2060'
+  content: '\2060';
 }
 
 var.referenced {
@@ -235,25 +408,25 @@ var.referenced {
 }
 
 var.referenced0 {
-  background-color: #ffff6c;
+  background-color: var(--referenced0-background-color);
 }
 var.referenced1 {
-  background-color: #ffa4a8;
+  background-color: var(--referenced1-background-color);
 }
 var.referenced2 {
-  background-color: #96e885;
+  background-color: var(--referenced2-background-color);
 }
 var.referenced3 {
-  background-color: #3eeed2;
+  background-color: var(--referenced3-background-color);
 }
 var.referenced4 {
-  background-color: #eacfb6;
+  background-color: var(--referenced4-background-color);
 }
 var.referenced5 {
-  background-color: #82ddff;
+  background-color: var(--referenced5-background-color);
 }
 var.referenced6 {
-  background-color: #ffbcf2;
+  background-color: var(--referenced6-background-color);
 }
 
 emu-const {
@@ -326,8 +499,8 @@ emu-note {
   gap: 1em;
   flex-direction: row;
   color: inherit;
-  border-left: 5px solid #52e052;
-  background: #e9fbe9;
+  border-left: 5px solid var(--note-border-color);
+  background: var(--note-background-color);
   padding: 10px 10px 10px 0;
   overflow-x: auto;
 }
@@ -341,7 +514,7 @@ emu-note > span.note {
 }
 
 emu-note[type='editor'] {
-  border-left-color: #faa;
+  border-left-color: var(--note-editor-border-color);
 }
 
 emu-note > div.note-contents {
@@ -450,7 +623,7 @@ emu-nt {
 
 emu-nt a,
 emu-nt a:visited {
-  color: #333;
+  color: var(--nt-link-foreground-color);
 }
 
 emu-rhs emu-nt {
@@ -482,8 +655,8 @@ emu-production:not([collapsed]) emu-rhs {
 }
 
 emu-production:not([collapsed]) emu-rhs:hover {
-  border-color: #888;
-  background-color: #f0f0f0;
+  border-color: var(--production-rhs-border-color);
+  background-color: var(--production-rhs-background-color);
 }
 
 emu-mods {
@@ -503,11 +676,11 @@ emu-opt {
 
 emu-params,
 emu-constraints {
-  color: #2aa198;
+  color: var(--params-foreground-color);
 }
 
 emu-opt {
-  color: #b58900;
+  color: var(--opt-foreground-color);
 }
 
 emu-gprose {
@@ -522,18 +695,18 @@ emu-production emu-gprose {
 }
 
 h1.shortname {
-  color: #f60;
+  color: var(--title-foreground-color);
   font-size: 1.5em;
   margin: 0;
 }
 
 h1.version {
-  color: #f60;
+  color: var(--title-foreground-color);
   font-size: 1.5em;
 }
 
 h1.title {
-  color: #f60;
+  color: var(--title-foreground-color);
 }
 
 h1,
@@ -750,10 +923,13 @@ figure table.real-table {
 }
 figure figcaption {
   display: block;
-  color: #555555;
+  color: var(--caption-foreground-color);
   font-weight: bold;
   text-align: center;
 }
+figure img {
+  background: var(--figure-background);
+}
 
 emu-table table {
   margin: 0 auto;
@@ -768,18 +944,18 @@ emu-table td,
 emu-table th,
 table.real-table td,
 table.real-table th {
-  border: 1px solid black;
+  border: 1px solid var(--foreground-color);
   padding: 0.4em;
   vertical-align: baseline;
 }
 emu-table th,
 emu-table thead td,
 table.real-table th {
-  background-color: #eeeeee;
+  background-color: var(--table-header-background-color);
 }
 
 emu-table td {
-  background: #fff;
+  background: var(--background-color);
 }
 
 td[colspan]:not([colspan="1"]), th[colspan]:not([colspan="1"]) {
@@ -803,10 +979,10 @@ table.lightweight-table th {
    and a persistent focus-associated highlight */
 @keyframes highlight-target-bg {
   0% {
-    background-color: rgba(249, 241, 172, 1);
+    background-color: var(--highlight-background-color-start);
   }
   100% {
-    background-color: rgba(249, 241, 172, 0);
+    background-color: var(--highlight-background-color-end);
   }
 }
 #spec-container :target:not(emu-annex, emu-clause, emu-intro, emu-note, body) {
@@ -814,18 +990,18 @@ table.lightweight-table th {
 }
 #spec-container :target:focus-within:not(:has(:not(a))) {
   animation: none;
-  background-color: rgba(249, 241, 172, 1);
+  background-color: var(--highlight-background-color);
 }
 
 /* diff styles */
 ins {
-  background-color: #e0f8e0;
+  background-color: var(--ins-background-color);
   text-decoration: none;
-  border-bottom: 1px solid #396;
+  border-bottom: 1px solid var(--ins-border-color);
 }
 
 del {
-  background-color: #fee;
+  background-color: var(--del-background-color);
 }
 
 ins.block,
@@ -846,11 +1022,11 @@ tr.ins > td > ins {
 }
 
 tr.ins > td {
-  background-color: #e0f8e0;
+  background-color: var(--ins-background-color);
 }
 
 tr.del > td {
-  background-color: #fee;
+  background-color: var(--del-background-color);
 }
 
 /* Menu Styles */
@@ -864,8 +1040,8 @@ tr.del > td {
   height: 1.5em;
   z-index: 3;
   visibility: hidden;
-  color: #1567a2;
-  background-color: #fff;
+  color: var(--control-link-foreground-color);
+  background-color: var(--background-color);
 
   line-height: 1.5em;
   text-align: center;
@@ -886,14 +1062,14 @@ tr.del > td {
   height: 100vh;
   max-width: 500px;
   box-sizing: border-box;
-  background-color: #ddd;
+  background-color: var(--control-background-color);
   overflow: hidden;
   transition: opacity 0.1s linear;
   padding: 0 5px;
   position: fixed;
   left: 0;
   top: 0;
-  border-right: 2px solid #bbb;
+  border-right: 2px solid var(--control-light-border-color);
 
   z-index: 2;
 }
@@ -906,7 +1082,7 @@ tr.del > td {
 }
 
 #menu a {
-  color: #1567a2;
+  color: var(--control-link-foreground-color);
 }
 
 #menu.active {
@@ -926,7 +1102,7 @@ tr.del > td {
 
 #menu-pins .unpin-all {
   border: none;
-  background: #ccc;
+  background: var(--control-dark-background-color);
   border-radius: 4px;
   height: 18px;
   font-size: 12px;
@@ -934,7 +1110,7 @@ tr.del > td {
   font-family: 'IBM Plex Sans', sans-serif;
 }
 #menu-pins .unpin-all:hover {
-  background: #ddd;
+  background: var(--control-background-color);
 }
 
 #menu-pins-list {
@@ -968,16 +1144,17 @@ tr.del > td {
 }
 #menu-pins-list > li::before,
 #menu-pins-list > li > .unpin:hover {
-  background: #ccc;
+  background: var(--control-dark-background-color);
 }
 
 #menu-pins-list > li > .unpin,
 #menu-pins .unpin-all {
   cursor: pointer;
+  color: var(--foreground-color);
 }
 #menu-pins-list > li > .unpin:hover,
 #menu-pins .unpin-all:hover {
-  color: #bb1212;
+  color: var(--menu-unpin-hover-foreground-color);
 }
 
 #menu-pins-list > li::before {
@@ -1054,12 +1231,12 @@ tr.del > td {
 }
 
 #menu-toc li.revealed > a {
-  background-color: #ccc;
+  background-color: var(--control-dark-background-color);
   font-weight: bold;
 }
 
 #menu-toc li.revealed-leaf > a {
-  color: #206ca7;
+  color: var(--menu-revealed-link-foreground-color);
 }
 
 #menu-toc li.revealed > ol {
@@ -1076,7 +1253,7 @@ tr.del > td {
 
 .menu-pane-header {
   padding: 2px 8px;
-  background-color: #bbb;
+  background-color: var(--menu-header-background-color);
   font-weight: bold;
   letter-spacing: 1px;
   flex-grow: 0;
@@ -1103,6 +1280,10 @@ tr.del > td {
   margin-left: 0px;
 }
 
+.menu-pane-header a {
+  color: var(--control-link-foreground-color);
+}
+
 a.menu-pane-header-production {
   color: inherit;
 }
@@ -1149,8 +1330,9 @@ a.menu-pane-header-production {
   margin: 5px 0 0 0;
   font-size: 1em;
   padding: 2px;
-  background-color: #bbb;
-  border: 1px solid #999;
+  color: var(--foreground-color);
+  background-color: var(--control-input-background-color);
+  border: 1px solid var(--control-input-border-color);
 }
 
 #menu-search-results {
@@ -1164,7 +1346,7 @@ li.menu-search-result-clause::before {
   display: inline-block;
   text-align: right;
   padding-right: 1ex;
-  color: #666;
+  color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
 li.menu-search-result-op::before {
@@ -1173,7 +1355,7 @@ li.menu-search-result-op::before {
   display: inline-block;
   text-align: right;
   padding-right: 1ex;
-  color: #666;
+  color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
 
@@ -1183,7 +1365,7 @@ li.menu-search-result-prod::before {
   display: inline-block;
   text-align: right;
   padding-right: 1ex;
-  color: #666;
+  color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
 
@@ -1193,7 +1375,7 @@ li.menu-search-result-term::before {
   display: inline-block;
   text-align: right;
   padding-right: 1ex;
-  color: #666;
+  color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
 
@@ -1222,9 +1404,9 @@ li.menu-search-result-term::before {
 }
 #menu-trace-list li::before {
   content: counter(item) ' ';
-  background-color: #222;
+  background-color: var(--menu-trace-list-background-color);
   counter-increment: item;
-  color: #999;
+  color: var(--menu-trace-list-foreground-color);
   width: 20px;
   height: 20px;
   line-height: 20px;
@@ -1290,9 +1472,9 @@ li.menu-search-result-term::before {
 
 .toolbox {
   position: relative;
-  background: #ddd;
-  border: 1px solid #aaa;
-  color: #eee;
+  background: var(--control-background-color);
+  border: 1px solid var(--control-border-color);
+  color: var(--control-foreground-color);
   padding: 5px 7px;
   border-radius: 3px;
 }
@@ -1320,14 +1502,14 @@ li.menu-search-result-term::before {
 }
 
 .toolbox::after {
-  border-color: rgba(0, 0, 0, 0);
-  border-top-color: #ddd;
+  border-color: var(--toolbox-tail-background-outside-color);
+  border-top-color: var(--control-background-color);
   border-width: 10px;
   margin-left: -10px;
 }
 .toolbox::before {
-  border-color: rgba(204, 204, 204, 0);
-  border-top-color: #aaa;
+  border-color: var(--toolbox-tail-border-outside-color);
+  border-top-color: var(--control-border-color);
   border-width: 12px;
   margin-left: -12px;
 }
@@ -1338,7 +1520,7 @@ li.menu-search-result-term::before {
   left: 0;
   right: 0;
   display: none;
-  background-color: #ddd;
+  background-color: var(--control-background-color);
   z-index: 1;
 }
 
@@ -1381,7 +1563,7 @@ li.menu-search-result-term::before {
 
 emu-normative-optional::before {
   display: block;
-  color: #884400;
+  color: var(--attributes-tag-foreground-color);
   content: "NORMATIVE OPTIONAL";
 }
 
@@ -1389,19 +1571,19 @@ emu-normative-optional,
 [normative-optional],
 [deprecated],
 [legacy] {
-  border-left: 5px solid #ff6600;
+  border-left: 5px solid var(--normative-optional-border-color);
   display: block;
   padding: 0.5em;
-  background: #ffeedd;
+  background: var(--normative-optional-background-color);
 }
 
 .attributes-tag {
   text-transform: uppercase;
-  color: #884400;
+  color: var(--attributes-tag-foreground-color);
 }
 
 .attributes-tag a {
-  color: #884400;
+  color: var(--attributes-tag-foreground-color);
 }
 
 /* Shortcuts help dialog */
@@ -1416,10 +1598,10 @@ emu-normative-optional,
   top: calc(5vw + 5vh);
   padding: 30px 90px;
   max-width: 500px;
-  outline: solid 10000px rgba(255, 255, 255, 0.6);
+  outline: solid 10000px var(--control-dialog-fade-color);
   border-radius: 5px;
   border-width: 1px 1px 0 1px;
-  background-color: #ddd;
+  background-color: var(--control-background-color);
   display: none;
 }
 
@@ -1440,7 +1622,11 @@ emu-normative-optional,
   padding: 3px 10px;
   border-radius: 3px;
   border-width: 1px 1px 0 1px;
-  border-color: #bbb;
-  background-color: #eee;
-  box-shadow: inset 0 -1px 0 #ccc;
+  border-color: var(--control-light-border-color);
+  background-color: var(--control-shortcut-background-color);
+  box-shadow: inset 0 -1px 0 var(--control-shortcut-shadow-color);
+}
+
+#ecma-logo {
+  background: var(--figure-background);
 }
diff --git a/src/Spec.ts b/src/Spec.ts
index 931bb567..152ed3e6 100644
--- a/src/Spec.ts
+++ b/src/Spec.ts
@@ -1216,12 +1216,48 @@ ${await utils.readFile(path.join(__dirname, '../js/multipage.js'))}
       }
       this.doc.head.appendChild(printStyle);
     }
-    this.addStyle(
-      this.doc.head,
-      `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${
+    const currentYearStyle = this.doc.createElement('style');
+    currentYearStyle.textContent = `
+    @media print {
+      @page :left {
+        @bottom-right {
+          content: '© Ecma International ${this.opts.date!.getFullYear()}';
+        }
+      }
+      @page :right {
+        @bottom-left {
+          content: '© Ecma International ${this.opts.date!.getFullYear()}';
+        }
+      }
+      @page :first {
+        @bottom-left {
+          content: '';
+        }
+        @bottom-right {
+          content: '';
+        }
+      }
+      @page :blank {
+        @bottom-left {
+          content: '';
+        }
+        @bottom-right {
+          content: '';
+        }
+      }
+    }
+    `;
+    this.doc.head.appendChild(currentYearStyle);
+    const solarizedStyle = this.doc.createElement('style');
+    solarizedStyle.textContent = `
+      @import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${
         (hljs as any).versionString
-      }/styles/base16/solarized-light.min.css`,
-    );
+      }/styles/base16/solarized-light.min.css");
+      @import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${
+        (hljs as any).versionString
+      }/styles/a11y-dark.min.css") (prefers-color-scheme: dark);
+    `;
+    this.doc.head.appendChild(solarizedStyle);
   }
 
   private addStyle(head: HTMLHeadElement, href: string, media?: 'all' | 'print' | 'screen') {
diff --git a/test/baselines/generated-reference/assets-inline.html b/test/baselines/generated-reference/assets-inline.html
index 7b2cb7ba..62b8413f 100644
--- a/test/baselines/generated-reference/assets-inline.html
+++ b/test/baselines/generated-reference/assets-inline.html
@@ -1607,7 +1607,171 @@
 
 let sdoMap = JSON.parse(`{}`);
 let biblio = JSON.parse(`{"refsByClause":{},"entries":[{"type":"clause","id":"sec-intro","titleHTML":"Intro","number":""},{"type":"clause","id":"sec-copyright-and-software-license","title":"Copyright & Software License","titleHTML":"Copyright &amp; Software License","number":"A"}]}`);
-;let usesMultipage = false</script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/base16/solarized-light.min.css"><style>/* IBM Plex fonts (Latin subset) have been downloaded from Google Fonts and modified to add support back in for the `zero` substitution (slashed zeroes) */
+;let usesMultipage = false</script><style>:root {
+  --foreground-color: #111;
+  --background-color: #fff;
+
+  --link-foreground-color: #206ca7;
+  --link-hover-foreground-color: #239dee;
+
+  --user-code-foreground-color: brown;
+
+  --var-foreground-color: #218379;
+
+  --referenced0-background-color: #ffff6c;
+  --referenced1-background-color: #ffa4a8;
+  --referenced2-background-color: #96e885;
+  --referenced3-background-color: #3eeed2;
+  --referenced4-background-color: #eacfb6;
+  --referenced5-background-color: #82ddff;
+  --referenced6-background-color: #ffbcf2;
+
+  --note-background-color: #e9fbe9;
+  --note-border-color: #52e052;
+  --note-editor-border-color: #faa;
+
+  --nt-link-foreground-color: #333;
+
+  --production-rhs-background-color: #f0f0f0;
+  --production-rhs-border-color: #888;
+
+  --params-foreground-color: #2aa198;
+  --opt-foreground-color: #b58900;
+
+  --title-foreground-color: #f60;
+
+  --caption-foreground-color: #555555;
+
+  --table-header-background-color: #eeeeee;
+
+  --highlight-background-color-start: rgba(249, 241, 172, 1);
+  --highlight-background-color-end: rgba(249, 241, 172, 0);
+
+  --highlight-background-color: rgba(249, 241, 172, 1);
+
+  --ins-background-color: #e0f8e0;
+  --ins-border-color: #396;
+
+  --del-background-color: #fee;
+
+  --control-foreground-color: #eee;
+  --control-dimmed-foreground-color: #666;
+  --control-background-color: #ddd;
+  --control-dark-background-color: #ccc;
+  --control-border-color: #aaa;
+  --control-light-border-color: #bbb;
+  --control-shortcut-background-color: #eee;
+  --control-shortcut-shadow-color: #ccc;
+  --control-dialog-fade-color: rgba(255, 255, 255, 0.6);
+
+  --control-link-foreground-color: #1567a2;
+
+  --control-input-background-color: #bbb;
+  --control-input-border-color: #999;
+
+  --menu-header-background-color: #bbb;
+  --menu-revealed-link-foreground-color: #206ca7;
+  --menu-unpin-hover-foreground-color: #bb1212;
+
+  --menu-trace-list-foreground-color: #999;
+  --menu-trace-list-background-color: #222;
+
+  --toolbox-tail-background-outside-color: rgba(0, 0, 0, 0);
+  --toolbox-tail-border-outside-color: rgba(204, 204, 204, 0);
+
+  --normative-optional-background-color: #ffeedd;
+  --normative-optional-border-color: #ff6600;
+
+  --attributes-tag-foreground-color: #884400;
+
+  --figure-background: #fff;
+}
+
+@supports (color-scheme: dark) {
+  @media only screen and (prefers-color-scheme: dark) {
+    :root {
+      --foreground-color: #fcfcfc;
+      --background-color: #171717;
+
+      --link-foreground-color: #439de2;
+      --link-hover-foreground-color: #80cafb;
+
+      --user-code-foreground-color: brown;
+
+      --var-foreground-color: #4fb6ab;
+
+      --referenced0-background-color: #6d6d1e;
+      --referenced1-background-color: #7e171c;
+      --referenced2-background-color: #1f6211;
+      --referenced3-background-color: #1a7a6b;
+      --referenced4-background-color: #7b4719;
+      --referenced5-background-color: #185870;
+      --referenced6-background-color: #731761;
+
+      --note-background-color: #1b2f1b;
+      --note-border-color: #31a331;
+      --note-editor-border-color: #801e1e;
+
+      --nt-link-foreground-color: #d0d0d0;
+
+      --production-rhs-background-color: #4d4d4d;
+      --production-rhs-border-color: #888;
+
+      --params-foreground-color: #57d0c7;
+      --opt-foreground-color: #d8b750;
+
+      --title-foreground-color: #f60;
+
+      --caption-foreground-color: #b0b0b0;
+
+      --table-header-background-color: #303030;
+
+      --highlight-background-color-start: rgba(114, 105, 24, 1);
+      --highlight-background-color-end: rgba(114, 105, 24, 0);
+
+      --highlight-background-color: rgba(114, 105, 24, 1);
+
+      --ins-background-color: #1e4a1e;
+      --ins-border-color: #61d89b;
+
+      --del-background-color: #4a1f1f;
+
+      --control-foreground-color: #101010;
+      --control-dimmed-foreground-color: #d0d0d0;
+      --control-background-color: #202020;
+      --control-dark-background-color: #303030;
+      --control-border-color: #505050;
+      --control-light-border-color: #606060;
+      --control-shortcut-background-color: #505050;
+      --control-shortcut-shadow-color: #000000;
+      --control-dialog-fade-color: rgba(0, 0, 0, 0.6);
+
+      --control-link-foreground-color: #7ebce9;
+
+      --control-input-background-color: #606060;
+      --control-input-border-color: #a0a0a0;
+
+      --menu-header-background-color: #404040;
+      --menu-revealed-link-foreground-color: #9bd0f7;
+      --menu-unpin-hover-foreground-color: #f29c9c;
+
+      --menu-trace-list-foreground-color: #222;
+      --menu-trace-list-background-color: #999;
+
+      --toolbox-tail-background-outside-color: rgba(0, 0, 0, 0);
+      --toolbox-tail-border-outside-color: rgba(204, 204, 204, 0);
+
+      --normative-optional-background-color: #352c24;
+      --normative-optional-border-color: #ff6600;
+
+      --attributes-tag-foreground-color: #e6a96d;
+
+      --figure-background: #fff;
+    }
+  }
+}
+
+/* IBM Plex fonts (Latin subset) have been downloaded from Google Fonts and modified to add support back in for the `zero` substitution (slashed zeroes) */
 
 /* https://fonts.googleapis.com/css2?family=IBM%20Plex%20Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap */
 @font-face {
@@ -1700,7 +1864,7 @@
 }
 
 html {
-  background-color: #fff;
+  background-color: var(--background-color);
 }
 
 body {
@@ -1714,7 +1878,7 @@
   font-variant-numeric: slashed-zero;
   padding: 0;
   margin: 0;
-  color: #111;
+  color: var(--foreground-color);
 }
 
 #spec-container {
@@ -1741,16 +1905,16 @@
 
 a {
   text-decoration: none;
-  color: #206ca7;
+  color: var(--link-foreground-color);
 }
 
 a:visited {
-  color: #206ca7;
+  color: var(--link-foreground-color);
 }
 
 a:hover {
   text-decoration: underline;
-  color: #239dee;
+  color: var(--link-hover-foreground-color);
 }
 
 a.e-user-code,
@@ -1761,9 +1925,9 @@
 a.e-user-code::before,
 span.e-user-code::before {
   display: none;
-  color: brown;
-  background-color: white;
-  border: 2pt solid brown;
+  color: var(--user-code-foreground-color);
+  background-color: var(--background-color);
+  border: 2pt solid var(--user-code-foreground-color);
   padding: 0.3ex;
   margin: 0 0.25em 0 0;
   line-height: normal;
@@ -1778,8 +1942,8 @@
 
 a.e-user-code:hover::before,
 span.e-user-code:hover::before {
-  background-color: brown;
-  color: white;
+  background-color: var(--user-code-foreground-color);
+  color: var(--background-color);
 }
 
 html.show-ao-annotations a.e-user-code::before,
@@ -1806,7 +1970,7 @@
 }
 
 pre code.hljs {
-  background-color: #fff;
+  background-color: var(--background-color);
   margin: 0;
   padding: 0;
 }
@@ -1823,20 +1987,29 @@
 
 var {
   border-radius: 5px;
-  color: #218379;
+  color: var(--var-foreground-color);
   transition: all 0.25s ease-out;
   cursor: pointer;
   padding: 0 4px;
   margin: 0 -4px;
   mix-blend-mode: multiply;
 }
+
+@supports (color-scheme: dark) {
+  @media only screen and (prefers-color-scheme: dark) {
+    var {
+      mix-blend-mode: normal;
+    }
+  }
+}
+
 var.field {
   font: inherit;
   color: inherit;
 }
 /* suppress line break opportunities between `.` and `[[FieldName]]` */
 var.field::before {
-  content: '\2060'
+  content: '\2060';
 }
 
 var.referenced {
@@ -1844,25 +2017,25 @@
 }
 
 var.referenced0 {
-  background-color: #ffff6c;
+  background-color: var(--referenced0-background-color);
 }
 var.referenced1 {
-  background-color: #ffa4a8;
+  background-color: var(--referenced1-background-color);
 }
 var.referenced2 {
-  background-color: #96e885;
+  background-color: var(--referenced2-background-color);
 }
 var.referenced3 {
-  background-color: #3eeed2;
+  background-color: var(--referenced3-background-color);
 }
 var.referenced4 {
-  background-color: #eacfb6;
+  background-color: var(--referenced4-background-color);
 }
 var.referenced5 {
-  background-color: #82ddff;
+  background-color: var(--referenced5-background-color);
 }
 var.referenced6 {
-  background-color: #ffbcf2;
+  background-color: var(--referenced6-background-color);
 }
 
 emu-const {
@@ -1935,8 +2108,8 @@
   gap: 1em;
   flex-direction: row;
   color: inherit;
-  border-left: 5px solid #52e052;
-  background: #e9fbe9;
+  border-left: 5px solid var(--note-border-color);
+  background: var(--note-background-color);
   padding: 10px 10px 10px 0;
   overflow-x: auto;
 }
@@ -1950,7 +2123,7 @@
 }
 
 emu-note[type='editor'] {
-  border-left-color: #faa;
+  border-left-color: var(--note-editor-border-color);
 }
 
 emu-note > div.note-contents {
@@ -2059,7 +2232,7 @@
 
 emu-nt a,
 emu-nt a:visited {
-  color: #333;
+  color: var(--nt-link-foreground-color);
 }
 
 emu-rhs emu-nt {
@@ -2091,8 +2264,8 @@
 }
 
 emu-production:not([collapsed]) emu-rhs:hover {
-  border-color: #888;
-  background-color: #f0f0f0;
+  border-color: var(--production-rhs-border-color);
+  background-color: var(--production-rhs-background-color);
 }
 
 emu-mods {
@@ -2112,11 +2285,11 @@
 
 emu-params,
 emu-constraints {
-  color: #2aa198;
+  color: var(--params-foreground-color);
 }
 
 emu-opt {
-  color: #b58900;
+  color: var(--opt-foreground-color);
 }
 
 emu-gprose {
@@ -2131,18 +2304,18 @@
 }
 
 h1.shortname {
-  color: #f60;
+  color: var(--title-foreground-color);
   font-size: 1.5em;
   margin: 0;
 }
 
 h1.version {
-  color: #f60;
+  color: var(--title-foreground-color);
   font-size: 1.5em;
 }
 
 h1.title {
-  color: #f60;
+  color: var(--title-foreground-color);
 }
 
 h1,
@@ -2359,10 +2532,13 @@
 }
 figure figcaption {
   display: block;
-  color: #555555;
+  color: var(--caption-foreground-color);
   font-weight: bold;
   text-align: center;
 }
+figure img {
+  background: var(--figure-background);
+}
 
 emu-table table {
   margin: 0 auto;
@@ -2377,18 +2553,18 @@
 emu-table th,
 table.real-table td,
 table.real-table th {
-  border: 1px solid black;
+  border: 1px solid var(--foreground-color);
   padding: 0.4em;
   vertical-align: baseline;
 }
 emu-table th,
 emu-table thead td,
 table.real-table th {
-  background-color: #eeeeee;
+  background-color: var(--table-header-background-color);
 }
 
 emu-table td {
-  background: #fff;
+  background: var(--background-color);
 }
 
 td[colspan]:not([colspan="1"]), th[colspan]:not([colspan="1"]) {
@@ -2412,10 +2588,10 @@
    and a persistent focus-associated highlight */
 @keyframes highlight-target-bg {
   0% {
-    background-color: rgba(249, 241, 172, 1);
+    background-color: var(--highlight-background-color-start);
   }
   100% {
-    background-color: rgba(249, 241, 172, 0);
+    background-color: var(--highlight-background-color-end);
   }
 }
 #spec-container :target:not(emu-annex, emu-clause, emu-intro, emu-note, body) {
@@ -2423,18 +2599,18 @@
 }
 #spec-container :target:focus-within:not(:has(:not(a))) {
   animation: none;
-  background-color: rgba(249, 241, 172, 1);
+  background-color: var(--highlight-background-color);
 }
 
 /* diff styles */
 ins {
-  background-color: #e0f8e0;
+  background-color: var(--ins-background-color);
   text-decoration: none;
-  border-bottom: 1px solid #396;
+  border-bottom: 1px solid var(--ins-border-color);
 }
 
 del {
-  background-color: #fee;
+  background-color: var(--del-background-color);
 }
 
 ins.block,
@@ -2455,11 +2631,11 @@
 }
 
 tr.ins > td {
-  background-color: #e0f8e0;
+  background-color: var(--ins-background-color);
 }
 
 tr.del > td {
-  background-color: #fee;
+  background-color: var(--del-background-color);
 }
 
 /* Menu Styles */
@@ -2473,8 +2649,8 @@
   height: 1.5em;
   z-index: 3;
   visibility: hidden;
-  color: #1567a2;
-  background-color: #fff;
+  color: var(--control-link-foreground-color);
+  background-color: var(--background-color);
 
   line-height: 1.5em;
   text-align: center;
@@ -2495,14 +2671,14 @@
   height: 100vh;
   max-width: 500px;
   box-sizing: border-box;
-  background-color: #ddd;
+  background-color: var(--control-background-color);
   overflow: hidden;
   transition: opacity 0.1s linear;
   padding: 0 5px;
   position: fixed;
   left: 0;
   top: 0;
-  border-right: 2px solid #bbb;
+  border-right: 2px solid var(--control-light-border-color);
 
   z-index: 2;
 }
@@ -2515,7 +2691,7 @@
 }
 
 #menu a {
-  color: #1567a2;
+  color: var(--control-link-foreground-color);
 }
 
 #menu.active {
@@ -2535,7 +2711,7 @@
 
 #menu-pins .unpin-all {
   border: none;
-  background: #ccc;
+  background: var(--control-dark-background-color);
   border-radius: 4px;
   height: 18px;
   font-size: 12px;
@@ -2543,7 +2719,7 @@
   font-family: 'IBM Plex Sans', sans-serif;
 }
 #menu-pins .unpin-all:hover {
-  background: #ddd;
+  background: var(--control-background-color);
 }
 
 #menu-pins-list {
@@ -2577,16 +2753,17 @@
 }
 #menu-pins-list > li::before,
 #menu-pins-list > li > .unpin:hover {
-  background: #ccc;
+  background: var(--control-dark-background-color);
 }
 
 #menu-pins-list > li > .unpin,
 #menu-pins .unpin-all {
   cursor: pointer;
+  color: var(--foreground-color);
 }
 #menu-pins-list > li > .unpin:hover,
 #menu-pins .unpin-all:hover {
-  color: #bb1212;
+  color: var(--menu-unpin-hover-foreground-color);
 }
 
 #menu-pins-list > li::before {
@@ -2663,12 +2840,12 @@
 }
 
 #menu-toc li.revealed > a {
-  background-color: #ccc;
+  background-color: var(--control-dark-background-color);
   font-weight: bold;
 }
 
 #menu-toc li.revealed-leaf > a {
-  color: #206ca7;
+  color: var(--menu-revealed-link-foreground-color);
 }
 
 #menu-toc li.revealed > ol {
@@ -2685,7 +2862,7 @@
 
 .menu-pane-header {
   padding: 2px 8px;
-  background-color: #bbb;
+  background-color: var(--menu-header-background-color);
   font-weight: bold;
   letter-spacing: 1px;
   flex-grow: 0;
@@ -2712,6 +2889,10 @@
   margin-left: 0px;
 }
 
+.menu-pane-header a {
+  color: var(--control-link-foreground-color);
+}
+
 a.menu-pane-header-production {
   color: inherit;
 }
@@ -2758,8 +2939,9 @@
   margin: 5px 0 0 0;
   font-size: 1em;
   padding: 2px;
-  background-color: #bbb;
-  border: 1px solid #999;
+  color: var(--foreground-color);
+  background-color: var(--control-input-background-color);
+  border: 1px solid var(--control-input-border-color);
 }
 
 #menu-search-results {
@@ -2773,7 +2955,7 @@
   display: inline-block;
   text-align: right;
   padding-right: 1ex;
-  color: #666;
+  color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
 li.menu-search-result-op::before {
@@ -2782,7 +2964,7 @@
   display: inline-block;
   text-align: right;
   padding-right: 1ex;
-  color: #666;
+  color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
 
@@ -2792,7 +2974,7 @@
   display: inline-block;
   text-align: right;
   padding-right: 1ex;
-  color: #666;
+  color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
 
@@ -2802,7 +2984,7 @@
   display: inline-block;
   text-align: right;
   padding-right: 1ex;
-  color: #666;
+  color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
 
@@ -2831,9 +3013,9 @@
 }
 #menu-trace-list li::before {
   content: counter(item) ' ';
-  background-color: #222;
+  background-color: var(--menu-trace-list-background-color);
   counter-increment: item;
-  color: #999;
+  color: var(--menu-trace-list-foreground-color);
   width: 20px;
   height: 20px;
   line-height: 20px;
@@ -2899,9 +3081,9 @@
 
 .toolbox {
   position: relative;
-  background: #ddd;
-  border: 1px solid #aaa;
-  color: #eee;
+  background: var(--control-background-color);
+  border: 1px solid var(--control-border-color);
+  color: var(--control-foreground-color);
   padding: 5px 7px;
   border-radius: 3px;
 }
@@ -2929,14 +3111,14 @@
 }
 
 .toolbox::after {
-  border-color: rgba(0, 0, 0, 0);
-  border-top-color: #ddd;
+  border-color: var(--toolbox-tail-background-outside-color);
+  border-top-color: var(--control-background-color);
   border-width: 10px;
   margin-left: -10px;
 }
 .toolbox::before {
-  border-color: rgba(204, 204, 204, 0);
-  border-top-color: #aaa;
+  border-color: var(--toolbox-tail-border-outside-color);
+  border-top-color: var(--control-border-color);
   border-width: 12px;
   margin-left: -12px;
 }
@@ -2947,7 +3129,7 @@
   left: 0;
   right: 0;
   display: none;
-  background-color: #ddd;
+  background-color: var(--control-background-color);
   z-index: 1;
 }
 
@@ -2990,7 +3172,7 @@
 
 emu-normative-optional::before {
   display: block;
-  color: #884400;
+  color: var(--attributes-tag-foreground-color);
   content: "NORMATIVE OPTIONAL";
 }
 
@@ -2998,19 +3180,19 @@
 [normative-optional],
 [deprecated],
 [legacy] {
-  border-left: 5px solid #ff6600;
+  border-left: 5px solid var(--normative-optional-border-color);
   display: block;
   padding: 0.5em;
-  background: #ffeedd;
+  background: var(--normative-optional-background-color);
 }
 
 .attributes-tag {
   text-transform: uppercase;
-  color: #884400;
+  color: var(--attributes-tag-foreground-color);
 }
 
 .attributes-tag a {
-  color: #884400;
+  color: var(--attributes-tag-foreground-color);
 }
 
 /* Shortcuts help dialog */
@@ -3025,10 +3207,10 @@
   top: calc(5vw + 5vh);
   padding: 30px 90px;
   max-width: 500px;
-  outline: solid 10000px rgba(255, 255, 255, 0.6);
+  outline: solid 10000px var(--control-dialog-fade-color);
   border-radius: 5px;
   border-width: 1px 1px 0 1px;
-  background-color: #ddd;
+  background-color: var(--control-background-color);
   display: none;
 }
 
@@ -3049,9 +3231,13 @@
   padding: 3px 10px;
   border-radius: 3px;
   border-width: 1px 1px 0 1px;
-  border-color: #bbb;
-  background-color: #eee;
-  box-shadow: inset 0 -1px 0 #ccc;
+  border-color: var(--control-light-border-color);
+  background-color: var(--control-shortcut-background-color);
+  box-shadow: inset 0 -1px 0 var(--control-shortcut-shadow-color);
+}
+
+#ecma-logo {
+  background: var(--figure-background);
 }
 </style><style>@media print {
 @font-face {
@@ -3705,7 +3891,39 @@
   font-weight: normal;
 }
 
-}</style></head><body><div id="shortcuts-help">
+}</style><style>
+    @media print {
+      @page :left {
+        @bottom-right {
+          content: '© Ecma International 1997';
+        }
+      }
+      @page :right {
+        @bottom-left {
+          content: '© Ecma International 1997';
+        }
+      }
+      @page :first {
+        @bottom-left {
+          content: '';
+        }
+        @bottom-right {
+          content: '';
+        }
+      }
+      @page :blank {
+        @bottom-left {
+          content: '';
+        }
+        @bottom-right {
+          content: '';
+        }
+      }
+    }
+    </style><style>
+      @import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/base16/solarized-light.min.css");
+      @import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/a11y-dark.min.css") (prefers-color-scheme: dark);
+    </style></head><body><div id="shortcuts-help">
 <ul>
   <li><span>Toggle shortcuts help</span><code>?</code></li>
   <li><span>Toggle "can call user code" annotations</span><code>u</code></li>


Reviews:
user: login: michaelficarra
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-12T23:55:55Z
user: login: michaelficarra
body: LGTM
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-12T23:56:01Z
user: login: gesa
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-13T01:12:35Z

Review comments:
diff_hunk: @@ -1,3 +1,167 @@
+:root {
+  --foreground-color: #111;
+  --background-color: #fff;
+
+  --link-foreground-color: #206ca7;
+  --link-hover-foreground-color: #239dee;
+
+  --user-code-foreground-color: brown;
+
+  --var-foreground-color: #218379;
+
+  --referenced0-background-color: #ffff6c;
+  --referenced1-background-color: #ffa4a8;
+  --referenced2-background-color: #96e885;
+  --referenced3-background-color: #3eeed2;
+  --referenced4-background-color: #eacfb6;
+  --referenced5-background-color: #82ddff;
+  --referenced6-background-color: #ffbcf2;
+
+  --note-background-color: #e9fbe9;
+  --note-border-color: #52e052;
+  --note-editor-border-color: #faa;
+
+  --nt-link-foreground-color: #333;
+
+  --production-rhs-background-color: #f0f0f0;
+  --production-rhs-border-color: #888;
+
+  --params-foreground-color: #2aa198;
+  --opt-foreground-color: #b58900;
+
+  --title-foreground-color: #f60;
+
+  --caption-foreground-color: #555555;
+
+  --table-header-background-color: #eeeeee;
+
+  --highlight-background-color-start: rgba(249, 241, 172, 1);
+  --highlight-background-color-end: rgba(249, 241, 172, 0);
+
+  --highlight-background-color: rgba(249, 241, 172, 1);
+
+  --ins-background-color: #e0f8e0;
+  --ins-border-color: #396;
+
+  --del-background-color: #fee;
+
+  --control-foreground-color: #eee;
+  --control-dimmed-foreground-color: #666;
+  --control-background-color: #ddd;
+  --control-dark-background-color: #ccc;
+  --control-border-color: #aaa;
+  --control-light-border-color: #bbb;
+  --control-shortcut-background-color: #eee;
+  --control-shortcut-shadow-color: #ccc;
+  --control-dialog-fade-color: rgba(255, 255, 255, 0.6);
+
+  --control-link-foreground-color: #1567a2;
+
+  --control-input-background-color: #bbb;
+  --control-input-border-color: #999;
+
+  --menu-header-background-color: #bbb;
+  --menu-revealed-link-foreground-color: #206ca7;
+  --menu-unpin-hover-foreground-color: #bb1212;
+
+  --menu-trace-list-foreground-color: #999;
+  --menu-trace-list-background-color: #222;
+
+  --toolbox-tail-background-outside-color: rgba(0, 0, 0, 0);
+  --toolbox-tail-border-outside-color: rgba(204, 204, 204, 0);
+
+  --normative-optional-background-color: #ffeedd;
+  --normative-optional-border-color: #ff6600;
+
+  --attributes-tag-foreground-color: #884400;
+
+  --figure-background: #fff;
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
path: css/elements.css
user: login: michaelficarra
body: Should we also add a constraint for `screen` so that these styles don't apply to prints made when using dark mode?
created_at: 2025-03-12T23:55:55Z
author_association: MEMBER
diff_hunk: @@ -1,3 +1,167 @@
+:root {
+  --foreground-color: #111;
+  --background-color: #fff;
+
+  --link-foreground-color: #206ca7;
+  --link-hover-foreground-color: #239dee;
+
+  --user-code-foreground-color: brown;
+
+  --var-foreground-color: #218379;
+
+  --referenced0-background-color: #ffff6c;
+  --referenced1-background-color: #ffa4a8;
+  --referenced2-background-color: #96e885;
+  --referenced3-background-color: #3eeed2;
+  --referenced4-background-color: #eacfb6;
+  --referenced5-background-color: #82ddff;
+  --referenced6-background-color: #ffbcf2;
+
+  --note-background-color: #e9fbe9;
+  --note-border-color: #52e052;
+  --note-editor-border-color: #faa;
+
+  --nt-link-foreground-color: #333;
+
+  --production-rhs-background-color: #f0f0f0;
+  --production-rhs-border-color: #888;
+
+  --params-foreground-color: #2aa198;
+  --opt-foreground-color: #b58900;
+
+  --title-foreground-color: #f60;
+
+  --caption-foreground-color: #555555;
+
+  --table-header-background-color: #eeeeee;
+
+  --highlight-background-color-start: rgba(249, 241, 172, 1);
+  --highlight-background-color-end: rgba(249, 241, 172, 0);
+
+  --highlight-background-color: rgba(249, 241, 172, 1);
+
+  --ins-background-color: #e0f8e0;
+  --ins-border-color: #396;
+
+  --del-background-color: #fee;
+
+  --control-foreground-color: #eee;
+  --control-dimmed-foreground-color: #666;
+  --control-background-color: #ddd;
+  --control-dark-background-color: #ccc;
+  --control-border-color: #aaa;
+  --control-light-border-color: #bbb;
+  --control-shortcut-background-color: #eee;
+  --control-shortcut-shadow-color: #ccc;
+  --control-dialog-fade-color: rgba(255, 255, 255, 0.6);
+
+  --control-link-foreground-color: #1567a2;
+
+  --control-input-background-color: #bbb;
+  --control-input-border-color: #999;
+
+  --menu-header-background-color: #bbb;
+  --menu-revealed-link-foreground-color: #206ca7;
+  --menu-unpin-hover-foreground-color: #bb1212;
+
+  --menu-trace-list-foreground-color: #999;
+  --menu-trace-list-background-color: #222;
+
+  --toolbox-tail-background-outside-color: rgba(0, 0, 0, 0);
+  --toolbox-tail-border-outside-color: rgba(204, 204, 204, 0);
+
+  --normative-optional-background-color: #ffeedd;
+  --normative-optional-border-color: #ff6600;
+
+  --attributes-tag-foreground-color: #884400;
+
+  --figure-background: #fff;
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
path: css/elements.css
user: login: gesa
body: Yes. Better safe than frustrated down the line.
created_at: 2025-03-13T01:10:30Z
author_association: MEMBER

PR comments:
user: login: michaelficarra
created_at: 2025-01-28T00:23:27Z
body: We don't have a dark-mode Ecma logo, so for now that'll have to have a light background applied to it as well. My initial reaction is that the main document background is way too dark, creating eye-searing contrast with the body text. Why isn't it a similar tone to the left and bottom panes?

I'd like to see what an accessibility analysis says about this. Can you run Lighthouse (or some other accessibility tool) on the result, or host it on gh-pages so we can do it ourselves?
author_association: MEMBER
user: login: arai-a
created_at: 2025-01-28T01:21:47Z
body: > We don't have a dark-mode Ecma logo, so for now that'll have to have a light background applied to it as well.

Okay, I've added #fff background to it as well.

> My initial reaction is that the main document background is way too dark, creating eye-searing contrast with the body text. Why isn't it a similar tone to the left and bottom panes?

The color was just the opposite of the original color/background-color.
I've made the contrast almost same as GitHub's main text.

> I'd like to see what an accessibility analysis says about this. Can you run Lighthouse (or some other accessibility tool) on the result, or host it on gh-pages so we can do it ourselves?

Pushed the output to https://arai-a.github.io/ecmarkup/out/

I'll check the accessibility details.

author_association: CONTRIBUTOR
user: login: arai-a
created_at: 2025-01-30T14:54:44Z
body: I see several issues with the contrast in the accessibility details, such as the parameter with highlight, hljs highlight, note section, etc.  I'll address them to match the requirements and post update.
author_association: CONTRIBUTOR
user: login: arai-a
created_at: 2025-01-31T00:22:57Z
body: Fixed colors, so that at WCAG contrast score becomes AAA or AA for the most cases.
Also made the solarized CSS conditionally use the dark mode.

The output is available in: https://arai-a.github.io/ecmarkup/out/

author_association: CONTRIBUTOR
user: login: arai-a
created_at: 2025-02-01T06:48:52Z
body: Lighthouse seems not to be capable of handling the entire ECMAScript spec.  It reports the contrast issue but the list is empty.
So I've updated the Ecmarkup document to use the dark mode https://arai-a.github.io/ecmarkup/

The contrast issues are reported only against hljs text (code and commands in pre).
Those texts are now using the colors defined in `solarized-dark.min.css` instead of `solarized-light.min.css`, but apparently the color is too dark, in term of the accessibility.
Perhaps we should look for different color scheme for the code?
author_association: CONTRIBUTOR
user: login: arai-a
created_at: 2025-02-01T06:56:01Z
body: Added variant with a11y-dark theme for hljs
https://arai-a.github.io/ecmarkup/index-a11y.html

Lighthouse is still reporting issue with attribute (hljs-attr) color, but there's no other issue.
If this looks okay, I'll modify the patch to use it for dark mode.
author_association: CONTRIBUTOR
user: login: arai-a
created_at: 2025-03-13T02:53:34Z
body: Thank you for reviewing!
Can I have your opinion about the hljs text?
https://arai-a.github.io/ecmarkup/ (solarized-dark) vs https://arai-a.github.io/ecmarkup/index-a11y.html (a11y-dark)
The current PR uses solarized-dark.
author_association: CONTRIBUTOR
user: login: michaelficarra
created_at: 2025-03-13T14:56:50Z
body: They're both fine but I guess I would prefer `a11y-dark`.

**edit:** screenshots:

* `solarized-dark`
    <img width="747" alt="image" src="https://github.com/user-attachments/assets/6558662f-d5f2-4770-ba6b-0c2518c29b4e" />
* `a11y-dark`
    <img width="747" alt="image" src="https://github.com/user-attachments/assets/27df615e-f904-4b74-9aaf-8227fecd519c" />

author_association: MEMBER
user: login: arai-a
created_at: 2025-03-13T15:27:26Z
body: Thanks!  Applied a11y-dark, and also rebased to latest upstream, and applied the darkmode also to the newly added `emu-normative-optional::before`.
author_association: CONTRIBUTOR