Fix: Resolve theme for markdown editor

This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 17:41:27 +00:00
parent 01d8410caa
commit 39dcc0bb9e
2 changed files with 27 additions and 1 deletions

View File

@@ -25,6 +25,30 @@ export function MarkdownEditor({
}: MarkdownEditorProps) {
const { theme } = useTheme();
const [mounted, setMounted] = useState(false);
const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');
// Resolve "system" theme to actual theme based on OS preference
useEffect(() => {
if (theme === 'system') {
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
setResolvedTheme(isDark ? 'dark' : 'light');
} else {
setResolvedTheme(theme as 'light' | 'dark');
}
}, [theme]);
// Listen for OS theme changes when in system mode
useEffect(() => {
if (theme !== 'system') return;
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handler = (e: MediaQueryListEvent) => {
setResolvedTheme(e.matches ? 'dark' : 'light');
};
mediaQuery.addEventListener('change', handler);
return () => mediaQuery.removeEventListener('change', handler);
}, [theme]);
// Auto-save integration
const { isSaving, lastSaved, error } = useAutoSave({
@@ -61,7 +85,7 @@ export function MarkdownEditor({
return (
<div className="space-y-2">
<div data-color-mode={theme}>
<div data-color-mode={resolvedTheme}>
<MDEditor
value={value}
onChange={(val) => onChange(val || '')}