fix: theme switcher color (#73)

immich-app · Jan 14, 2025 · 7927688 · 7927688
1 parent 74f58a4
commit 7927688
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>