Refactor history page loading indicator

cursoragent · noisysocks · cursoragent · commit 6d107be1afa7 · 2025-12-04T00:20:02.000Z
Co-authored-by: randerson &lt;randerson@duckduckgo.com&gt;
diff --git a/special-pages/pages/history/public/index.html b/special-pages/pages/history/public/index.html
@@ -2,12 +2,24 @@
 <html lang="en">
 <head>
     <style>
-        body {
-            /* Token is replaced by native browser so background isn't white while History initializes */
-            --loading-color: $LOADING_COLOR$;
-            background: var(--loading-color);
+        html, body {
+            background: #fafafa;
+        }
+        @media screen and (prefers-color-scheme: dark) {
+            html, body {
+                background: #333;
+            }
         }
     </style>
+    <script>
+        // $LOADING_COLOR$ is replaced by native via string interpolation.
+        // This script must be in <head> to block rendering and prevent flash of wrong color.
+        const loadingColor = "$LOADING_COLOR$";
+        const hasLoadingColor = !!loadingColor && !loadingColor.startsWith("$");
+        if (hasLoadingColor) {
+            document.documentElement.style.background = loadingColor;
+        }
+    </script>
     <title>History</title>
     <meta name="robots" content="noindex,nofollow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
