Fix flickering on app load due to theme being loaded later

We read the theme before any of the svelte code is loaded. The benefit is that it is executed first and there's no flickering if the stored theme differs from the initial theme that is set in the design system. The drawback is that this code isn't type-checked and will need to be updated manually if we change the theme switching code in Svelte.
radicle-dev · Sep 6, 2024 · 6017c19 · 6017c19
1 parent 560891d
commit 6017c19
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,12 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <script>
+      // Avoid flickering on app start.
+      if (localStorage.getItem("theme") === "dark") {
+        document.documentElement.setAttribute("data-theme", "dark");
+      }
+    </script>
     <meta charset="UTF-8" />
     <link rel="icon" href="/radicle.svg" type="image/svg+xml" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />