Feat/migrate to daisy (#10)

* feat: init daisyui!

* feat: change theme and colors

* change dark theme and add colors

src/components/ThemeSwap.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isDark = ref(JSON.parse(localStorage.getItem('is-dark') ?? 'false'))
+const toggle = (isChecked: boolean) => {
+  localStorage.setItem('is-dark', isChecked ? 'true' : 'false')
+}
+</script>
+
+<template>
+  <div class="theme-swap">
+    <label class="grid cursor-pointer place-items-center">
+      <input
+        type="checkbox"
+        value="forest"
+        class="toggle theme-controller bg-base-content col-span-2 col-start-1 row-start-1"
+        :checked="isDark"
+        @click="
+          (e) => {
+            toggle((e.target as any)?.checked ?? false)
+          }
+        "
+      />
+      <svg
+        class="stroke-base-100 fill-base-100 col-start-1 row-start-1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="5" />
+        <path
+          d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
+        />
+      </svg>
+      <svg
+        class="stroke-base-100 fill-base-100 col-start-2 row-start-1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      </svg>
+    </label>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.theme-swap {
+}
+</style>