rasmusq/wishlist
Public Access
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

update: theme switcher button use new generalized button

Browse Source
This commit is contained in:
rasmusq
2025-12-19 23:35:43 +01:00
parent cb4539a982
commit 8f574380ce
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/layout/Navigation.svelte
View File

@@ -31,6 +31,6 @@
{/if} {/if}
<div class="ml-auto flex items-center gap-1 sm:gap-2"> <div class="ml-auto flex items-center gap-1 sm:gap-2">
<LanguageToggle {color} /> <LanguageToggle {color} />
<ThemeToggle /> <ThemeToggle size="sm" {color} />
</div> </div>
</nav> </nav>

13
src/lib/components/ui/theme-toggle/ThemeToggle.svelte
View File

@@ -2,13 +2,22 @@
import { themeStore } from '$lib/stores/theme.svelte'; import { themeStore } from '$lib/stores/theme.svelte';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import { Sun, Moon, Monitor } from 'lucide-svelte'; import { Sun, Moon, Monitor } from 'lucide-svelte';
import IconButton from '../IconButton.svelte';
let {
color = $bindable(null),
size = 'sm',
}: {
color: string | null;
size?: 'sm' | 'md' | 'lg';
} = $props();
function toggle() { function toggle() {
themeStore.toggle(); themeStore.toggle();
} }
</script> </script>
<Button onclick={toggle} variant="ghost" size="icon" class="rounded-full"> <IconButton onclick={toggle} {size} {color}>
{#if themeStore.current === 'light'} {#if themeStore.current === 'light'}
<Sun size={20} /> <Sun size={20} />
<span class="sr-only">Light mode (click for dark)</span> <span class="sr-only">Light mode (click for dark)</span>
@@ -19,4 +28,4 @@
<Monitor size={20} /> <Monitor size={20} />
<span class="sr-only">System mode (click for light)</span> <span class="sr-only">System mode (click for light)</span>
{/if} {/if}
</Button> </IconButton>