Themes to appearances instead of top navbar.

src/app/settings/appearance/page.tsx

@@ -3,6 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { ModeToggle } from "@/components/ThemeSwitch";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -89,6 +90,7 @@ export default function Settings() {
           </div>
         </form>
       </Form>
+      <ModeToggle />
     </div>
   );
 }

src/components/ThemeSwitch.tsx

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