diff --git a/.playwright-mcp/.playwright-mcp/dark-mode-complete.png b/.playwright-mcp/.playwright-mcp/dark-mode-complete.png
new file mode 100644
index 0000000..2a48cd2
Binary files /dev/null and b/.playwright-mcp/.playwright-mcp/dark-mode-complete.png differ
diff --git a/.playwright-mcp/.playwright-mcp/dark-mode-editor-fix.png b/.playwright-mcp/.playwright-mcp/dark-mode-editor-fix.png
new file mode 100644
index 0000000..37c9915
Binary files /dev/null and b/.playwright-mcp/.playwright-mcp/dark-mode-editor-fix.png differ
diff --git a/.playwright-mcp/.playwright-mcp/dark-mode-final.png b/.playwright-mcp/.playwright-mcp/dark-mode-final.png
new file mode 100644
index 0000000..37c9915
Binary files /dev/null and b/.playwright-mcp/.playwright-mcp/dark-mode-final.png differ
diff --git a/.playwright-mcp/.playwright-mcp/dark-mode-preview-update.png b/.playwright-mcp/.playwright-mcp/dark-mode-preview-update.png
new file mode 100644
index 0000000..989a81d
Binary files /dev/null and b/.playwright-mcp/.playwright-mcp/dark-mode-preview-update.png differ
diff --git a/.playwright-mcp/.playwright-mcp/dark-mode-text-fix.png b/.playwright-mcp/.playwright-mcp/dark-mode-text-fix.png
new file mode 100644
index 0000000..40118ff
Binary files /dev/null and b/.playwright-mcp/.playwright-mcp/dark-mode-text-fix.png differ
diff --git a/.playwright-mcp/.playwright-mcp/dark-mode-white-text.png b/.playwright-mcp/.playwright-mcp/dark-mode-white-text.png
new file mode 100644
index 0000000..6212885
Binary files /dev/null and b/.playwright-mcp/.playwright-mcp/dark-mode-white-text.png differ
diff --git a/.playwright-mcp/.playwright-mcp/dark-mode-with-preview.png b/.playwright-mcp/.playwright-mcp/dark-mode-with-preview.png
new file mode 100644
index 0000000..16c7c1f
Binary files /dev/null and b/.playwright-mcp/.playwright-mcp/dark-mode-with-preview.png differ
diff --git a/.playwright-mcp/compose-darkmode-preview.png b/.playwright-mcp/compose-darkmode-preview.png
new file mode 100644
index 0000000..1919b44
Binary files /dev/null and b/.playwright-mcp/compose-darkmode-preview.png differ
diff --git a/.playwright-mcp/dark-mode-full-preview.png b/.playwright-mcp/dark-mode-full-preview.png
new file mode 100644
index 0000000..05191e5
Binary files /dev/null and b/.playwright-mcp/dark-mode-full-preview.png differ
diff --git a/.playwright-mcp/dark-mode-preview-after.png b/.playwright-mcp/dark-mode-preview-after.png
new file mode 100644
index 0000000..83b4639
Binary files /dev/null and b/.playwright-mcp/dark-mode-preview-after.png differ
diff --git a/.playwright-mcp/preview-area.png b/.playwright-mcp/preview-area.png
new file mode 100644
index 0000000..25d4414
Binary files /dev/null and b/.playwright-mcp/preview-area.png differ
diff --git a/src/lib/components/ZettelEditor.svelte b/src/lib/components/ZettelEditor.svelte
index 6ca51b5..ff654a5 100644
--- a/src/lib/components/ZettelEditor.svelte
+++ b/src/lib/components/ZettelEditor.svelte
@@ -60,6 +60,9 @@
   let generatedEvents = $state<any>(null);
   let contentType = $state<"article" | "scattered-notes" | "none">("none");
 
+  // Dark mode state
+  let isDarkMode = $state(false);
+
   // Note: updateEditorContent() is only called manually when needed
   // The automatic effect was causing feedback loops with user typing
 
@@ -722,6 +725,36 @@
             outline: "none",
           },
         }),
+        // Override background and text to match preview (gray-800 bg, gray-100 text)
+        ...(isDarkMode ? [EditorView.theme({
+          "&": {
+            backgroundColor: "#1f2937",
+            color: "#f3f4f6",
+          },
+          ".cm-content": {
+            color: "#f3f4f6",
+          },
+          ".cm-line": {
+            color: "#f3f4f6",
+          },
+          ".cm-gutters": {
+            backgroundColor: "#1f2937",
+            borderColor: "#374151",
+            color: "#9ca3af",
+          },
+          ".cm-activeLineGutter": {
+            backgroundColor: "#374151",
+          },
+          ".cm-cursor": {
+            borderLeftColor: "#f3f4f6",
+          },
+          ".cm-selectionBackground, ::selection": {
+            backgroundColor: "#374151 !important",
+          },
+          "&.cm-focused .cm-selectionBackground, &.cm-focused ::selection": {
+            backgroundColor: "#4b5563 !important",
+          },
+        }, { dark: true })] : []),
       ],
     });
 
@@ -749,9 +782,41 @@
 
   // Mount CodeMirror when component mounts
   onMount(() => {
+    // Initialize dark mode state
+    isDarkMode = document.documentElement.classList.contains('dark');
     createEditor();
 
+    // Watch for dark mode changes
+    const observer = new MutationObserver(() => {
+      const newDarkMode = document.documentElement.classList.contains('dark');
+      if (newDarkMode !== isDarkMode) {
+        isDarkMode = newDarkMode;
+        // Recreate editor with new theme
+        if (editorView) {
+          const currentContent = editorView.state.doc.toString();
+          editorView.destroy();
+          createEditor();
+          // Restore content
+          if (editorView && currentContent !== content) {
+            editorView.dispatch({
+              changes: {
+                from: 0,
+                to: editorView.state.doc.length,
+                insert: currentContent,
+              },
+            });
+          }
+        }
+      }
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+
     return () => {
+      observer.disconnect();
       if (editorView) {
         editorView.destroy();
       }
@@ -887,7 +952,7 @@
           : 'w-full'} flex flex-col"
     >
       <div
-        class="flex-1 relative border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
+        class="flex-1 relative border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800"
         style="overflow: hidden;"
       >
         <!-- CodeMirror Editor Container -->
@@ -913,7 +978,7 @@
             </h3>
           </div>
 
-          <div class="flex-1 overflow-y-auto p-6 bg-white dark:bg-gray-900">
+          <div class="flex-1 overflow-y-auto p-6 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
             <div class="max-w-4xl mx-auto">
             {#if !content.trim()}
               <div
@@ -967,7 +1032,7 @@
                           <div class="flex flex-wrap gap-2">
                             {#each section.tags as tag}
                               <span
-                                class="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded-full text-xs font-medium"
+                                class="bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300 px-2 py-1 rounded-full text-xs font-medium"
                               >
                                 #{tag[1]}
                               </span>
@@ -1006,7 +1071,7 @@
                           <div class="flex flex-wrap gap-2">
                             {#each section.tags as tag}
                               <span
-                                class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 rounded-full text-xs font-medium"
+                                class="bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300 px-2 py-1 rounded-full text-xs font-medium"
                               >
                                 #{tag[1]}
                               </span>
@@ -1082,7 +1147,7 @@
                         </div>
                         <div class="relative flex justify-center">
                           <span
-                            class="bg-white dark:bg-gray-900 px-3 text-xs text-gray-500 dark:text-gray-400"
+                            class="bg-white dark:bg-gray-800 px-3 text-xs text-gray-500 dark:text-gray-400"
                           >
                             Event Boundary
                           </span>
@@ -1094,7 +1159,7 @@
               </div>
 
               <div
-                class="mt-4 text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-900 p-2 rounded border"
+                class="mt-4 text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-2 rounded border"
               >
                 <strong>Event Count:</strong>
                 {#if generatedEvents}