55 lines
1.3 KiB
Svelte
55 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { theme } from '$lib/stores/theme.svelte';
|
|
import { iconButton } from '$lib/ui/classes';
|
|
|
|
const isDark = $derived(theme.resolved === 'dark');
|
|
const nextLabel = $derived(isDark ? 'Switch to light theme' : 'Switch to dark theme');
|
|
// "Following your system" matters: it is the difference between a pinned
|
|
// preference and one that will change under the user later.
|
|
const title = $derived(
|
|
theme.preference === 'system'
|
|
? `Following your system (${theme.resolved}). ${nextLabel}.`
|
|
: nextLabel
|
|
);
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => theme.toggle()}
|
|
class={iconButton}
|
|
aria-label={nextLabel}
|
|
{title}
|
|
>
|
|
{#if isDark}
|
|
<!-- Sun: clicking moves to light -->
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.8"
|
|
stroke-linecap="round"
|
|
class="size-4"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx="12" cy="12" r="4" />
|
|
<path
|
|
d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4"
|
|
/>
|
|
</svg>
|
|
{:else}
|
|
<!-- Moon: clicking moves to dark -->
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.8"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="size-4"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M21 12.8A8.5 8.5 0 1 1 11.2 3a6.6 6.6 0 0 0 9.8 9.8Z" />
|
|
</svg>
|
|
{/if}
|
|
</button>
|