How to customize command palette color and keybindings when creating vscode theme

Question

Creating a VSCode theme for myself. I like the color configuration I have at the moment, but when I open the command palette, it is 'see-through' making it hard to read. How can I configure the palette when designing my theme?

Answer 1

V1.36 added these two colorCustomizations for the command palette/quick open panel:

"quickInput.background": "#ff0000",
"quickInput.foreground": "#fff"

Thanks to add color controls to quick open panel PR.

---

And those keybindings shown to the right of each command will be themeable in v1.56 (in Insiders already). See https://github.com/microsoft/vscode/commit/a3444b121230a97f3ae07304780ea130ea092542

"workbench.colorCustomizations": {
  "keybindingLabelBackground": "#f00",
  "keybindingLabelForeground": "#f00",
  "keybindingLabelBorder": "#f00",
  "keybindingLabelBottomBorder": "#f00",
  "keybindingLabelShadow": "#f00"
}

Answer 2

To change the background of the command palette, modify the sideBar.background setting. More info

I had the exact same problem as you so I went hunting for it in the docs. At first I thought it was a list colour setting because changing list.focusBackground changes the selected item in the command palette.