Fix ThemeSwitch SSR behavior by using dark class to define position…

…ing and icon display (#228)
techniq · Feb 6, 2024 · 5f9fa2a · 5f9fa2a
1 parent 1a62ad0
commit 5f9fa2a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/.changeset/nice-cats-know.md b/.changeset/nice-cats-know.md
@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+Fix ThemeSwitch SSR behavior by using `dark` class to define positioning and icon display
diff --git a/packages/svelte-ux/src/lib/components/ThemeSwitch.svelte b/packages/svelte-ux/src/lib/components/ThemeSwitch.svelte
@@ -15,12 +15,22 @@
     let newTheme = e.target?.checked ? 'dark' : 'light';
     currentTheme.setTheme(newTheme);
   }}
-  let:checked
+  classes={{
+    switch: 'dark:bg-primary dark:border-primary',
+    toggle: 'translate-x-0 dark:translate-x-full',
+  }}
   {...$$restProps}
 >
-  {#if checked}
-    <Icon data={mdiWeatherNight} size=".8rem" class="text-primary" />
-  {:else}
-    <Icon data={mdiWhiteBalanceSunny} size=".8rem" class="text-primary" />
-  {/if}
+  <div class="grid grid-cols-1 grid-rows-1">
+    <Icon
+      data={mdiWeatherNight}
+      size=".8rem"
+      class="row-[1] col-[1] text-primary opacity-0 dark:opacity-100"
+    />
+    <Icon
+      data={mdiWhiteBalanceSunny}
+      size=".8rem"
+      class="row-[1] col-[1] text-primary opacity-100 dark:opacity-0"
+    />
+  </div>
 </Switch>