VS Code Override Terminal Color Theme

Posted

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 be null in order to retain the background color - replace the value with that of editor.background instead.
    • similarly, terminal.foreground must be overridden - I simply uncommented the line, but the value can also be replaced with that of editor.foreground.
  • Switch back to the main theme of choice, e.g. Light+.
  • Now, open the Command Palette > Preferences: Open Settings (JSON) (I just search for “settings”).
  • Edit the settings.json file, create (or replace) the section called workbench.colorCustomizations, and copy all the terminal settings above (edit terminal.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!

VS Code Override Theme Terminal Colors

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]": {
...
    }
}