feat(mode-toggle): simplify component, add icons to menu items and active state highlight

src/components/mode-toggle.tsx

@@ -12,61 +12,47 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
-type ThemeIconProps = {
+export function ModeToggle() {
-	theme?: string;
+	const { setTheme, theme } = useTheme();
-};
-
-const ThemeIcon = ({ theme }: ThemeIconProps) => {
 	const [mounted, setMounted] = React.useState(false);
 
 	React.useEffect(() => {
 		setMounted(true);
 	}, []);
 
-	if (!mounted) {
-		return null;
-	}
-
-	switch (theme) {
-		case "light":
-			return (
-				<Sun className="absolute h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-			);
-		case "dark":
-			return (
-				<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-			);
-		case "system":
-			return <Monitor className="absolute h-[1.2rem] w-[1.2rem] scale-100" />;
-		default:
-			return (
-				<>
-					<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-					<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-				</>
-			);
-	}
-};
-
-export function ModeToggle() {
-	const { setTheme, theme } = useTheme();
-
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<Button variant="outline" size="icon">
+				<Button variant="ghost" size="icon" className="h-8 w-8">
-					<ThemeIcon theme={theme} />
+					{!mounted ? null : (
-					<span className="sr-only">Toggle theme</span>
+						<>
+							<Sun className="h-3.5 w-3.5 rotate-0 scale-100 transition-transform dark:-rotate-90 dark:scale-0" />
+							<Moon className="absolute h-3.5 w-3.5 rotate-90 scale-0 transition-transform dark:rotate-0 dark:scale-100" />
+							<span className="sr-only">Toggle theme</span>
+						</>
+					)}
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent align="end">
-				<DropdownMenuItem onClick={() => setTheme("light")}>
+				<DropdownMenuItem
+					onClick={() => setTheme("light")}
+					className={theme === "light" ? "bg-accent" : ""}
+				>
+					<Sun className="h-3.5 w-3.5 mr-2" />
 					Light
 				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("dark")}>
+				<DropdownMenuItem
+					onClick={() => setTheme("dark")}
+					className={theme === "dark" ? "bg-accent" : ""}
+				>
+					<Moon className="h-3.5 w-3.5 mr-2" />
 					Dark
 				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("system")}>
+				<DropdownMenuItem
+					onClick={() => setTheme("system")}
+					className={theme === "system" ? "bg-accent" : ""}
+				>
+					<Monitor className="h-3.5 w-3.5 mr-2" />
 					System
 				</DropdownMenuItem>
 			</DropdownMenuContent>