Change the Cursor color, style and animation in VS Code

avatar
Borislav Hadzhiev

Last updated: Mar 11, 2023
3 min

banner

# Changing the Color of the cursor in VS Code

To change the color of the cursor in VS Code:

  1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).
Note: you can also press F1 to open the Command Palette.
  1. Type user settings json.

  2. Click on Preferences: Open User Settings (JSON)

preferences open user settings

  1. Set the following properties under workbench.colorCustomizations.
settings.json
"workbench.colorCustomizations": { "editorCursor.foreground": "#FF75D8", "terminalCursor.foreground": "#FF75D8" }

change cursor color vscode

Note: if you already have the workbench.colorCustomizations property set in your settings.json file, you have to add the editorCursor.foreground and terminalCursor.foreground under the existing workbench.colorCustomizations object.

Make sure to not duplicate the property.

The color can be set using the following formats:

  • #RGB
  • #RGBA
  • #RRGGBB
  • #RRGGBBAA

The settings in the example set the cursor color to pink.

set cursor color

If you want to change the cursor color only in the current project, use the local .vscode/settings.json file instead.

  1. In the root directory of your project, create a .vscode folder.

  2. Create a settings.json file in the .vscode folder.

  3. Add the following code to your settings.json file.

.vscode/settings.json
{ "workbench.colorCustomizations": { "editorCursor.foreground": "#FF75D8", "terminalCursor.foreground": "#FF75D8" } }

update settings in vscode settings json

The properties you set in your .vscode/settings.json file only apply to the current project and override any existing configuration set in your global settings.json file.

# Changing the Style and the Animation of the Cursor in VS Code

If you need to change the style or the animation of the cursor:

  1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).
Note: you can also press F1 to open the Command Palette.
  1. Type user settings and select Preferences: Open User Settings.

open user settings

You can also open the settings screen by pressing Ctrl + , on Windows and Linux or Cmd + , on macOS.

  1. Type cursor style.

search for cursor style

For example, the Editor: Cursor Blinking setting is used to control the cursor animation style.

The available values are:

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

Here is a short clip of using the smooth cursor animation style.

smooth cursor animation style

Here is a clip of using the phase cursor animation style.

using phase cursor animation

Here is a clip of using the expand animation style.

expand cursor animation style

There is also a solid style if you want no animation at all.

solid cursor style

You can use the Editor: Cursor Style setting to control the cursor style.

The available values are:

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

Here is a clip of using the block cursor style.

using block cursor style

Here is a clip of using the underline cursor style.

using underline cursor style

Here is a clip of using the block-outline cursor style.

using block outline cursor style

The Terminal Integrated: Cursor Style setting is used to control the style of the terminal cursor.

The available values are:

  • block (default)
  • line
  • underline

You can also set the animation and style of the cursor using the settings.json file.

  1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).
Note: you can also press F1 to open the Command Palette.
  1. Type user settings json.

  2. Click on Preferences: Open User Settings (JSON)

preferences open user settings

  1. Set the following properties in your settings.json file.
settings.json
"editor.cursorBlinking": "smooth", "editor.cursorWidth": 3, "editor.cursorStyle": "line", "terminal.integrated.cursorStyle": "line", "terminal.integrated.cursorWidth": 3, "terminal.integrated.cursorBlinking": false,

customize cursor style and animation settings json

You can set the properties to any values that suit your use case or remove the properties to use the default values.

If you delete the value of the property, you should get an autocomplete menu with the available values for the given property.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.