From b1c459c226444fa992f4b01c58d997e27c293926 Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Tue, 10 Dec 2024 11:06:35 -0500 Subject: [PATCH] fix fouc for default theme --- docs/_includes/base.njk | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index 5e7fd508f..f45b7ce7b 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -58,10 +58,24 @@ return colorScheme === 'dark'; } - const stylesheet = document.getElementById("theme-stylesheet") - let preset = getPresetTheme() + const oldStylesheet = document.querySelector("#theme-stylesheet") - stylesheet.href = `/dist/themes/${preset}.css` + const newStylesheet = document.createElement("link") + + let preset = getPresetTheme() + newStylesheet.href = `/dist/themes/${preset}.css` + newStylesheet.rel = "preload" + newStylesheet.as = "style" + + document.head.append(newStylesheet) + + function updateStylesheet () { + newStylesheet.rel = "stylesheet" + newStylesheet.id = "theme-stylesheet" + requestAnimationFrame(() => oldStylesheet.remove()) + } + + newStylesheet.addEventListener("load", updateStylesheet) document.documentElement.classList.toggle( `wa-theme-${preset}-dark`,