From 18be0066b33dbb6e443d869ab75ddd54e46e3d0d Mon Sep 17 00:00:00 2001
From: Gavin Golden <gavingolden@users.noreply.github.com>
Date: Mon, 16 Dec 2024 19:02:06 -0600
Subject: [PATCH] feat(ThemeSwitch) Allow custom classes for icon (#525)

* Allow custom icon colors in ThemeSwitcher

* prettier

* Support global ThemeSwitch class settings

* Use dynamic color class

* format

* doc on wrong method

* Add changeset

* Change structure of settings obj
---
 .changeset/beige-pugs-boil.md                 |  5 +++
 .../src/lib/components/ThemeSwitch.svelte     | 34 +++++++++++++++----
 .../svelte-ux/src/lib/components/settings.ts  |  4 +++
 .../svelte-ux/src/lib/components/theme.ts     |  5 +++
 .../docs/components/ThemeSwitch/+page.svelte  |  8 +++++
 5 files changed, 50 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/beige-pugs-boil.md

diff --git a/.changeset/beige-pugs-boil.md b/.changeset/beige-pugs-boil.md
new file mode 100644
index 000000000..4bef4118d
--- /dev/null
+++ b/.changeset/beige-pugs-boil.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+Allow custom styling of ThemeSwitch component
diff --git a/packages/svelte-ux/src/lib/components/ThemeSwitch.svelte b/packages/svelte-ux/src/lib/components/ThemeSwitch.svelte
index 24b64c764..1307c8e93 100644
--- a/packages/svelte-ux/src/lib/components/ThemeSwitch.svelte
+++ b/packages/svelte-ux/src/lib/components/ThemeSwitch.svelte
@@ -5,8 +5,18 @@
   import Icon from './Icon.svelte';
 
   import { getSettings } from './settings.js';
+  import { cls } from '../utils/index.js';
+  import type { ComponentProps } from 'svelte';
+  import { clsMerge } from '$lib/utils/styles.js';
+  import { getComponentClasses } from '$lib/components/theme.js';
 
   const { currentTheme } = getSettings();
+
+  const { icon: iconClasses, ...otherClasses } = getComponentClasses('ThemeSwitch');
+
+  export let classes: {
+    icon?: string;
+  } & ComponentProps<Switch>['classes'] = {};
 </script>
 
 <Switch
@@ -16,22 +26,34 @@
     let newTheme = e.target?.checked ? 'dark' : 'light';
     currentTheme.setTheme(newTheme);
   }}
-  classes={{
-    switch: 'dark:bg-primary dark:border-primary',
-    toggle: 'translate-x-0 dark:translate-x-full',
-  }}
+  classes={clsMerge(
+    {
+      switch: 'dark:bg-primary dark:border-primary',
+      toggle: 'translate-x-0 dark:translate-x-full',
+    },
+    otherClasses,
+    classes
+  )}
   {...$$restProps}
 >
   <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"
+      class={cls(
+        'row-[1] col-[1] text-primary opacity-0 dark:opacity-100',
+        iconClasses,
+        classes.icon
+      )}
     />
     <Icon
       data={mdiWhiteBalanceSunny}
       size=".8rem"
-      class="row-[1] col-[1] text-primary opacity-100 dark:opacity-0"
+      class={cls(
+        'row-[1] col-[1] text-primary opacity-100 dark:opacity-0',
+        iconClasses,
+        classes.icon
+      )}
     />
   </div>
 </Switch>
diff --git a/packages/svelte-ux/src/lib/components/settings.ts b/packages/svelte-ux/src/lib/components/settings.ts
index 991bf38b3..74bc3a6aa 100644
--- a/packages/svelte-ux/src/lib/components/settings.ts
+++ b/packages/svelte-ux/src/lib/components/settings.ts
@@ -165,6 +165,10 @@ export function resolveComponentSettings<NAME extends ComponentName>(
   return output;
 }
 
+/**
+ * Returns default component props and classes for a given component.
+ * @param name component name
+ */
 export function getComponentSettings<NAME extends ComponentName>(
   name: NAME
 ): ResolvedComponentSettings<NAME> {
diff --git a/packages/svelte-ux/src/lib/components/theme.ts b/packages/svelte-ux/src/lib/components/theme.ts
index c8598132d..d2db62f95 100644
--- a/packages/svelte-ux/src/lib/components/theme.ts
+++ b/packages/svelte-ux/src/lib/components/theme.ts
@@ -121,6 +121,11 @@ export function resolveComponentClasses<NAME extends ComponentName>(
   return typeof theme === 'string' ? { root: theme } : (theme ?? {});
 }
 
+/**
+ * Returns default component classes for a given component. See {@link resolveComponentSettings}
+ * to get both default props and classes.
+ * @param name component name
+ */
 export function getComponentClasses<NAME extends ComponentName>(
   name: NAME
 ): ResolvedComponentClasses[NAME] {
diff --git a/packages/svelte-ux/src/routes/docs/components/ThemeSwitch/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ThemeSwitch/+page.svelte
index ad2daa6dd..286f24169 100644
--- a/packages/svelte-ux/src/routes/docs/components/ThemeSwitch/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/ThemeSwitch/+page.svelte
@@ -10,3 +10,11 @@
 <Preview>
   <ThemeSwitch />
 </Preview>
+
+<h2>Customize Switch</h2>
+
+<Preview>
+  <ThemeSwitch
+    classes={{ icon: 'text-primary-content', switch: 'bg-secondary w-20', toggle: 'bg-accent' }}
+  />
+</Preview>