From 0e2cf20b11cf1c13b8072646c1556f6fb088f8cb Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Mon, 24 Nov 2025 17:26:40 +0000
Subject: [PATCH] fix: cursor visibility in light theme

- Add --color-caret CSS variable (white for dark, dark for light)
- Update VimTextArea to use theme-aware caret color
- Apply to both insert mode cursor and vim normal mode block cursor
---
 src/browser/components/VimTextArea.tsx | 6 +++---
 src/browser/styles/globals.css         | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/browser/components/VimTextArea.tsx b/src/browser/components/VimTextArea.tsx
index 9e44d868d..5da3e933d 100644
--- a/src/browser/components/VimTextArea.tsx
+++ b/src/browser/components/VimTextArea.tsx
@@ -234,8 +234,8 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
                 : "bg-dark border-border-light",
               !isEditing && (mode === "plan" ? "focus:border-plan-mode" : "focus:border-exec-mode"),
               vimMode === "normal"
-                ? "caret-transparent selection:bg-white/50"
-                : "caret-white selection:bg-selection"
+                ? "caret-transparent selection:bg-caret/50"
+                : "caret-caret selection:bg-selection"
             )}
           />
           {trailingAction && (
@@ -244,7 +244,7 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
             </div>
           )}
           {vimEnabled && vimMode === "normal" && value.length === 0 && (
-            <div className="pointer-events-none absolute top-1.5 left-2 h-4 w-2 bg-white/50" />
+            <div className="bg-caret/50 pointer-events-none absolute top-1.5 left-2 h-4 w-2" />
           )}
         </div>
       </div>
diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css
index ee0cf3cd5..d2c564298 100644
--- a/src/browser/styles/globals.css
+++ b/src/browser/styles/globals.css
@@ -235,6 +235,9 @@
     --color-selection: hsl(204 100% 60% / 0.5); /* selection blue with 50% opacity */
     --color-vim-status: hsl(0 0% 83% / 0.6); /* status text with 60% opacity */
     --color-code-keyword-overlay-light: hsl(210 100% 70% / 0.05); /* code keyword with 5% opacity */
+
+    /* Caret */
+    --color-caret: hsl(0 0% 100%);
     --color-code-keyword-overlay: hsl(210 100% 70% / 0.2); /* code keyword with 20% opacity */
 
     /* Info/status colors */
@@ -453,6 +456,9 @@
   --color-selection: hsl(204 100% 45% / 0.3);
   --color-vim-status: hsl(210 18% 32% / 0.6);
   --color-code-keyword-overlay-light: hsl(210 88% 28% / 0.16);
+
+  /* Caret */
+  --color-caret: hsl(210 18% 16%);
   --color-code-keyword-overlay: hsl(210 88% 28% / 0.32);
 
   --color-info-light: hsl(5 90% 70%);