diff --git a/index.html b/index.html
index a98ae0d..6eac48d 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,9 @@
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; script-src 'self' https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self' https://cloudflareinsights.com; worker-src 'self' blob:; object-src 'none'; base-uri 'self'; form-action 'none'"
     />
+    <!-- Set the saved theme on <html> before first paint so a reload doesn't flash
+         the default dark theme. Same-origin, so covered by script-src 'self'. -->
+    <script src="/theme-init.js"></script>
     <title>Cave Survey Viewer</title>
     <meta name="google-site-verification" content="yhJBw46UtDk7-YZn_gDqYoYJpHEHPOMHRE065-Nohf4" />
     <!-- Favicons: SVG first so capable browsers render a sharp, scalable icon;
diff --git a/public/theme-init.js b/public/theme-init.js
new file mode 100644
index 0000000..573f6a5
--- /dev/null
+++ b/public/theme-init.js
@@ -0,0 +1,9 @@
+// Apply the saved colour theme before first paint so a light-mode reload doesn't
+// flash the default (dark) theme. Loaded as a blocking <script> in <head>, ahead
+// of the deferred app bundle which runs too late. Mirrors THEME_KEY in main.ts.
+try {
+  var theme = localStorage.getItem("cv.theme") === "light" ? "light" : "dark";
+  document.documentElement.setAttribute("data-theme", theme);
+} catch (e) {
+  /* localStorage unavailable (e.g. blocked cookies) — fall back to the CSS default. */
+}
