From eeec3e440df1dc966fd401cf76b00cba92ddcb8f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 29 Oct 2025 19:00:03 +0200
Subject: [PATCH] fix(share): flash while theme is loading

---
 .../share-theme/src/scripts/modules/theme.ts  | 26 +++++--------------
 packages/share-theme/src/styles/index.css     |  4 +--
 packages/share-theme/src/templates/page.ejs   |  7 +++++
 3 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/packages/share-theme/src/scripts/modules/theme.ts b/packages/share-theme/src/scripts/modules/theme.ts
index 36e7585ba..16ae943af 100644
--- a/packages/share-theme/src/scripts/modules/theme.ts
+++ b/packages/share-theme/src/scripts/modules/theme.ts
@@ -1,12 +1,11 @@
-const themeToLoad = getThemeToLoad();
-setTheme(themeToLoad);
+const themeRootEl = document.documentElement;
 
 export default function setupThemeSelector() {
     const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!;
 
     const themeSelection: HTMLDivElement = document.querySelector(".theme-selection")!;
     themeSelection.classList.add("no-transition");
-    themeSwitch.checked = (themeToLoad === "dark");
+    themeSwitch.checked = (themeRootEl.classList.contains("theme-dark"));
     setTimeout(() => themeSelection.classList.remove("no-transition"), 400);
 
     themeSwitch?.addEventListener("change", () => {
@@ -18,23 +17,10 @@ export default function setupThemeSelector() {
 
 function setTheme(theme: string) {
     if (theme === "dark") {
-        document.body.classList.add("theme-dark");
-        document.body.classList.remove("theme-light");
+        themeRootEl.classList.add("theme-dark");
+        themeRootEl.classList.remove("theme-light");
     } else {
-        document.body.classList.remove("theme-dark");
-        document.body.classList.add("theme-light");
-    }
-}
-
-function getThemeToLoad() {
-    const storedTheme = localStorage.getItem("theme");
-    if (storedTheme) {
-        // Respect user's choice if one has already been made.
-        return storedTheme;
-    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        // Fallback to browser's color preference otherwise.
-        return "dark";
-    } else {
-        return "light";
+        themeRootEl.classList.remove("theme-dark");
+        themeRootEl.classList.add("theme-light");
     }
 }
diff --git a/packages/share-theme/src/styles/index.css b/packages/share-theme/src/styles/index.css
index 9df418009..1a4438b91 100644
--- a/packages/share-theme/src/styles/index.css
+++ b/packages/share-theme/src/styles/index.css
@@ -30,7 +30,7 @@ Accent Color Ideas
   --text-link: #FFB628;
 */
 
-body.theme-light {
+html.theme-light {
     --background-primary: #FFFFFF;
     --background-secondary: #F3F3F3;
     --background-highlight: #DDDDDD;
@@ -42,7 +42,7 @@ body.theme-light {
     color-scheme: light;
 }
 
-body.theme-dark {
+html.theme-dark {
     --background-primary: #333333;
     --background-secondary: #1F1F1F;
     --background-highlight: #484848;
diff --git a/packages/share-theme/src/templates/page.ejs b/packages/share-theme/src/templates/page.ejs
index 26f35f538..78ab2666d 100644
--- a/packages/share-theme/src/templates/page.ejs
+++ b/packages/share-theme/src/templates/page.ejs
@@ -55,6 +55,13 @@
     %>
     <title><%= pageTitle %></title>
     <script>
+        // Load dark/light theme as soon as possible to avoid color flashes.
+        let theme = localStorage.getItem("theme");
+        if (!theme) {
+            theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
+        }
+        document.documentElement.classList.add(`theme-${theme}`);
+
         window.glob = {
             isStatic: <%= !!isStatic %>
         };