Themes to appearances instead of top navbar.

src/components/ThemeSwitch.tsx

@@ -18,9 +18,10 @@ export function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        <Button variant="outline">
+          <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 mr-1" />
+          <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <p>Themes</p>
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>

src/components/navbar.tsx

@@ -20,7 +20,6 @@ export default function Navbar() {
         <Button onClick={() => setOpen(true)} size="icon" variant="ghost">
                 <Lucide.Menu className="h-7 w-7" />
         </Button>
-        <ModeToggle />
         {/* Wrap the logo and text in a Link */}
         <Link href="/" className="flex items-center gap-2">
           <Lucide.Radius className="h-8 w-8 rotate-180" />