I have been too very quiet! I wanted a mash-up of a two Visual Studio Code themes - a light color theme for the main editor area, and a dark theme for the terminal, which I usually keep open. Here is an easy way to achieve this.
Overriding Colors for All Themes
This method fixes the terminal color scheme, no matter what theme you choose. You may not want this, instead one can just customize a specific theme by overriding specific colors, per documentation. More on that later.
- Assuming you start with VS Code configured the main theme of choice, then first thing to do is to switch to a theme that you like for the terminal, e.g. Dark+, Monokai (shown below), Solarized Dark, etc.
- From the Command Palette > Developer: Generate Color Theme from Current Settings (I just search for “settings”).
- A new editor will open with all the JSON settings for the current theme, e.g.
{ "$schema": "vscode://schemas/color-theme", "type": "light", "colors": { ... "editor.background": "#272822", "editor.foreground": "#f8f8f2", ... "terminal.ansiBlack": "#333333", "terminal.ansiBlue": "#6a7ec8", "terminal.ansiBrightBlack": "#666666", "terminal.ansiBrightBlue": "#819aff", "terminal.ansiBrightCyan": "#66d9ef", "terminal.ansiBrightGreen": "#a6e22e", "terminal.ansiBrightMagenta": "#ae81ff", "terminal.ansiBrightRed": "#f92672", "terminal.ansiBrightWhite": "#f8f8f2", "terminal.ansiBrightYellow": "#e2e22e", "terminal.ansiCyan": "#56adbc", "terminal.ansiGreen": "#86b42b", "terminal.ansiMagenta": "#8c6bc8", "terminal.ansiRed": "#c4265e", "terminal.ansiWhite": "#e3e3dd", "terminal.ansiYellow": "#b3b42b", ... //"terminal.border": "#414339", //"terminal.dropBackground": "#41433980", //"terminal.foreground": "#cccccc", //"terminal.selectionBackground": "#ffffff40", //"terminal.background": null, //"terminalCursor.background": null, //"terminalCursor.foreground": null, ...
- Since I’m only interested in the terminal colors, I look for properties related to
terminal.
and copy them. - In the snippet shown above, you will notice there are some settings that are commented
//
two of which are important to change:terminal.background
must be defined, and cannot benull
in order to retain the background color - replace the value with that ofeditor.background
instead.- similarly,
terminal.foreground
must be overridden - I simply uncommented the line, but the value can also be replaced with that ofeditor.foreground
.
- Switch back to the main theme of choice, e.g. Light+.
- Now, open the Command Palette > Preferences: Open User Settings (JSON) (I just search for “settings”).
- Edit the
settings.json
file, create (or replace) the section calledworkbench.colorCustomizations
, and copy all the terminalsettings
above (editterminal.background
too):"workbench.colorCustomizations": { "terminal.ansiBlack": "#333333", "terminal.ansiBlue": "#6a7ec8", "terminal.ansiBrightBlack": "#666666", "terminal.ansiBrightBlue": "#819aff", "terminal.ansiBrightCyan": "#66d9ef", "terminal.ansiBrightGreen": "#a6e22e", "terminal.ansiBrightMagenta": "#ae81ff", "terminal.ansiBrightRed": "#f92672", "terminal.ansiBrightWhite": "#f8f8f2", "terminal.ansiBrightYellow": "#e2e22e", "terminal.ansiCyan": "#56adbc", "terminal.ansiGreen": "#86b42b", "terminal.ansiMagenta": "#8c6bc8", "terminal.ansiRed": "#c4265e", "terminal.ansiWhite": "#e3e3dd", "terminal.ansiYellow": "#b3b42b", "terminal.background": "#272822" }
- This will now override the specific theme colors related to the terminal. Upon saving, the terminal colors will change immediately!
Removing Overrides
Note that at this point, Developer: Generate Color Theme from Current Settings again, will generate a JSON that comprises the mash up color settings of the base theme and the overrides above.
If you want to get rid of the overrides, delete workbench.colorCustomizations
from settings.json
and save.
Override a Specific Theme
To override the Terminal colors only for a specific theme, basically put everything under a section with the name of the theme, e.g. to override the Ysgrifennwr light theme (I learnt that Ysgrifennwr is Welsh for ‘writer’).
"workbench.colorCustomizations": {
"[Ysgrifennwr]": {
...
}
}
Updated 10 May 2023: Seems for my setup, the minimum settings.json
change for a dark terminal is:
"workbench.colorCustomizations": {
"terminal.background": "#1e1e1e",
"terminal.foreground": "#d4d4d4",
"terminal.inactiveSelectionBackground": "#3a3d41",
},