diff --git a/static/theme.js b/static/theme.js
new file mode 100644
index 0000000..08adda2
--- /dev/null
+++ b/static/theme.js
@@ -0,0 +1,13 @@
+// Applies the saved (or system-preferred) theme before first paint, so it is
+// in place before the stylesheet renders and there is no flash of the wrong
+// theme. Kept in a static file rather than inline so the strict page CSP
+// (script-src 'self') allows it. app.js handles switching and persistence.
+(function () {
+  try {
+    var t = localStorage.getItem("theme");
+    if (t !== "light" && t !== "dark") {
+      t = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    document.documentElement.setAttribute("data-theme", t);
+  } catch (e) { /* private mode / storage disabled: fall back to CSS default */ }
+})();
diff --git a/templates/master.tmpl b/templates/master.tmpl
index 6622685..710a40e 100644
--- a/templates/master.tmpl
+++ b/templates/master.tmpl
@@ -9,7 +9,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title><%= title %> &middot; git</title>
-<script>(function(){try{var t=localStorage.getItem("theme");if(t!=="light"&&t!=="dark")t=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";document.documentElement.setAttribute("data-theme",t);}catch(e){}})();</script>
+<script src="/static/theme.js"></script>
 <link rel="stylesheet" href="/static/highlight.css">
 <link rel="stylesheet" href="/static/style.css">
 </head>