From 5647a06d64bf2429522ada3b5bd841ea3b42073e Mon Sep 17 00:00:00 2001
From: Remo Senekowitsch <remo@buenzli.dev>
Date: Thu, 26 Dec 2024 15:00:33 +0100
Subject: [PATCH] Eliminate theme flicker on reload

---
 static/scripts/theme-switch-post.js | 11 +++++++++++
 static/scripts/theme-switch.js      |  6 ------
 templates/headers.hbs               |  3 +++
 templates/nav.hbs                   |  2 +-
 4 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 static/scripts/theme-switch-post.js

diff --git a/static/scripts/theme-switch-post.js b/static/scripts/theme-switch-post.js
new file mode 100644
index 000000000..1516fd44f
--- /dev/null
+++ b/static/scripts/theme-switch-post.js
@@ -0,0 +1,11 @@
+"use strict";
+
+// The regular theme-switch.js script runs in the header and blocks the initial
+// page render to prevent flickering. The following code cannot run as part of
+// that, because the page must have been rendered first.
+
+// close the theme dropdown if clicking somewhere else
+document.querySelector('.theme-icon').onblur = handleBlur;
+
+// show the theme selector only if JavaScript is enabled/available
+document.querySelector('.theme-icon').style.display = 'block';
diff --git a/static/scripts/theme-switch.js b/static/scripts/theme-switch.js
index b8ffcd7a7..65c6a539e 100644
--- a/static/scripts/theme-switch.js
+++ b/static/scripts/theme-switch.js
@@ -60,9 +60,6 @@ function setThemeToSystemPref() {
     }
 }
 
-// close the theme dropdown if clicking somewhere else
-document.querySelector('.theme-icon').onblur = handleBlur;
-
 // Check for saved user preference on load, else check and save user agent prefs
 let savedTheme = null;
 if (storageAvailable("localStorage")) {
@@ -73,6 +70,3 @@ if (savedTheme) {
 } else {
     setThemeToSystemPref();
 }
-
-// show the theme selector only if JavaScript is enabled/available
-document.querySelector('.theme-icon').style.display = 'block';
diff --git a/templates/headers.hbs b/templates/headers.hbs
index fb4b824ae..11ce5c927 100644
--- a/templates/headers.hbs
+++ b/templates/headers.hbs
@@ -36,3 +36,6 @@
 
  <!-- atom -->
  <link type="application/atom+xml" rel="alternate" href="https://blog.rust-lang.org/{{blog.prefix}}feed.xml" title="{{blog.title}}" />
+
+<!-- theme switcher -->
+<script src="{{root}}scripts/theme-switch.js"></script>
diff --git a/templates/nav.hbs b/templates/nav.hbs
index 2ce3c2101..317c1fa41 100644
--- a/templates/nav.hbs
+++ b/templates/nav.hbs
@@ -20,6 +20,6 @@
         <li class="theme-item" onclick="changeThemeTo('system');">System</li>
       </ul>
     </button>
-    <script src="{{root}}scripts/theme-switch.js"></script>
+    <script src="{{root}}scripts/theme-switch-post.js"></script>
   </ul>
 </nav>