feat: add ci

src/components/ThemeToggle.svelte

@@ -0,0 +1,59 @@
+<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>