Fix ThemeSwitch SSR behavior by using dark class to define positioning and icon display (#228)

Author: dimfeld

.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

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>