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
techniq · Dec 17, 2024 · 18be006 · 18be006
1 parent e1fc930
commit 18be006
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 6 deletions.
diff --git a/.changeset/beige-pugs-boil.md 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
@@ -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
@@ -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
@@ -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
@@ -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>