29

Does anyone know how to customize the file explorer window color theme in VS Code? Also how to customize the color of line numbers?

For example, when using the built-in High Contrast color theme, I can see that the file explorer and line number colors are different. But I can't find a way to customize the colors when using an extension color theme, like the material-theme.

2 Answers 2

33

From your settings.json Ctrl+,

"workbench.colorCustomizations": {
    "sideBar.background": "#424d66",
    "list.hoverBackground": "#41a6d9",
}

File explorer uses sidebar and list colors.

Color of line numbers:

"editorLineNumber.foreground": "#41a6d9",
"editorLineNumber.activeForeground": "#ff6a00",

https://code.visualstudio.com/docs/getstarted/theme-color-reference#_editor-colors

2
  • 1
    The explorer list is very compact IMO. Is there a way I can increase each item height?
    – Mahendran
    Commented May 16, 2021 at 18:45
  • 1
    Only if you zoom in the entire interface.
    – Alex
    Commented May 17, 2021 at 7:12
9

enter image description here

assuming you'd like to get a white sidebar and black text in it you need to edit your settings.json like this:

"workbench.colorCustomizations": {
"sideBar.background": "#ffffff",
"sideBar.foreground": "#000000",
"list.hoverForeground": "#ffffff" 
}
1
  • 1
    Hello from 2022! This is the correct answer, in my time. Commented Nov 30, 2022 at 1:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.