From 2ac5eb6c4b7b5c497fb3c840874f9d1438c51a85 Mon Sep 17 00:00:00 2001
From: "Kai (Tam Nhu) Tran" <61256810+kaitranntt@users.noreply.github.com>
Date: Sun, 22 Mar 2026 23:18:21 -0400
Subject: [PATCH] feat(login): add theme toggle to login page (#354)

---
 ui/web/src/pages/login/login-layout.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/ui/web/src/pages/login/login-layout.tsx b/ui/web/src/pages/login/login-layout.tsx
index 93903845..32b42f25 100644
--- a/ui/web/src/pages/login/login-layout.tsx
+++ b/ui/web/src/pages/login/login-layout.tsx
@@ -1,11 +1,32 @@
+import { Moon, Sun } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useUiStore } from "@/stores/use-ui-store";
+
 interface LoginLayoutProps {
   children: React.ReactNode;
   subtitle?: string;
 }
 
 export function LoginLayout({ children, subtitle }: LoginLayoutProps) {
+  const { t } = useTranslation("topbar");
+  const theme = useUiStore((s) => s.theme);
+  const setTheme = useUiStore((s) => s.setTheme);
+  const isDark =
+    theme === "dark" ||
+    (theme === "system" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches);
+
   return (
-    <div className="flex min-h-dvh items-center justify-center bg-background px-4">
+    <div className="relative flex min-h-dvh items-center justify-center bg-background px-4">
+      <button
+        type="button"
+        onClick={() => setTheme(isDark ? "light" : "dark")}
+        className="absolute top-4 right-4 cursor-pointer rounded-md border bg-card p-2 text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+        title={t("toggleTheme")}
+        aria-label={t("toggleTheme")}
+      >
+        {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      </button>
       <div className="w-full max-w-sm space-y-6 rounded-lg border bg-card p-6 shadow-sm sm:p-8">
         <div className="text-center">
           <img src="/goclaw-icon.svg" alt="GoClaw" className="mx-auto mb-3 h-20 w-20" />