From 1fdf1646286617e654966a41ec6a448f03a4b2da Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Tue, 14 Jan 2025 14:07:14 -0500
Subject: [PATCH] fix: theme switcher color

---
 .../components/ThemeSwitcher/ThemeSwitcher.svelte   | 13 ++++++++++---
 src/routes/components/theme-switcher/+page.svelte   |  3 +++
 .../components/theme-switcher/ColorExample.svelte   | 12 ++++++++++++
 .../components/theme-switcher/SizeExample.svelte    |  6 +++---
 4 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 src/routes/components/theme-switcher/ColorExample.svelte

diff --git a/src/lib/components/ThemeSwitcher/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher/ThemeSwitcher.svelte
index ccf7926..9b9a671 100644
--- a/src/lib/components/ThemeSwitcher/ThemeSwitcher.svelte
+++ b/src/lib/components/ThemeSwitcher/ThemeSwitcher.svelte
@@ -1,18 +1,25 @@
 <script lang="ts">
 	import IconButton from '$lib/components/IconButton/IconButton.svelte';
 	import { theme } from '$lib/services/theme.svelte.js';
-	import { Theme, type Size, type Variants } from '$lib/types.js';
+	import { Theme, type Color, type Size, type Variants } from '$lib/types.js';
 	import { cleanClass } from '$lib/utils.js';
 	import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
 
 	type Props = {
 		size?: Size;
 		class?: string;
+		color?: Color;
 		variant?: Variants;
 		onChange?: (theme: Theme) => void;
 	};
 
-	const { variant = 'ghost', size, class: className, onChange }: Props = $props();
+	const {
+		color = 'primary',
+		variant = 'ghost',
+		size,
+		class: className,
+		onChange,
+	}: Props = $props();
 
 	const handleToggleTheme = () => {
 		theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
@@ -24,7 +31,7 @@
 
 <IconButton
 	shape="round"
-	color="primary"
+	{color}
 	{size}
 	{variant}
 	icon={themeIcon}
diff --git a/src/routes/components/theme-switcher/+page.svelte b/src/routes/components/theme-switcher/+page.svelte
index 8941aaf..35f72fd 100644
--- a/src/routes/components/theme-switcher/+page.svelte
+++ b/src/routes/components/theme-switcher/+page.svelte
@@ -3,6 +3,8 @@
 	import ComponentPage from '$docs/components/ComponentPage.svelte';
 	import BasicExample from './BasicExample.svelte';
 	import basicExample from './BasicExample.svelte?raw';
+	import ColorExample from './ColorExample.svelte';
+	import colorExample from './ColorExample.svelte?raw';
 	import SizeExample from './SizeExample.svelte';
 	import sizeExample from './SizeExample.svelte?raw';
 	import VariantExample from './VariantExample.svelte';
@@ -14,6 +16,7 @@
 		examples={[
 			{ title: 'Basic', code: basicExample, component: BasicExample },
 			{ title: 'Size', code: sizeExample, component: SizeExample },
+			{ title: 'Color', code: colorExample, component: ColorExample },
 			{ title: 'Variant', code: variantExample, component: VariantExample },
 		]}
 	/>
diff --git a/src/routes/components/theme-switcher/ColorExample.svelte b/src/routes/components/theme-switcher/ColorExample.svelte
new file mode 100644
index 0000000..4ba8724
--- /dev/null
+++ b/src/routes/components/theme-switcher/ColorExample.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { HStack, ThemeSwitcher } from '@immich/ui';
+</script>
+
+<HStack>
+	<ThemeSwitcher color="primary" />
+	<ThemeSwitcher color="secondary" />
+	<ThemeSwitcher color="success" />
+	<ThemeSwitcher color="warning" />
+	<ThemeSwitcher color="danger" />
+	<ThemeSwitcher color="info" />
+</HStack>
diff --git a/src/routes/components/theme-switcher/SizeExample.svelte b/src/routes/components/theme-switcher/SizeExample.svelte
index 95d8845..4f4dbd4 100644
--- a/src/routes/components/theme-switcher/SizeExample.svelte
+++ b/src/routes/components/theme-switcher/SizeExample.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Stack, ThemeSwitcher } from '@immich/ui';
+	import { HStack, ThemeSwitcher } from '@immich/ui';
 </script>
 
-<Stack>
+<HStack>
 	<ThemeSwitcher size="tiny" />
 	<ThemeSwitcher size="small" />
 	<ThemeSwitcher size="medium" />
 	<ThemeSwitcher size="large" />
 	<ThemeSwitcher size="giant" />
-</Stack>
+</HStack>