Match system color scheme at page load

Add a synchronous head script to the compliance portal that sets the .dark class on <html> when the OS prefers a dark scheme, so the v2 Radix theme resolves to dark values before first paint with no flash. Declare a color-scheme meta so native UI matches the active scheme. Signed-off-by: Émile Ré <emile@probo.com>
2026-06-28 14:12:37 +02:00
parent f53736e352
commit 8bfcabd58d
1 changed files with 10 additions and 0 deletions
--- a/apps/compliance-portal/index.html
+++ b/apps/compliance-portal/index.html
@@ -12,6 +12,16 @@
    })();
  </script>

+  <script>
+    (function () {
+      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        document.documentElement.classList.add("dark");
+      }
+    })();
+  </script>
+
+  <meta name="color-scheme" content="light dark" />
+
  <link rel="icon" id="favicon" href="{{if .FaviconURL}}{{.FaviconURL}}{{else}}/favicons/favicon.ico{{end}}">

  <meta name="application-name" content="&nbsp;" />