60 lines
1.7 KiB
Svelte
60 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import { writable } from "svelte/store";
|
|
|
|
let theme = writable("light");
|
|
|
|
onMount(() => {
|
|
theme.set(localStorage.getItem("theme") || "light");
|
|
});
|
|
|
|
$: if ($theme && "document" in globalThis) {
|
|
document.documentElement.classList.remove("light", "dark");
|
|
document.documentElement.classList.add($theme);
|
|
localStorage.setItem("theme", $theme);
|
|
}
|
|
|
|
function toggleTheme() {
|
|
console.log($theme);
|
|
theme.update((t) => (t === "light" ? "dark" : "light"));
|
|
}
|
|
</script>
|
|
|
|
<button class="block w-6 h-6" on:click={toggleTheme} title="toggle dark mode">
|
|
{#if $theme === "dark"}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-sun"
|
|
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"
|
|
/><path
|
|
d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
|
|
/></svg
|
|
>
|
|
{:else}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-moon"
|
|
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
|
|
/></svg
|
|
>
|
|
{/if}
|
|
</button>
|