From c9fc22bae5cc46a68788a09288a83afb518b0570 Mon Sep 17 00:00:00 2001
From: XYenon <i@xyenon.bid>
Date: Fri, 26 Dec 2025 00:19:04 +0800
Subject: [PATCH] fix: use resolvedTheme instead of theme for dark mode
 detection

When theme is set to 'auto', checking theme === 'dark' returns false even
when the system preference is dark mode. This caused charts and custom
styles to use light mode colors in a dark UI.

Fixed by using resolvedTheme which correctly resolves to 'light' or 'dark'
based on system preference when in auto mode.

Fixes the issue reported in PR #29 review.
---
 src/pages/AuthFilesPage.tsx | 7 ++++---
 src/pages/ConfigPage.tsx    | 4 ++--
 src/pages/UsagePage.tsx     | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/pages/AuthFilesPage.tsx b/src/pages/AuthFilesPage.tsx
index 5508321..232aee1 100644
--- a/src/pages/AuthFilesPage.tsx
+++ b/src/pages/AuthFilesPage.tsx
@@ -17,6 +17,7 @@ import styles from './AuthFilesPage.module.scss';
 
 type ThemeColors = { bg: string; text: string; border?: string };
 type TypeColorSet = { light: ThemeColors; dark?: ThemeColors };
+type ResolvedTheme = 'light' | 'dark';
 
 // 标签类型颜色配置（对齐重构前 styles.css 的 file-type-badge 颜色）
 const TYPE_COLORS: Record<string, TypeColorSet> = {
@@ -129,7 +130,7 @@ export function AuthFilesPage() {
   const { t } = useTranslation();
   const { showNotification } = useNotificationStore();
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
-  const theme = useThemeStore((state) => state.theme);
+  const resolvedTheme: ResolvedTheme = useThemeStore((state) => state.resolvedTheme);
 
   const [files, setFiles] = useState<AuthFileItem[]>([]);
   const [loading, setLoading] = useState(true);
@@ -488,7 +489,7 @@ export function AuthFilesPage() {
   // 获取类型颜色
   const getTypeColor = (type: string): ThemeColors => {
     const set = TYPE_COLORS[type] || TYPE_COLORS.unknown;
-    return theme === 'dark' && set.dark ? set.dark : set.light;
+    return resolvedTheme === 'dark' && set.dark ? set.dark : set.light;
   };
 
   // OAuth 排除相关方法
@@ -547,7 +548,7 @@ export function AuthFilesPage() {
       {existingTypes.map((type) => {
         const isActive = filter === type;
         const color = type === 'all' ? { bg: 'var(--bg-tertiary)', text: 'var(--text-primary)' } : getTypeColor(type);
-        const activeTextColor = theme === 'dark' ? '#111827' : '#fff';
+        const activeTextColor = resolvedTheme === 'dark' ? '#111827' : '#fff';
         return (
           <button
             key={type}
diff --git a/src/pages/ConfigPage.tsx b/src/pages/ConfigPage.tsx
index bc082ae..3980219 100644
--- a/src/pages/ConfigPage.tsx
+++ b/src/pages/ConfigPage.tsx
@@ -16,7 +16,7 @@ export function ConfigPage() {
   const { t } = useTranslation();
   const { showNotification } = useNotificationStore();
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
-  const theme = useThemeStore((state) => state.theme);
+  const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
 
   const [content, setContent] = useState('');
   const [loading, setLoading] = useState(true);
@@ -289,7 +289,7 @@ export function ConfigPage() {
               value={content}
               onChange={handleChange}
               extensions={extensions}
-              theme={theme === 'dark' ? 'dark' : 'light'}
+              theme={resolvedTheme}
               editable={!disableControls && !loading}
               placeholder={t('config_management.editor_placeholder')}
               height="100%"
diff --git a/src/pages/UsagePage.tsx b/src/pages/UsagePage.tsx
index f5f1be3..2c0c729 100644
--- a/src/pages/UsagePage.tsx
+++ b/src/pages/UsagePage.tsx
@@ -64,8 +64,8 @@ interface UsagePayload {
 export function UsagePage() {
   const { t } = useTranslation();
   const isMobile = useMediaQuery('(max-width: 768px)');
-  const theme = useThemeStore((state) => state.theme);
-  const isDark = theme === 'dark';
+  const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
+  const isDark = resolvedTheme === 'dark';
 
   const [usage, setUsage] = useState<UsagePayload | null>(null);
   const [loading, setLoading] = useState(true);