diff --git a/src/App.tsx b/src/App.tsx
index a683192..f89178a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -342,6 +342,7 @@ export default function App() {
         history(),
         search(),
         keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap]),
+        themeCompartmentRef.current.of(editorThemeExtension),
         lineNumbersCompartmentRef.current.of([]),
         editableCompartmentRef.current.of(EditorView.editable.of(true)),
         EditorView.updateListener.of((update) => {
@@ -364,7 +365,7 @@ export default function App() {
     editorViewRef.current = view;
     editorValueRef.current = bodyRef.current;
     setEditorReady(true);
-  }, []);
+  }, [editorThemeExtension]);
 
   const isViewingHistory = viewingVersion !== null;
   const isConverting = conversionJob !== null;
@@ -635,6 +636,14 @@ export default function App() {
     });
   }, [editorReady, isViewingHistory, markdownPreview, splitView]);
 
+  useEffect(() => {
+    const view = editorViewRef.current;
+    if (!view) return;
+    view.dispatch({
+      effects: themeCompartmentRef.current.reconfigure(editorThemeExtension)
+    });
+  }, [editorReady, editorThemeExtension]);
+
 
   useEffect(() => {
     const view = editorViewRef.current;
diff --git a/src/index.css b/src/index.css
index 65ba85e..e2fd652 100644
--- a/src/index.css
+++ b/src/index.css
@@ -135,6 +135,7 @@ body {
   border: 1px solid var(--border);
   background: var(--bg-elevated);
   color: var(--ink);
+  caret-color: var(--ink);
   font-size: 0.95rem;
 }
 
@@ -237,6 +238,7 @@ body {
   font: inherit;
   color: var(--ink);
   background: var(--bg-input);
+  caret-color: var(--ink);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 6px 10px;
@@ -360,6 +362,7 @@ body:not([data-theme="light"]) .folder-item {
   font: inherit;
   color: var(--ink);
   background: var(--bg-input);
+  caret-color: var(--ink);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 6px 10px;
@@ -489,6 +492,7 @@ body:not([data-theme="light"]) .folder-item {
   padding: 6px 2px 8px;
   background: transparent;
   color: var(--ink);
+  caret-color: var(--ink);
 }
 
 .title-input:focus {
@@ -1083,6 +1087,7 @@ body:not([data-theme="light"]) .folder-item {
   border: 1px solid var(--border);
   background: var(--bg-input);
   color: var(--ink);
+  caret-color: var(--ink);
   padding: 8px 10px;
   font-size: 0.95rem;
 }