From 6017c191a9f6b62a03075970dcaf73be6d86ee26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Fri, 6 Sep 2024 15:51:09 +0200
Subject: [PATCH] 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.
---
 index.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/index.html b/index.html
index f4f40c219..14ee21253 100644
--- 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" />