28 lines
809 B
Svelte
28 lines
809 B
Svelte
<script lang="ts">
|
|
import Moon from "$lib/icons/Moon.svelte"
|
|
import Sun from "$lib/icons/Sun.svelte"
|
|
import { themeState } from "$lib/state.svelte"
|
|
import { onMount } from "svelte"
|
|
|
|
// The `themeState` rune can't be imported here so we must explicitly call the setup
|
|
onMount(() => {
|
|
themeState.isDarkMode = localStorage.getItem("darkMode") === "true"
|
|
})
|
|
</script>
|
|
|
|
<button
|
|
on:click={() => {
|
|
themeState.isDarkMode = !themeState.isDarkMode
|
|
document.documentElement.classList.toggle("dark", themeState.isDarkMode)
|
|
localStorage.setItem("darkMode", themeState.isDarkMode ? "true" : "false")
|
|
}}
|
|
class="btn-secondary rounded-full p-2"
|
|
aria-label={themeState.isDarkMode ? "Switch to light mode" : "Switch to dark mode"}
|
|
>
|
|
{#if themeState.isDarkMode}
|
|
<Moon />
|
|
{:else}
|
|
<Sun />
|
|
{/if}
|
|
</button>
|