diff --git a/bikeshed/refs/refhints.css b/bikeshed/refs/refhints.css
index f6f61e2ba2..31570c554f 100644
--- a/bikeshed/refs/refhints.css
+++ b/bikeshed/refs/refhints.css
@@ -1,3 +1,14 @@
+:root {
+    --ref-hint-bg: #ddd;
+    --ref-hint-text: var(--text);
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --ref-hint-bg: #222;
+        --ref-hint-text: var(--text);
+    }
+}
+
 .ref-hint {
     display: none;
     position: absolute;
@@ -7,10 +18,10 @@
     height: auto;
     max-height: 500px;
     overflow: auto;
-    padding: 0.5em 0.75em;
+    padding: 0.5em 0.5em;
     font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
-    background: var(--dfnpanel-bg);
-    color: var(--dfnpanel-text);
+    background: var(--ref-hint-bg);
+    color: var(--ref-hint-text);
     border: outset 0.2em;
     white-space: normal; /* in case it's moved into a pre */
 }
diff --git a/bikeshed/refs/refhints.js b/bikeshed/refs/refhints.js
index a0e03c49ec..ae45e2af28 100644
--- a/bikeshed/refs/refhints.js
+++ b/bikeshed/refs/refhints.js
@@ -64,15 +64,6 @@
         refHint.classList.remove("on");
     }
 
-    document.addEventListener("DOMContentLoaded", ()=>{
-        genAllRefHints();
-
-        document.body.addEventListener("click", (e) => {
-            // If not handled already, just hide all link panels.
-            hideAllRefHints();
-        });
-    })
-
     function showRefHint(refHint) {
         hideAllRefHints(); // Only display one at this time.
 
@@ -138,8 +129,17 @@
         });
     }
 
+    document.addEventListener("DOMContentLoaded", () => {
+        genAllRefHints();
+
+        document.body.addEventListener("click", (e) => {
+            // If not handled already, just hide all link panels.
+            hideAllRefHints();
+        });
+    });
+
     window.addEventListener("resize", () => {
         // Hide any open ref hint.
         hideAllRefHints();
-    })
+    });
 }
diff --git a/tests/github/w3c/csswg-drafts/css-align-3/Overview.html b/tests/github/w3c/csswg-drafts/css-align-3/Overview.html
index f65d7deb79..1ece52c40d 100644
--- a/tests/github/w3c/csswg-drafts/css-align-3/Overview.html
+++ b/tests/github/w3c/csswg-drafts/css-align-3/Overview.html
@@ -5,10 +5,10 @@
   <title>CSS Box Alignment Module Level 3</title>
   <meta content="ED" name="w3c-status">
   <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet">
-  <meta content="Bikeshed version f418d956e, updated Thu Oct 26 14:46:14 2023 -0700" name="generator">
+  <meta content="Bikeshed version d8fbaa7a2, updated Wed Nov 8 01:07:24 2023 +0000" name="generator">
   <link href="https://www.w3.org/TR/css-align-3/" rel="canonical">
   <link href="https://drafts.csswg.org/csslogo.ico" rel="icon">
-  <meta content="f418d956e3daf70cc405e8e1870948ee0e42be4b" name="document-revision">
+  <meta content="d8fbaa7a29d92a76ba41a299827449defdad0a71" name="document-revision">
 <style>
 .issue th:first-child { text-align: left !important; }
 [rowspan] > img { float: right; }
@@ -728,6 +728,17 @@
 }
 </style>
 <style>/* Boilerplate: style-ref-hints */
+:root {
+    --ref-hint-bg: #ddd;
+    --ref-hint-text: var(--text);
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --ref-hint-bg: #222;
+        --ref-hint-text: var(--text);
+    }
+}
+
 .ref-hint {
     display: none;
     position: absolute;
@@ -737,10 +748,10 @@
     height: auto;
     max-height: 500px;
     overflow: auto;
-    padding: 0.5em 0.75em;
+    padding: 0.5em 0.5em;
     font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
-    background: var(--dfnpanel-bg);
-    color: var(--dfnpanel-text);
+    background: var(--ref-hint-bg);
+    color: var(--ref-hint-text);
     border: outset 0.2em;
     white-space: normal; /* in case it's moved into a pre */
 }