From 3e88084542c7294f2f5cb419fe0ce81b30f0c5f2 Mon Sep 17 00:00:00 2001
From: Cody <cody@dkdc.dev>
Date: Sat, 4 Apr 2026 03:30:19 -0400
Subject: [PATCH] fix(theme): prevent FOUC with blocking stylesheet injection

Use document.write to inject the stylesheet link in a blocking <script>
so the correct theme CSS loads before the page renders. Matches the
zorto v0.16.0 built-in theme fix.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 templates/base.html | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 7db3d65..b5c91c9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -6,18 +6,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="robots" content="noodp"/>
 
-    <link rel="stylesheet" href="/style.css">
-
     <script>
-      // Prevent flash of wrong theme
       (function() {
-        const saved = localStorage.getItem('theme');
-        const preferLight = window.matchMedia('(prefers-color-scheme: light)').matches;
+        var saved = localStorage.getItem('theme');
+        var preferLight = window.matchMedia('(prefers-color-scheme: light)').matches;
         if (saved === 'light' || (!saved && preferLight)) {
           document.documentElement.setAttribute('data-theme', 'light');
         }
+        document.write('<link rel="stylesheet" href="/style.css" id="theme-stylesheet">');
       })();
     </script>
+    <noscript><link rel="stylesheet" href="/style.css" id="theme-stylesheet"></noscript>
 
     {%- if config.markdown.highlight_code and config.markdown.highlight_theme == "css" %}
     <link rel="stylesheet" href="/syntax-dark.css">