ADD: Dark mode toggle

src/components/DarkModeToggle.vue

+<script setup lang="ts">
+const mode = useColorMode()
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="outline">
+        <Icon
+          icon="radix-icons:moon"
+          class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+        />
+        <Icon
+          icon="radix-icons:sun"
+          class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+        />
+        <span class="sr-only">Toggle theme</span>
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <DropdownMenuItem @click="mode = 'light'">
+        Light
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="mode = 'dark'">
+        Dark
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="mode = 'auto'">
+        System
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

src/components/TopBar.vue

@@ -6,5 +6,6 @@
   <div flex gap-2 justify-center p-2 h-14 b-b-gray-2>
     <GlobalSearch />
     <UserNav />
+    <DarkModeToggle />
   </div>
 </template>