Skip to content

VS Code: Change Cursor Color, Style & Animation

I think customizing the cursor can make your coding experience more enjoyable and efficient.

That’s why in this post I’m going to show you how to customize the cursor in VS Code.

We’ll be changing the cursor in both the editor and the terminal.

Let’s get started!

Change cursor color

To change the color of the cursor in VS Code:

  1. Press CTRL + SHIFT + P (or Command + SHIFT + P on macOS)
  2. Type settings.json
  3. Select Preferences: Open Current Profile Settings (JSON)

VS Code settings.json file

  1. Set the following properties under the workbench.colorCustomizations object:

⚠️ Warning

Make sure you don't duplicate the workbench.colorCustomizations object. If you don't have it in your settings.json file, you can create it.


🎥 Would you prefer a video version of this post? Check this out:


Change cursor style & animation

Let’s see how to customize the cursor style & animation in the Settings panel.

  1. Press CTRL + , (comma) (or Command + , on macOS) to open the Settings
  2. Type cursor style

Here we have a bunch of settings we can play around with.

VS Code cursor style settings panel

The Editor: Cursor Blinking is used to control the editor cursor animation style and holds the following values:

  • blink (by default)
  • smooth
  • phase
  • expand
  • solid

To see an example of how each option would look, check out this video.

The Editor: Cursor Style is used to control the editor cursor style and holds the following values:

  • line (by default)
  • block
  • underline
  • line-thin
  • block outline
  • underline-thin

The Terminal > Integrated: Cursor Style is used to control the style of the terminal cursor and holds the following values:

  • block (default)
  • line
  • underline

To change the animation of the terminal cursor, search for terminal cursor style in the same Settings panel.

VS Code terminal cursor style

The Terminal > Integrated: Cursor Style holds the following values:

  • block (by default)
  • line
  • underline

That’s all for this article! Happy coding! 😊

Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.