How to Fix Invisible Cursor in VS Code Dark Theme

The cursor is invisible because the default dark theme sets the cursor color to the same shade as the background.
You can override the color (or style) globally or per file type by editing settings.json and adding a workbench.colorCustomizations entry for editorCursor.foreground, or by changing the built‑in editor.cursorStyle and editor.cursorBlinking options.

Contents

• How to locate and edit settings.json
• Changing the cursor color
• Adjusting cursor style and width
• Using a custom theme or extension for advanced control
• Troubleshooting common issues

How to locate and edit settings.json

1. Open the command palette (Ctrl+Shift+P / Cmd+Shift+P).
2. Type Preferences: Open Settings (JSON) and select it.
   This opens the settings.json file where you can add or modify user‑level settings, for example, to tweak the cursor.

   See the official VS Code docs for details on the Settings UI – VS Code Settings Reference.

Changing the cursor color

Add the following snippet to settings.json:

{
  "workbench.colorCustomizations": {
    "editorCursor.foreground": "#FF00FF"   // replace with any hex, RGB, or color name
  }
}

Why it works:
editorCursor.foreground overrides the cursor color defined by the active theme.
You can choose any contrasting color; a bright magenta or neon green often provides clear visibility on dark backgrounds.

Official reference for color overrides – Color Customizations.

Adjusting cursor style and width

If you prefer a block or underline cursor, or want to make it thicker, add these settings:

{
  "editor.cursorStyle": "line",          // options: line, block, underline, lineThin, blockOutline, underlineOutline
  "editor.cursorBlinking": "blink",      // options: blink, smooth, phase, expand, solid
  "editor.cursorWidth": 2                // width in pixels
}

Common combinations:

See the editor cursor settings documentation – Editor Cursor Customization.

Using a custom theme or extension for advanced control

If you want per‑language cursor colors or more granular styling:

1. Create a custom theme – copy an existing theme JSON, modify the tokenColors and colors.editorCursor.foreground, then load it via File → Preferences → Color Theme.

2. Use the “Custom CSS and JS Loader” extension – inject CSS that targets the cursor, e.g.:

   css

   .monaco-editor .cursor {
     background-color: #00FF00 !important; /* bright green */
   }
   

These methods give you full control but require additional maintenance when themes update.

Guide on creating custom themes – Custom Theme Creation.

Troubleshooting common issues

Conclusion

• Open settings.json and add a workbench.colorCustomizations entry for editorCursor.foreground to set a contrasting color.
• Fine‑tune the cursor’s style, blinking, and width with editor.cursorStyle, editor.cursorBlinking, and editor.cursorWidth.
• For advanced per‑language or theme‑specific control, consider creating a custom theme or using the Custom CSS extension.
• If the cursor still appears invisible, double‑check that no workspace settings or extensions are overriding your preferences.
  In fact, by following these steps, you’ll restore a visible, well‑contrasted cursor while keeping your dark theme intact.