design: theme swap | add sun and moon

src/components/ThemeSwap.vue

@@ -9,50 +9,37 @@ const darkMode = import.meta.env.VITE_DARK_MODE
 </script>
 
 <template>
-  <div class="theme-swap">
+  <label class="toggle text-base-content">
-    <label class="grid cursor-pointer place-items-center">
+    <input
-      <input
+      type="checkbox"
-        type="checkbox"
+      :value="darkMode"
-        :value="darkMode"
+      :checked="isDark"
-        class="toggle theme-controller col-span-2 col-start-1 row-start-1"
+      @click="() => toggle(!isDark)"
-        :checked="isDark"
+      class="theme-controller"
-        @click="
+    />
-          (e) => {
+
-            toggle((e.target as any)?.checked ?? false)
+    <svg
-          }
+      aria-label="sun"
-        "
+      xmlns="http://www.w3.org/2000/svg"
-      />
+      viewBox="0 0 24 24"
-      <svg
+    >
-        class="stroke-base-100 fill-base-100 col-start-1 row-start-1"
+      <g
-        xmlns="http://www.w3.org/2000/svg"
+        stroke-linejoin="round"
-        width="14"
+        stroke-linecap="round"
-        height="14"
+        stroke-width="2"
-        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" />
+        <circle cx="12" cy="12" r="4"></circle>
-        <path
+        <path d="M12 2v2"></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"
+        <path d="M12 20v2"></path>
-        />
+        <path d="m4.93 4.93 1.41 1.41"></path>
-      </svg>
+        <path d="m17.66 17.66 1.41 1.41"></path>
-      <svg
+        <path d="M2 12h2"></path>
-        class="stroke-base-100 fill-base-100 col-start-2 row-start-1"
+        <path d="M20 12h2"></path>
-        xmlns="http://www.w3.org/2000/svg"
+        <path d="m6.34 17.66-1.41 1.41"></path>
-        width="14"
+        <path d="m19.07 4.93-1.41 1.41"></path>
-        height="14"
+      </g>
-        viewBox="0 0 24 24"
+    </svg>
-        fill="none"
+  </label>
-        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>