feat: optimize theme switcher and fix style issues

components/SwitchTheme.vue

@@ -1,7 +1,5 @@
 <script setup>
-import { Icon } from '@iconify/vue'
-import { Button } from '@/components/ui/button'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Sun, Moon } from 'lucide-vue-next'
 
 const colorMode = useColorMode()
 </script>
@@ -10,18 +8,19 @@ const colorMode = useColorMode()
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
       <Button variant="ghost">
-        <Icon
-          icon="radix-icons:sun"
+        <Sun
           class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
         />
-        <Icon
-          icon="radix-icons:moon"
+        <Moon
           class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
         />
         <span class="sr-only">Toggle theme</span>
       </Button>
     </DropdownMenuTrigger>
-    <DropdownMenuContent align="end">
+    <DropdownMenuContent
+      align="end"
+      class="min-w-min"
+    >
       <DropdownMenuItem @click="colorMode.preference = 'light'">
         Light
       </DropdownMenuItem>