From 39dcc0bb9eadaad7f53be4f925e953bbe3769ec5 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 17 Oct 2025 17:41:27 +0000
Subject: [PATCH] Fix: Resolve theme for markdown editor

---
 src/components/admin/MarkdownEditor.tsx | 26 ++++++++++++++++++++++++-
 src/pages/AdminBlog.tsx                 |  2 ++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/admin/MarkdownEditor.tsx b/src/components/admin/MarkdownEditor.tsx
index b43ed668..6e5d4608 100644
--- a/src/components/admin/MarkdownEditor.tsx
+++ b/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 || '')}
diff --git a/src/pages/AdminBlog.tsx b/src/pages/AdminBlog.tsx
index 8ec264f5..d694e580 100644
--- a/src/pages/AdminBlog.tsx
+++ b/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 {