From 5b021582280e43015da1306caf09f70254460b69 Mon Sep 17 00:00:00 2001
From: y0tka <38098487+y0tka@users.noreply.github.com>
Date: Thu, 9 Apr 2026 19:48:44 +0000
Subject: [PATCH] feat(ui): add theme state that follows system/browser theme 
 (#1903)

---
 internal/site/src/components/mode-toggle.tsx | 23 +++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/internal/site/src/components/mode-toggle.tsx b/internal/site/src/components/mode-toggle.tsx
index ab5c11e7..29757e39 100644
--- a/internal/site/src/components/mode-toggle.tsx
+++ b/internal/site/src/components/mode-toggle.tsx
@@ -1,28 +1,39 @@
 import { t } from "@lingui/core/macro"
-import { MoonStarIcon, SunIcon } from "lucide-react"
+import { MoonStarIcon, SunIcon, SunMoonIcon } from "lucide-react"
 import { useTheme } from "@/components/theme-provider"
 import { Button } from "@/components/ui/button"
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"
 import { Trans } from "@lingui/react/macro"
+import { cn } from "@/lib/utils"
+
+const themes = ["light", "dark", "system"] as const
+const icons = [SunIcon, MoonStarIcon, SunMoonIcon] as const
 
 export function ModeToggle() {
 	const { theme, setTheme } = useTheme()
 
+	const currentIndex = themes.indexOf(theme)
+	const Icon = icons[currentIndex]
+
 	return (
 		<Tooltip>
 			<TooltipTrigger asChild>
 				<Button
 					variant={"ghost"}
 					size="icon"
-					aria-label={t`Toggle theme`}
-					onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+					aria-label={t`Switch theme`}
+					onClick={() => setTheme(themes[(currentIndex + 1) % themes.length])}
 				>
-					<SunIcon className="h-[1.2rem] w-[1.2rem] transition-all -rotate-90 dark:opacity-0 dark:rotate-0" />
-					<MoonStarIcon className="absolute h-[1.2rem] w-[1.2rem] transition-all opacity-0 -rotate-90 dark:opacity-100 dark:rotate-0" />
+					<Icon
+						className={cn(
+							"animate-in fade-in spin-in-[-30deg] duration-200",
+							currentIndex === 2 ? "size-[1.35rem]" : "size-[1.2rem]"
+						)}
+					/>
 				</Button>
 			</TooltipTrigger>
 			<TooltipContent>
-				<Trans>Toggle theme</Trans>
+				<Trans>Switch theme</Trans>
 			</TooltipContent>
 		</Tooltip>
 	)