From fbe4d27ddd76798975819d4cd57ea030ed42b3a0 Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Wed, 21 Jan 2026 10:48:29 +0800
Subject: [PATCH] feat: use `resolvedTheme` instead of `systemTheme`

---
 .../src/app/workspace/chats/[thread_id]/layout.tsx    | 11 +++++------
 .../workspace/settings/appearance-settings-page.tsx   | 11 +++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/workspace/chats/[thread_id]/layout.tsx b/frontend/src/app/workspace/chats/[thread_id]/layout.tsx
index 62d018b..71c2b5e 100644
--- a/frontend/src/app/workspace/chats/[thread_id]/layout.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/layout.tsx
@@ -16,8 +16,7 @@ export default function ChatLayout({
   const isNewThread = useMemo(() => {
     return pathname === "/workspace/chats/new";
   }, [pathname]);
-  const { theme, systemTheme } = useTheme();
-  const currentTheme = theme === "system" ? systemTheme : theme;
+  const { resolvedTheme } = useTheme();
   return (
     <ArtifactsProvider>
       {isNewThread && (
@@ -27,9 +26,9 @@ export default function ChatLayout({
             squareSize={4}
             gridGap={4}
             color={
-              currentTheme === "dark" ? "#60A5FA" : "oklch(0 0.0098 87.47)"
+              resolvedTheme === "dark" ? "#60A5FA" : "oklch(0 0.0098 87.47)"
             }
-            maxOpacity={currentTheme === "dark" ? 0.04 : 0.03}
+            maxOpacity={resolvedTheme === "dark" ? 0.04 : 0.03}
             flickerChance={0.1}
           />
           <FlickeringGrid
@@ -37,9 +36,9 @@ export default function ChatLayout({
             squareSize={4}
             gridGap={4}
             color={
-              currentTheme === "dark" ? "#60A5FA" : "oklch(0 0.0098 87.47)"
+              resolvedTheme === "dark" ? "#60A5FA" : "oklch(0 0.0098 87.47)"
             }
-            maxOpacity={currentTheme === "dark" ? 0.15 : 0.11}
+            maxOpacity={resolvedTheme === "dark" ? 0.15 : 0.11}
             flickerChance={0.12}
           />
         </>
diff --git a/frontend/src/components/workspace/settings/appearance-settings-page.tsx b/frontend/src/components/workspace/settings/appearance-settings-page.tsx
index c9166aa..125fdae 100644
--- a/frontend/src/components/workspace/settings/appearance-settings-page.tsx
+++ b/frontend/src/components/workspace/settings/appearance-settings-page.tsx
@@ -25,7 +25,7 @@ const languageOptions: { value: Locale; label: string }[] = [
 
 export function AppearanceSettingsPage() {
   const { t, locale, changeLocale } = useI18n();
-  const { theme, setTheme, resolvedTheme } = useTheme();
+  const { theme, setTheme, systemTheme } = useTheme();
   const currentTheme = (theme ?? "system") as "system" | "light" | "dark";
 
   const themeOptions = useMemo(
@@ -74,7 +74,7 @@ export function AppearanceSettingsPage() {
               description={option.description}
               active={currentTheme === option.id}
               mode={option.id as "system" | "light" | "dark"}
-              resolvedTheme={resolvedTheme}
+              systemTheme={systemTheme}
               onSelect={(value) => setTheme(value)}
             />
           ))}
@@ -113,7 +113,7 @@ function ThemePreviewCard({
   description,
   active,
   mode,
-  resolvedTheme,
+  systemTheme,
   onSelect,
 }: {
   icon: ComponentType<SVGProps<SVGSVGElement>>;
@@ -121,12 +121,11 @@ function ThemePreviewCard({
   description: string;
   active: boolean;
   mode: "system" | "light" | "dark";
-  resolvedTheme?: string;
+  systemTheme?: string;
   onSelect: (mode: "system" | "light" | "dark") => void;
 }) {
   const previewMode =
-    mode === "system" ? (resolvedTheme === "dark" ? "dark" : "light") : mode;
-
+    mode === "system" ? (systemTheme === "dark" ? "dark" : "light") : mode;
   return (
     <button
       type="button"