Settle the theme and header before the first paint

1 file changed, 21 insertions, 10 deletions

diff --git a/assets/cgit.js b/assets/cgit.js
index 6fe53ba..f3fedc1 100644
--- a/assets/cgit.js
+++ b/assets/cgit.js
@@ -160,36 +160,47 @@ function persist(value) {
 	try { localStorage.setItem(KEY, value); } catch (e) { }
 }
 
-function apply(theme, root, btn) {
+function apply(theme, btn) {
+	var html = document.documentElement;
 	if (theme === "auto")
-		root.removeAttribute("data-theme");
+		html.removeAttribute("data-theme");
 	else
-		root.setAttribute("data-theme", theme);
+		html.setAttribute("data-theme", theme);
 	/* Keep the standalone page background in sync with the choice. */
-	document.documentElement.style.colorScheme = (theme === "auto") ? "" : theme;
+	html.style.colorScheme = (theme === "auto") ? "" : theme;
 	if (btn) {
 		btn.innerHTML = ICONS[theme];
 		btn.title = "Colour theme: " + theme;
 	}
 }
 
+var theme = saved();
+if (ORDER.indexOf(theme) < 0)
+	theme = "auto";
+
+/* Settled here rather than on DOMContentLoaded. This file is fetched from
+ * <head> and runs before the body is parsed, so the choice lands on <html>
+ * ahead of the first paint and the page never shows the other theme first.
+ * The marker sits on <html> for the same reason, since div#cgit does not
+ * exist yet. cgit-js reserves the toggle's column so revealing the button
+ * below does not shift the header. */
+apply(theme, null);
+document.documentElement.classList.add("cgit-js");
+
 document.addEventListener("DOMContentLoaded", function () {
 	var root = document.getElementById("cgit");
 	if (!root)
 		return;
 	var btn = root.querySelector(".theme-toggle");
-	var theme = saved();
-	if (ORDER.indexOf(theme) < 0)
-		theme = "auto";
-
-	apply(theme, root, btn);
 	if (!btn)
 		return;
+
+	apply(theme, btn);
 	btn.hidden = false;
 	btn.addEventListener("click", function () {
 		theme = ORDER[(ORDER.indexOf(theme) + 1) % ORDER.length];
 		persist(theme);
-		apply(theme, root, btn);
+		apply(theme, btn);
 	});
 }, false);