Refine mobile navigation, header controls, and branding

components/layout/theme-toggle.tsx

@@ -4,6 +4,8 @@ import { RiMoonLine, RiSunLine } from "@remixicon/react"
 import { useTheme } from "next-themes"
 import { useSyncExternalStore } from "react"
 
+import { Button } from "@/components/ui/button"
+
 const emptySubscribe = () => () => {}
 
 export function ThemeToggle() {
@@ -13,10 +15,12 @@ export function ThemeToggle() {
   const isDark = mounted && resolvedTheme === "dark"
 
   return (
-    <button
+    <Button
       type="button"
+      variant="ghost"
+      size="icon-lg"
       aria-label={mounted ? `Switch to ${isDark ? "light" : "dark"} theme` : "Toggle theme"}
-      className="inline-flex size-9 items-center justify-center rounded-sm border bg-background/80 text-muted-foreground transition-colors hover:border-foreground/20 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60"
+      className="text-muted-foreground"
       onClick={() => setTheme(isDark ? "light" : "dark")}
     >
       {mounted ? (
@@ -24,6 +28,6 @@ export function ThemeToggle() {
       ) : (
         <span className="size-4" aria-hidden="true" />
       )}
-    </button>
+    </Button>
   )
 }