feat(theme): add system theme support

close #13

src/components/ThemeToggle.vue

@@ -2,15 +2,12 @@
   <button
     type="button"
     class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm font-medium text-slate-600 shadow-sm transition hover:border-brand/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-300"
-    :aria-pressed="isDark"
+    :aria-pressed="themeMode === 'dark'"
     @click="toggle"
   >
     <span class="flex items-center gap-2">
-      <i
-        class="fas"
-        :class="isDark ? 'fa-moon text-amber-200' : 'fa-sun text-amber-400'"
-      ></i>
-      <span>{{ isDark ? "深色主题" : "浅色主题" }}</span>
+      <i class="fas" :class="iconClass"></i>
+      <span>{{ label }}</span>
     </span>
     <span
       class="relative inline-flex h-6 w-12 items-center rounded-full bg-slate-300/80 transition dark:bg-slate-700"
@@ -18,7 +15,7 @@
       <span
         :class="[
           'inline-block h-4 w-4 rounded-full bg-white shadow transition',
-          isDark ? 'translate-x-6' : 'translate-x-1',
+          togglePosition,
         ]"
       ></span>
     </span>
@@ -26,8 +23,10 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  isDark: boolean;
+import { computed } from "vue";
+
+const props = defineProps<{
+  themeMode: "light" | "dark" | "auto";
 }>();
 
 const emit = defineEmits<{
@@ -37,4 +36,22 @@ const emit = defineEmits<{
 const toggle = () => {
   emit("toggle");
 };
+
+const label = computed(() => {
+  if (props.themeMode === "auto") return "跟随系统";
+  if (props.themeMode === "dark") return "深色主题";
+  return "浅色主题";
+});
+
+const iconClass = computed(() => {
+  if (props.themeMode === "auto") return "fa-adjust text-slate-500";
+  if (props.themeMode === "dark") return "fa-moon text-amber-200";
+  return "fa-sun text-amber-400";
+});
+
+const togglePosition = computed(() => {
+  if (props.themeMode === "auto") return "translate-x-4";
+  if (props.themeMode === "dark") return "translate-x-7";
+  return "translate-x-1";
+});
 </script>