Fix: Resolve theme for markdown editor

src/components/admin/MarkdownEditor.tsx

@@ -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 || '')}

src/pages/AdminBlog.tsx

@@ -19,6 +19,8 @@ import { extractCloudflareImageId } from '@/lib/cloudflareImageUtils';
 import { Edit, Trash2, Eye, Plus } from 'lucide-react';
 import { toast } from 'sonner';
 import { formatDistanceToNow } from 'date-fns';
+import '@uiw/react-md-editor/markdown-editor.css';
+import '@uiw/react-markdown-preview/markdown.css';
 import '@/styles/markdown-editor.css';
 
 interface BlogPost {