27 lines
876 B
Svelte
27 lines
876 B
Svelte
<!--
|
|
Component: ThemeSwitch
|
|
Toggles the theme between light and dark mode.
|
|
-->
|
|
<script lang="ts">
|
|
import type { ResponsiveManager } from '$shared/lib';
|
|
import { IconButton } from '$shared/ui';
|
|
import MoonIcon from '@lucide/svelte/icons/moon';
|
|
import SunIcon from '@lucide/svelte/icons/sun';
|
|
import { getContext } from 'svelte';
|
|
import { themeManager } from '../../model';
|
|
|
|
const responsive = getContext<ResponsiveManager>('responsive');
|
|
|
|
const theme = $derived(themeManager.value);
|
|
</script>
|
|
|
|
<IconButton onclick={() => themeManager.toggle()} size={responsive.isMobile ? 'sm' : 'md'} title="Toggle theme">
|
|
{#snippet icon()}
|
|
{#if theme === 'light'}
|
|
<MoonIcon class={responsive.isMobile ? 'size-4' : 'size-5'} />
|
|
{:else}
|
|
<SunIcon class={responsive.isMobile ? 'size-4' : 'size-5'} />
|
|
{/if}
|
|
{/snippet}
|
|
</IconButton>
|