How to change the highlights for selected text and selection/word matches in VS Code?

by

To fill-in a couple of missing steps:

  1. Open the settings.json file (see below for location of this file)

  2. Add a comma to the last entry (before the closing brace })

  3. Paste-in:

    "workbench.colorCustomizations": {
        "editor.selectionBackground": "#e788ff", //Current SELECTED text
        "editor.selectionHighlightBackground": "#ff0000", //same content as the selection
        "editor.findMatchBackground": "#00cc44a8", //Current SEARCH MATCH
        "editor.findMatchHighlightBackground": "#ff7b00a1" //Other SEARCH MATCHES
    }

###Example of a typical settings file, post mod:

    {
        "git.enableSmartCommit": true,
        "git.autofetch": true,
        "breadcrumbs.enabled": true,
        "git.confirmSync": false,
        "explorer.confirmDelete": false,
        "code-runner.saveFileBeforeRun": true,
        "code-runner.saveAllFilesBeforeRun": true,
        "workbench.activityBar.visible": true,
        "files.trimTrailingWhitespace": true,
        "telemetry.enableTelemetry": false,
        "workbench.colorCustomizations": {
            "editor.selectionBackground": "#e788ff7c", //Current selected text
            "editor.selectionHighlightBackground": "#ff00005b", //Same content as selection
            "editor.findMatchBackground": "#00cc44a8", //Current SEARCH MATCH
            "editor.findMatchHighlightBackground": "#ff7b00a1" //Other SEARCH MATCHES
        }
    }

##Where to find the settings.json file:

Depending on your platform, the user settings file is located here:

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

##ALTERNATE method to open the settings.json file:

  1. CTRL+SHIFT+P type settings.json, select Preferences: Open user settings (JSON)

or

  1. Ctrl + , (comma) to open Settings

  2. Workbench

  3. Settings Editor

  4. In the search box at top, paste-in workbench.colorCustomizations

  5. On the left, click Workbench and then Appearance

  6. Click the link to right: Edit in settings.json

References:

https://code.visualstudio.com/api/references/theme-color#editor-colors

https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme

https://code.visualstudio.com/docs/getstarted/settings

Leave a Comment