Merge pull request #1450 from rust-lang/senekor/zkymkzrurmtr

Eliminate theme flicker on reload

Author: senekor

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';

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';

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>

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>