<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>
