fix: dark mode theme switching issue and ensure preview background updates

Author: MatrixCQY

src/app/globals.css

@@ -49,30 +49,6 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-    --card: #09090b;
-    --card-foreground: #fafafa;
-    --popover: #09090b;
-    --popover-foreground: #fafafa;
-    --primary: #fafafa;
-    --primary-foreground: #18181b;
-    --secondary: #27272a;
-    --secondary-foreground: #fafafa;
-    --muted: #27272a;
-    --muted-foreground: #a1a1aa;
-    --accent: #27272a;
-    --accent-foreground: #fafafa;
-    --destructive: #7f1d1d;
-    --destructive-foreground: #fafafa;
-    --border: #27272a;
-    --input: #27272a;
-    --ring: #d4d4d8;
-  }
-}
-
 .dark {
   --background: #0a0a0a;
   --foreground: #ededed;

src/components/preview.tsx

@@ -15,7 +15,7 @@ interface PreviewProps {
 
 export function MarkdownPreview({ content, className }: PreviewProps) {
   return (
-    <div className={cn("h-full w-full overflow-y-auto p-4", className)}>
+    <div className={cn("h-full w-full overflow-y-auto p-4 bg-background text-foreground transition-colors duration-200", className)}>
       <article className="prose dark:prose-invert max-w-none prose-pre:bg-transparent prose-pre:p-0">
         <ReactMarkdown
           remarkPlugins={[remarkGfm, remarkMath]}