visual-studio-codevscode-extensions

change the color of the cursor in code


I'm working on an extension for vs code which has certain modes, and i wanted to change cursor color (the caret not the mouse cursor) at certain conditions met in my code.

I also am aware that i can use the status bar item (which i've already updated), however i feel that changing the color of the cursor which is where your eye is already focused would be a better indicator that you're in a certain mode.

Is there a way for me to change it in code? So far from what i have searched, i only see it being changed through the settings.json. Any help/nudge towards the right direction to getting this accomplished would be appreciated!


Solution

  • Solved: Change VSCode Cursor Color Programmatically

    If you're trying to change the cursor color in VSCode through code, here's how you can do it:

    const configuration = vscode.workspace.getConfiguration('workbench'); 
    // Access the workbench settings where 'colorCustomizations' is defined
    
    configuration.update('colorCustomizations', { "editorCursor.foreground": "#FF0000" }, true);
    // Changes the cursor color to red and applies it globally (user settings.json)
    

    To revert back to the default cursor color, you have two options:

    1. Remove the customization:
    configuration.update('colorCustomizations', { "editorCursor.foreground": undefined }, true);
    // Deletes the 'editorCursor.foreground' setting
    
    1. Restore the theme's original cursor color:
    const CURSOR_FOREGROUND = new vscode.ThemeColor('editorCursor.foreground');
    // Retrieve the default theme color for the cursor
    configuration.update('colorCustomizations', { "editorCursor.foreground": CURSOR_FOREGROUND }, true);
    // Applies the original theme color back