diff --git a/frontend/index.html b/frontend/index.html
index 9af5be8f..0e9b724a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -39,9 +39,9 @@
     <meta name="twitter:description" content="${BRAND_DESCRIPTION}" />
 
     <!-- Pre-React theme bootstrap (#358).
-         The browser may paint the very first frame before our inline
-         <script> below runs, so we set OS-preference defaults via CSS
-         here in <head> — that gets applied before any paint. The
+         The browser may paint the very first frame before the bootstrap
+         <script> below fetches and runs, so we set OS-preference defaults
+         via CSS here in <head> — that gets applied before any paint. The
          script then layers a per-gallery cache hit on top when one is
          available. Without this CSS, the very first frame on first-
          visit dark-OS devices flashed white briefly (see Rekoo-PS's
@@ -56,31 +56,11 @@
       html { transition: background-color 200ms ease; }
     </style>
 
-    <script>
-      /*
-       * Pre-React theme bootstrap (#358).
-       *
-       * The CSS @media block above handles the OS-preference default
-       * before paint. This script then applies a per-gallery cached
-       * background (written by ThemeContext on the previous visit) so
-       * revisits land on the exact theme background from frame one.
-       */
-      (function () {
-        try {
-          var m = location.pathname.match(/\/gallery\/([^\/?#]+)/);
-          var bg = null;
-          if (m && m[1]) {
-            bg = localStorage.getItem('gallery-theme-bg-' + decodeURIComponent(m[1]));
-          }
-          if (bg) {
-            var root = document.documentElement;
-            root.style.backgroundColor = bg;
-            document.body && (document.body.style.backgroundColor = bg);
-            root.style.setProperty('--color-background', bg);
-          }
-        } catch (e) { /* never block render on a cache miss */ }
-      })();
-    </script>
+    <!-- Pre-React theme bootstrap (#358). External rather than inline so a
+         strict CSP without 'unsafe-inline' / hash / nonce — like the one
+         Caddy puts in front of demo.picpeak.app — doesn't block it (#564).
+         No defer/async: must run before <body> paints. -->
+    <script src="/bootstrap.js"></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/public/bootstrap.js b/frontend/public/bootstrap.js
new file mode 100644
index 00000000..f40e14b2
--- /dev/null
+++ b/frontend/public/bootstrap.js
@@ -0,0 +1,32 @@
+/*
+ * Pre-React theme bootstrap (#358).
+ *
+ * Loaded as an external script (rather than inline) so a strict CSP
+ * with no 'unsafe-inline' / hash / nonce — like the one Caddy puts in
+ * front of demo.picpeak.app — does not block it (#564).
+ *
+ * Reads the per-gallery cached background written by ThemeContext on
+ * the previous visit and applies it before React mounts, so revisits
+ * land on the right colour from the first frame. The OS-preference
+ * default is already handled by the @media CSS in index.html for
+ * first-visit / cache-miss callers.
+ *
+ * Placed in /public so vite copies it to /bootstrap.js at build time
+ * (same pipeline as /favicon-32x32.png). Kept in <head> without
+ * defer/async so it runs before <body> paints.
+ */
+(function () {
+  try {
+    var m = location.pathname.match(/\/gallery\/([^\/?#]+)/);
+    var bg = null;
+    if (m && m[1]) {
+      bg = localStorage.getItem('gallery-theme-bg-' + decodeURIComponent(m[1]));
+    }
+    if (bg) {
+      var root = document.documentElement;
+      root.style.backgroundColor = bg;
+      document.body && (document.body.style.backgroundColor = bg);
+      root.style.setProperty('--color-background', bg);
+    }
+  } catch (e) { /* never block render on a cache miss */ }
+})();
