docs: avoid FOUC for theme

carbon-design-system · Dec 13, 2023 · 35d84e3 · 35d84e3
1 parent d099e74
commit 35d84e3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/docs/src/components/index.svelte b/docs/src/components/index.svelte
@@ -1,5 +1,4 @@
 <script>
-  import "carbon-components-svelte/css/all.css";
   import {
     ClickableTile,
     Search,

diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import "carbon-components-svelte/css/all.css";
 import Home from "../components/index.svelte";
 ---
 
@@ -12,8 +13,17 @@ import Home from "../components/index.svelte";
       content="Carbon Design System pictograms as Svelte components"
     />
     <title>Carbon Pictograms Svelte</title>
+    <script is:inline>
+      try {
+        const theme = localStorage.getItem("theme");
+
+        if (["white", "g10", "g80", "g90", "g100"].includes(theme)) {
+          document.documentElement.setAttribute("theme", theme);
+        }
+      } catch (e) {}
+    </script>
   </head>
   <body>
-    <Home client:load />
+    <Home client:idle />
   </body>
 </html>