From 963509810285b3a7d0768cc0c4b41ac61927aae1 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Thu, 23 Oct 2025 11:01:02 -0500
Subject: [PATCH] feat: add three-way theme toggle with system preference
 support

Enhanced ThemeToggle component to cycle through light, dark, and system
themes instead of just toggling between light and dark. Added DesktopIcon
for system theme state and improved accessibility with descriptive labels
showing current and next theme states.
---
 src/components/ThemeToggle.tsx | 37 ++++++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index b6639f3..00c7333 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -2,7 +2,7 @@
 
 import { useTheme } from "next-themes";
 import { IconButton } from "@radix-ui/themes";
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { MoonIcon, SunIcon, DesktopIcon } from "@radix-ui/react-icons";
 import { useEffect, useState } from "react";
 
 export const ThemeToggle = () => {
@@ -19,22 +19,43 @@ export const ThemeToggle = () => {
 	}
 
 	const toggleTheme = () => {
-		setTheme(theme === "light" ? "dark" : "light");
+		if (theme === "light") {
+			setTheme("dark");
+		} else if (theme === "dark") {
+			setTheme("system");
+		} else {
+			setTheme("light");
+		}
 	};
 
+	const getNextTheme = () => {
+		if (theme === "light") return "dark";
+		if (theme === "dark") return "system";
+		return "light";
+	};
+
+	const getIcon = () => {
+		if (theme === "light") {
+			return <SunIcon width="22" height="22" />;
+		} else if (theme === "dark") {
+			return <MoonIcon width="22" height="22" />;
+		} else {
+			return <DesktopIcon width="22" height="22" />;
+		}
+	};
+
+	const nextTheme = getNextTheme();
+	const themeLabel = theme === "system" ? "system" : theme === "light" ? "light" : "dark";
+
 	return (
 		<IconButton
 			size="3"
 			variant="ghost"
 			onClick={toggleTheme}
 			aria-label="Toggle theme"
-			title={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+			title={`Current: ${themeLabel} mode. Click to switch to ${nextTheme} mode`}
 		>
-			{theme === "light" ? (
-				<MoonIcon width="22" height="22" />
-			) : (
-				<SunIcon width="22" height="22" />
-			)}
+			{getIcon()}
 		</IconButton>
 	);
 };