31 lines
775 B
Svelte
31 lines
775 B
Svelte
<script lang="ts">
|
|
import { themeStore } from '$lib/stores/theme.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() {
|
|
themeStore.toggle();
|
|
}
|
|
</script>
|
|
|
|
<IconButton onclick={toggle} {size} {color} rounded="md">
|
|
{#if themeStore.current === 'light'}
|
|
<Sun size={20} />
|
|
<span class="sr-only">Light mode (click for dark)</span>
|
|
{:else if themeStore.current === 'dark'}
|
|
<Moon size={20} />
|
|
<span class="sr-only">Dark mode (click for system)</span>
|
|
{:else}
|
|
<Monitor size={20} />
|
|
<span class="sr-only">System mode (click for light)</span>
|
|
{/if}
|
|
</IconButton>
|