CODEWITHSUNDEEP
visual-studio-code
jfmarquez
jfmarquez

Reputation: 69

Change hover color for quick picker

Is it possible to change the color for quick picker selected option via settings?

enter image description here

Upvotes: 3

Views: 3802

Answers (4)

Mark
Mark

Reputation: 182931

You really asked two questions: hover color in the question title and selected option color in the first sentence. Those are handled in two different ways:

"workbench.colorCustomizations": {

  "quickInputList.focusBackground": "#ff0000",  // the selected option color
  "list.hoverBackground": "#ff0000"             //  the hover color
}

The selected option is for when up/down arrow in the Command Palette/Quick Input and the hover is for a mouse hover.

Upvotes: 2

jparkrr
jparkrr

Reputation: 71

To keep your current theme and change just this color, find "Workbench: Color Customizations" in your settings and click "edit in settings.json", and add the following to the user settings on the right side of the screen:

"workbench.colorCustomizations": {
  "list.focusBackground": "#CCCCCC"
},

You can replace it with any color you'd like.

Upvotes: 6

Natsfan
Natsfan

Reputation: 4847

There are 2 variables that I know of associated with Quick Picker. Neither seem related to a hover color but they may be. The 2 are:

pickerGroup.border: Quick picker (Quick Open) color for grouping borders.
pickerGroup.foreground: Quick picker (Quick Open) color for grouping labels.

Hope one of these helps you. Try them in the settings file.

Upvotes: 0

Jan Andersen
Jan Andersen

Reputation: 773

You can install or download a new theme via:

Files -> Preferences -> Color Theme

Or you can create your own theme from scratch or reuse of an existing one with the VSCE tool:

https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers

Or you can simply find the theme in the folder::

\Microsoft VS Code\resources\app\extensions

Where the colors are saved in JSON files.

The defaults are in the:

\theme-defaults\themese

Here is the Visual Studio Light (light_defaults.json), where I just changed the list.hoverBackground color to some hideous purple:

{
    "$schema": "vscode://schemas/color-theme",
    "name": "Light Default Colors",
    "colors": {
        "editor.background": "#FFFFFF",
        "editor.foreground": "#000000",
        "editor.inactiveSelectionBackground": "#CCCCCC",
        "editorIndentGuide.background": "#D3D3D3",
        "editorIndentGuide.activeBackground": "#939393",
        "editor.selectionHighlightBackground": "#FFFFE0",
        "editorSuggestWidget.background": "#F3F3F3",
        "activityBarBadge.background": "#007ACC",
        "sideBarTitle.foreground": "#6F6F6F",
        "list.hoverBackground": "#FF00FF",
        "input.placeholderForeground": "#ADADAD"
    }
}

--- update ---

Different themes use more or fewer options depending on how much they vary from the default color. Missing ones can be added too. The ones you are looking for here are called list.hoverBackground and list.highlightForeground and they are pretty general affecting lots of different areas in VS Code. 

"list.hoverBackground": "#ffffff",
"list.highlightForeground": "#bbdaff",

Upvotes: 2

Related Questions