diff --git a/index.html b/index.html
index c1d3e34..d89aade 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Sarlink Portal" />
     <title>SAR Link Portal</title>
+    <script>
+      // Set theme BEFORE first paint to avoid a flash of white.
+      // The white flash is the browser's default canvas, shown before CSS
+      // paints (paint is delayed by the render-blocking font stylesheet).
+      // `color-scheme` controls that pre-paint canvas, so setting it here —
+      // synchronously, before the font <link> below can block — fixes it.
+      // Mirrors next-themes ("theme" key; falls back to system preference).
+      (function () {
+        try {
+          var stored = localStorage.getItem("theme");
+          var isDark =
+            stored === "dark" ||
+            ((!stored || stored === "system") &&
+              window.matchMedia("(prefers-color-scheme: dark)").matches);
+          var root = document.documentElement;
+          root.classList.toggle("dark", isDark);
+          root.style.colorScheme = isDark ? "dark" : "light";
+        } catch (e) {}
+      })();
+    </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
diff --git a/src/index.css b/src/index.css
index ab20f75..aecd873 100644
--- a/src/index.css
+++ b/src/index.css
@@ -94,6 +94,7 @@
 }
 
 :root {
+	color-scheme: light;
 	--radius: 0.625rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.145 0 0);
@@ -129,6 +130,7 @@
 }
 
 .dark {
+	color-scheme: dark;
 	--background: oklch(0.145 0 0);
 	--foreground: oklch(0.985 0 0);
 	--card: oklch(0.205 0 0);