From 1f755f74a43cea64a00c492f8732197a95d5e289 Mon Sep 17 00:00:00 2001
From: Johnny <johnnyjoygg@gmail.com>
Date: Tue, 6 Jan 2026 20:51:45 +0800
Subject: [PATCH] fix(web): make login screen theme selector reactive

This fixes an issue where the theme selector on the login screen would not update its display value after selection because the component was not re-rendering. Added local state to track the current theme. Validated that this pattern is unique to the unauthenticated context.
---
 web/src/components/AuthFooter.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/components/AuthFooter.tsx b/web/src/components/AuthFooter.tsx
index f1a115f71..8d02cdc13 100644
--- a/web/src/components/AuthFooter.tsx
+++ b/web/src/components/AuthFooter.tsx
@@ -1,7 +1,8 @@
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { loadLocale } from "@/utils/i18n";
-import { getInitialTheme, loadTheme } from "@/utils/theme";
+import { getInitialTheme, loadTheme, Theme } from "@/utils/theme";
 import LocaleSelect from "./LocaleSelect";
 import ThemeSelect from "./ThemeSelect";
 
@@ -12,7 +13,7 @@ interface Props {
 const AuthFooter = ({ className }: Props) => {
   const { i18n: i18nInstance } = useTranslation();
   const currentLocale = i18nInstance.language as Locale;
-  const currentTheme = getInitialTheme();
+  const [currentTheme, setCurrentTheme] = useState(getInitialTheme());
 
   const handleLocaleChange = (locale: Locale) => {
     loadLocale(locale);
@@ -20,6 +21,7 @@ const AuthFooter = ({ className }: Props) => {
 
   const handleThemeChange = (theme: string) => {
     loadTheme(theme);
+    setCurrentTheme(theme as Theme);
   };
 
   return (