From 6eeebc76334ae76d8578537562bfbbd12cf69c68 Mon Sep 17 00:00:00 2001
From: Daniel Imfeld <daniel@imfeld.dev>
Date: Sat, 3 Feb 2024 04:43:20 -1000
Subject: [PATCH] Fix ThemeSwitch SSR behavior by using `dark` class to define
 positioning and icon display (#228)

---
 .changeset/nice-cats-know.md                  |  5 +++++
 .../src/lib/components/ThemeSwitch.svelte     | 22 ++++++++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/nice-cats-know.md

diff --git a/.changeset/nice-cats-know.md b/.changeset/nice-cats-know.md
new file mode 100644
index 000000000..4ed7f44e8
--- /dev/null
+++ 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
index 0361679ef..26e220476 100644
--- 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>