Moved initial theme setting to head script to prevent white flash on …

…page change
skaut · Nov 25, 2023 · a975fa6 · a975fa6
1 parent 423e704
commit a975fa6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/app/templates/@layout.latte b/app/templates/@layout.latte
@@ -7,6 +7,16 @@
     <meta name="author" content="">
     <link rel="icon" href="/favicon.ico">
 
+    <script n:syntax="off">
+        if ("theme" in localStorage) {
+            document.documentElement.setAttribute("data-bs-theme", localStorage.theme);
+        } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            document.documentElement.setAttribute("data-bs-theme", "dark");
+        } else {
+            document.documentElement.setAttribute("data-bs-theme", "light");
+        }
+    </script>
+
     {if $productionMode}
         <script n:syntax="off">
             ga = function (){ga.q.push(arguments)};

diff --git a/frontend/DarkModeToggle.ts b/frontend/DarkModeToggle.ts
@@ -8,13 +8,7 @@ export class DarkModeToggle {
             this.setTheme(document.documentElement.dataset.bsTheme === "dark" ? "light" : "dark");
         };
 
-        if ("theme" in localStorage) {
-            this.setTheme(localStorage.theme);
-        } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-            this.setTheme("dark");
-        } else {
-            this.setTheme("light");
-        }
+        this.setTheme(document.documentElement.dataset.bsTheme as "dark"|"light"|undefined ?? "light");
     }
 
     private setTheme(theme: "dark"|"light"): void {