Fix flickering on app load due to theme being loaded later

rudolfs · rudolfs · commit 6017c191a9f6 · 2024-09-06T15:51:09.000+02:00
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.
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" />
