diff --git a/test/baselines/generated-reference/assets-inline.html b/test/baselines/generated-reference/assets-inline.html
index 4f72c8ee..f7fe8c3d 100644
--- a/test/baselines/generated-reference/assets-inline.html
+++ b/test/baselines/generated-reference/assets-inline.html
@@ -1607,7 +1607,167 @@
 
 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 & 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><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/base16/solarized-light.min.css"><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-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) {
+: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: #9c9c1d;
+  --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: #223c22;
+  --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: #404040;
+
+  --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: #303030;
+  --control-dark-background-color: #505050;
+  --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-unpin-hover-foreground-color: #e77373;
+
+  --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: #b9824b;
+
+  --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 +1860,7 @@
 }
 
 html {
-  background-color: #fff;
+  background-color: var(--background-color);
 }
 
 body {
@@ -1714,7 +1874,7 @@
   font-variant-numeric: slashed-zero;
   padding: 0;
   margin: 0;
-  color: #111;
+  color: var(--foreground-color);
 }
 
 #spec-container {
@@ -1739,16 +1899,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,
@@ -1759,9 +1919,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;
@@ -1776,8 +1936,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,
@@ -1804,7 +1964,7 @@
 }
 
 pre code.hljs {
-  background-color: #fff;
+  background-color: var(--background-color);
   margin: 0;
   padding: 0;
 }
@@ -1821,13 +1981,22 @@
 
 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 (prefers-color-scheme: dark) {
+var {
+  mix-blend-mode: normal;
+}
+}
+}
+
 var.field {
   font: inherit;
   color: inherit;
@@ -1842,25 +2011,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 {
@@ -1933,8 +2102,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;
 }
@@ -1948,7 +2117,7 @@
 }
 
 emu-note[type='editor'] {
-  border-left-color: #faa;
+  border-left-color: var(--note-editor-border-color);
 }
 
 emu-note > div.note-contents {
@@ -2057,7 +2226,7 @@
 
 emu-nt a,
 emu-nt a:visited {
-  color: #333;
+  color: var(--nt-link-foreground-color);
 }
 
 emu-rhs emu-nt {
@@ -2089,8 +2258,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 {
@@ -2110,11 +2279,11 @@
 
 emu-params,
 emu-constraints {
-  color: #2aa198;
+  color: var(--params-foreground-color);
 }
 
 emu-opt {
-  color: #b58900;
+  color: var(--opt-foreground-color);
 }
 
 emu-gprose {
@@ -2129,18 +2298,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,
@@ -2357,10 +2526,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;
@@ -2375,18 +2547,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);
 }
 
 /* Note: the left content edges of table.lightweight-table >tbody >tr >td
@@ -2406,10 +2578,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) {
@@ -2417,18 +2589,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,
@@ -2449,11 +2621,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 */
@@ -2467,8 +2639,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;
@@ -2489,14 +2661,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;
 }
@@ -2509,7 +2681,7 @@
 }
 
 #menu a {
-  color: #1567a2;
+  color: var(--control-link-foreground-color);
 }
 
 #menu.active {
@@ -2529,7 +2701,7 @@
 
 #menu-pins .unpin-all {
   border: none;
-  background: #ccc;
+  background: var(--control-dark-background-color);
   border-radius: 4px;
   height: 18px;
   font-size: 12px;
@@ -2537,7 +2709,7 @@
   font-family: IBM Plex Sans;
 }
 #menu-pins .unpin-all:hover {
-  background: #ddd;
+  background: var(--control-background-color);
 }
 
 #menu-pins-list {
@@ -2571,16 +2743,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 {
@@ -2657,12 +2830,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(--link-foreground-color);
 }
 
 #menu-toc li.revealed > ol {
@@ -2679,7 +2852,7 @@
 
 .menu-pane-header {
   padding: 2px 8px;
-  background-color: #bbb;
+  background-color: var(--control-light-border-color);
   font-weight: bold;
   letter-spacing: 1px;
   flex-grow: 0;
@@ -2752,8 +2925,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 {
@@ -2767,7 +2941,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 {
@@ -2776,7 +2950,7 @@
   display: inline-block;
   text-align: right;
   padding-right: 1ex;
-  color: #666;
+  color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
 
@@ -2786,7 +2960,7 @@
   display: inline-block;
   text-align: right;
   padding-right: 1ex;
-  color: #666;
+  color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
 
@@ -2796,7 +2970,7 @@
   display: inline-block;
   text-align: right;
   padding-right: 1ex;
-  color: #666;
+  color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
 
@@ -2825,9 +2999,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;
@@ -2893,9 +3067,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;
 }
@@ -2923,14 +3097,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;
 }
@@ -2941,7 +3115,7 @@
   left: 0;
   right: 0;
   display: none;
-  background-color: #ddd;
+  background-color: var(--control-background-color);
   z-index: 1;
 }
 
@@ -2985,18 +3159,18 @@
 [normative-optional],
 [deprecated],
 [legacy] {
-  border-left: 5px solid #ff6600;
+  border-left: 5px solid var(--normative-optional-border-color);
   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 */
@@ -3011,10 +3185,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;
 }
 
@@ -3035,9 +3209,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 {
 body {
@@ -3307,4 +3485,4 @@ <h2>Software License</h2>
 
 <p>THIS SOFTWARE IS PROVIDED BY THE ECMA INTERNATIONAL "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL ECMA INTERNATIONAL BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p>
 
-    </emu-annex></div></body>
\ No newline at end of file
+    </emu-annex></div></body>