From 654cd0b0bdf1ee3233bca5194e5cee6ba3c91dd8 Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Tue, 10 Dec 2024 10:03:20 -0500
Subject: [PATCH 1/2] set a default theme

---
 docs/_includes/base.njk | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index 685927375..5e7fd508f 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -31,7 +31,7 @@
 
     {# Web Awesome #}
     <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" />
+    <link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
     <link rel="stylesheet" href="/dist/themes/applied.css" />
     <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
     <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />

From b1c459c226444fa992f4b01c58d997e27c293926 Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Tue, 10 Dec 2024 11:06:35 -0500
Subject: [PATCH 2/2] 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`,