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.
This commit is contained in:
XYenon
2025-12-26 00:19:04 +08:00
parent 961cc802b2
commit c9fc22bae5
3 changed files with 8 additions and 7 deletions

View File

@@ -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);