Color theme for VS Code integrated terminal

Question

Can we change color settings of VS Code Integrated Terminal? Mine looks dull with just white.

[Here's a useful theme generator](https://glitchbone.github.io/vscode-base16-term/#/) to modify your `"workbench.colorCustomizations"` in settings.json — Darragh Enright, Apr 19 '20 at 14:18
Different background color and customization *per* terminal window would be nice. — jarmod, Nov 17 '20 at 17:19
To customize the terminal find highlight color add `"terminal.selectionBackground": "#e26cffcb",` on the dark theme. See [vscode-terminal-change-the-find-highlight-color](https://stackoverflow.com/questions/68776940/vscode-terminal-change-the-find-highlight-color?noredirect=1&lq=1) — Ricardo, Jan 03 '22 at 20:11
Here is a video that shows how to change the terminal colors in vscode https://youtu.be/p4h-5B8k2NY — Adam, Jun 28 '22 at 20:48

score 341 · Accepted Answer · edited Jul 07 '21 at 18:27

341

You can actually modify your user settings and edit each colour individually by adding the following to the user settings.

Open user settings (Ctrl+,)
Search for workbench and select Edit in settings.json under Color Customizations

"workbench.colorCustomizations" : {
    "terminal.foreground" : "#00FD61",
    "terminal.background" : "#383737"
}

For more on what colors you can edit you can find out here.

edited Jul 07 '21 at 18:27

Josh Correia

3,807
3
33
50

answered Sep 12 '17 at 01:23

Zrag123

3,546
1
13
6

I believe they removed this functionality. Are you certain this still works in the latest version? – Mark A. Donohoe Oct 21 '17 at 13:12
3

It's currently working for me, my VSCode version is 1.17.2 (which is the latest) – Zrag123 Oct 22 '17 at 22:02
1

You're right. Odd. They said it was removed, but it is there. Just tried it myself and it worked. I was disappointed that they said it was removed. Glad to see that's not the case. – Mark A. Donohoe Oct 23 '17 at 03:35
this should be marked as the correct answer. still works in build 1.18 – Individual11 Nov 11 '17 at 19:53
2

This works correctly! I also want to learn how to get contrast colors in terminal though! – theusual Feb 13 '18 at 18:46
4

Still works as of 1.24.0. I think part of the confusion is that you can't search for `terminal.background` in settings (`'workbench.colorCustomizations': {}` is the default), so it seems like a missing feature at first glance. – Jim K. Jun 28 '18 at 20:03
It worked for me, but weirdly enough, I had to set `"workbench.colorCustomizations": { "terminal.ansiBlack": "#cccccc" }` and now I can read what's on the terminal (with a dark theme). – rafaelbiten Apr 20 '19 at 23:29
Bob and Pman - I believe you guys and accepting this as the answer. – John Jai Oct 07 '19 at 21:20
I didn't have "workbench.colorCustomizations" in my settings.json. After adding that along with the above, it worked for me. – OJ7 Oct 14 '19 at 17:18
1

as i'm 40 next year, i appreciate your example which makes the VS Code terminal like my very first computer the Amstrad CPC 464 :) – JGilmartin Jan 25 '20 at 13:57
How can I change the color of the username only? Can't find any commands about that – Apinorr Oct 02 '21 at 14:54
I confirm it also works in the latest OpenVSCode Server. – mirekphd Nov 11 '22 at 17:42
Also, it is worth noting that you can scope the override to a specific theme by adding "[themeName]": { } under `workbench.colorCustomizations` i.e. the themeName must be withing square brackets. – justin Feb 18 '23 at 17:32

Rana Jayant · Answer 2 · 2022-10-27T08:18:21.370

110

In case you are color picky, use this code to customize every segment.

Step 1: Open user settings
Windows: Ctrl+,
Mac: CMD+Shift+P

Step 2: Search for "workbench: color customizations" and select Edit in settings.json. Page the following code inside existing {} and customize as you like.

"workbench.colorCustomizations": {
    "terminal.background":"#131212",
    "terminal.foreground":"#dddad6",
    "terminal.ansiBlack":"#1D2021",
    "terminal.ansiBrightBlack":"#665C54",
    "terminal.ansiBrightBlue":"#0D6678",
    "terminal.ansiBrightCyan":"#8BA59B",
    "terminal.ansiBrightGreen":"#237e02",
    "terminal.ansiBrightMagenta":"#8F4673",
    "terminal.ansiBrightRed":"#FB543F",
    "terminal.ansiBrightWhite":"#FDF4C1",
    "terminal.ansiBrightYellow":"#FAC03B",
    "terminal.ansiBlue":"#00a1f9",
    "terminal.ansiCyan":"#8BA59B",
    "terminal.ansiGreen":"#95C085",
    "terminal.ansiMagenta":"#8F4673",
    "terminal.ansiRed":"#FB543F",
    "terminal.ansiWhite":"#A89984",
    "terminal.ansiYellow":"#FAC03B"
},

Resource: This site has VS Code themes you can copy/paste in settings. https://glitchbone.github.io/vscode-base16-term/#/

edited Oct 27 '22 at 08:18

answered Nov 23 '19 at 07:01

Rana Jayant

1,215
1
9
9

7

Thanks! Blue is missing: e.g. `"terminal.ansiBlue":"#00a1f9"` – Panagiotis Panagi Jul 26 '20 at 20:43
20

This website provides a bunch of terminal themes customizations that you can copy/paste into your settings: https://glitchbone.github.io/vscode-base16-term/ – OJ7 Mar 24 '21 at 18:44
Thanks. It's not a matter of being color picky... it's more like, some of these default colors don't work for everyone - red on black background ? Can barely see... there are other people on my team who have trouble seeing for example, green. So this will help everyone.. and yeah, I had red on black :-) – AlexD Feb 27 '22 at 19:34
1

If you are a visual learner here is a short video https://youtu.be/rYb_WpOc0UY – Adam Jun 28 '22 at 18:48

score 48 · Answer 3 · edited Jul 07 '21 at 18:30

48

VSCode comes with in-built color themes which can be used to change the colors of the editor and the terminal.

For changing the color theme press Ctrl+K+T in windows/ubuntu or CMD+K+T on mac.
Alternatively you can open command palette by pressing Ctrl+Shift+P in windows/ubuntu or CMD+Shift+P on mac and type color. Select preferences: color theme from the options, to select your favourite color.
You can also install more themes from the extensions menu on the left bar. just search category:themes to install your favourite themes. (If you need to sort the themes by installs search category:themes @sort:installs)

Edit - for manually editing colors in terminal

VSCode team have removed customizing colors from user settings page. Currently using the themes is the only way to customize terminal colors in VSCode. For more information check out issue #6766

edited Jul 07 '21 at 18:30

Josh Correia

3,807
3
33
50

answered Apr 16 '17 at 10:49

Dani Akash

6,828
3
35
47

37

Thank you for your answer, but the global themes have minimal impact on the terminal window, only affecting background and foreground color in a very broad sense. OP and I were looking to colorize the prompt, input command, and output independently, not just change between white-on-black and black-on-white. Know of a way to gain more control over the terminal text colors? – kjhughes Apr 16 '17 at 13:34
1

Seems like they removed customizing colors from user settings page. Currently using the themes seems to be the only way to customize terminal colors in VSCode. check out https://github.com/Microsoft/vscode/issues/6766 – Dani Akash Apr 17 '17 at 04:49
It's unfortunate that that the answer appears to be that it currently isn't supported, but it's useful to know nonetheless. I'll assign you the bounty. Thanks for tracking this down. – kjhughes Apr 17 '17 at 13:09
2

From what I can tell, it *is* still in there to customize from the settings. Open settings and look for 'workbench.colorCustomizations' – Mark A. Donohoe Oct 23 '17 at 03:34
1

This is to change the global color theme and doesnt affect the integrated terminal – Akh Feb 04 '19 at 18:45
this should be the accepted answer, other answer doesnt work anymore +1 – Coder Jan 22 '21 at 04:52
@kjhughes - I was looking for how to colorize the prompt as well. Found that at least on a Mac, adding export PS1="\[\e[0;34m\]\u\[\e[0;32m\]@\[\e[0;36m\]\w \[\e[0;37m\]\@ \[\e[0;35m\]$ \[\e[0m\]" to my ~/.bashrc and then sourcing that colorizes the prompt. – dmohr Oct 06 '22 at 15:47

score 35 · Answer 4 · answered Aug 06 '19 at 03:41

35

Add workbench.colorCustomizations to user settings

"workbench.colorCustomizations": {
  "terminal.background":"#FEFBEC",
  "terminal.foreground":"#6E6B5E",
  ...
}

Check https://glitchbone.github.io/vscode-base16-term for some presets.

answered Aug 06 '19 at 03:41

Longfei Wu

815
10
9

7

the interactive presets site is a fantastic resource – mdisibio Mar 19 '20 at 17:21

score 13 · Answer 5 · edited Jul 09 '21 at 17:37

The best colors I've found --which aside from being so beautiful, are very easy to look at too and do not boil my eyes-- are the ones I've found listed in this GitHub repository: VSCode Snazzy

Very Easy Installation:

Copy the contents of snazzy.json into your VS Code "settings.json" file.

(In case you don't know how to open the "settings.json" file, first hit Ctrl+Shift+P and then write Preferences: open settings(JSON) and hit enter).

_Notice:_ For those who have tried ColorTool and it works outside VSCode but not inside VSCode, you've made no mistakes in implementing it, that's just a decision of VSCode developers for the VSCode's terminal to be colored independently.

score 12 · Answer 6 · answered May 19 '21 at 04:25

Go to the settings of VSCode

On Windows/Linux - File > Preferences > Settings or Shortcut(ctrl,)

On macOS - Code > Preferences > Settings or Shortcut (⌘,) or Search (⇧⌘P) → “Preferences: Open Settings”

Search for "workbench: color customizations" and open the settings.json file

You can see workbench.colorCustomizations as empty if you are editing it for the first time,

"workbench.colorCustomizations": {
}

Edit or Paste your configuration under workbench.colorCustomizations

Fill it with your customized options, I sharing Isotope theme here

"workbench.colorCustomizations": {

    "terminal.background":"#000000",
    "terminal.foreground":"#D0D0D0",
    "terminalCursor.background":"#D0D0D0",
    "terminalCursor.foreground":"#D0D0D0",
    "terminal.ansiBlack":"#000000",
    "terminal.ansiBlue":"#0066FF",
    "terminal.ansiBrightBlack":"#808080",
    "terminal.ansiBrightBlue":"#0066FF",
    "terminal.ansiBrightCyan":"#00FFFF",
    "terminal.ansiBrightGreen":"#33FF00",
    "terminal.ansiBrightMagenta":"#CC00FF",
    "terminal.ansiBrightRed":"#FF0000",
    "terminal.ansiBrightWhite":"#FFFFFF",
    "terminal.ansiBrightYellow":"#FF0099",
    "terminal.ansiCyan":"#00FFFF",
    "terminal.ansiGreen":"#33FF00",
    "terminal.ansiMagenta":"#CC00FF",
    "terminal.ansiRed":"#FF0000",
    "terminal.ansiWhite":"#D0D0D0",
    "terminal.ansiYellow":"#FF0099"
}

Now you can able to see your changes in VS Code Terminal

For more themes => Base16 Themes

For more customization => VSCode Terminal Colors

`terminalCursor.background` and `terminalCursor.foreground` shouldn't be the same colour. You can't see text if the cursor is over it. In my theme, I set `terminalCursor.background` the same as `terminal.background` and that works. — wjandrea, Mar 29 '23 at 19:35

score 5 · Answer 7 · answered Feb 22 '22 at 12:22

5

if you want prebuilt theme for terminal first check out this link

copy the theme you want and in settings.json add:

"workbench.colorCustomizations":{
 //paste the copied theme  
}

answered Feb 22 '22 at 12:22

aazimkhani

459
5
8

score 4 · Answer 8 · answered Jun 17 '21 at 15:39

4

I use Oh My Zsh. It takes the dullness away and also have nice features.

Check the link here: https://ohmyz.sh/

answered Jun 17 '21 at 15:39

Danna Capellan

107
6

score 2 · Answer 9 · answered Sep 19 '21 at 00:19

2

Check also VSCode 1.61 (Sept. 2021) with:

It adds:

    export interface TerminalOptions {
        /**
         * Supports all ThemeColor keys, terminal.ansi* is recommended for contrast/consistency
         */
        color?: ThemeColor;
    }
    export interface ExtensionTerminalOptions {
        /**
         * Supports all ThemeColor keys, terminal.ansi* is recommended for contrast/consistency
         */
        color?: ThemeColor;
    }

answered Sep 19 '21 at 00:19

VonC

1,262,500
529
4,410
5,250

Could you give an example of what this looks like filled out, and where this needs to go? (or are these shell commands?) – Sterling Oct 21 '21 at 21:57
@Sterling I don't have much beside what you can see in https://github.com/microsoft/vscode/issues/128228#issuecomment-879163304 – VonC Oct 22 '21 at 07:03

score 0 · Answer 10 · answered May 30 '20 at 08:53

0

Simply. You can go to 'File -> Preferences -> Color Theme' option in visual studio and change the color of you choice.

answered May 30 '20 at 08:53

A1991

47
1

This does not change the text color of terminal. – hatirlatici Apr 08 '21 at 08:54

score 0 · Answer 11 · answered Aug 05 '22 at 07:43

0

On macOS - Code > Preferences > Settings or Shortcut (⌘,) or Search (⇧⌘P) → “Preferences: Open Settings”

"workbench.colorCustomizations": { } and choose which color you want form here: https://glitchbone.github.io/vscode-base16-term/#/

answered Aug 05 '22 at 07:43

Fabrelle

1

Color theme for VS Code integrated terminal

11 Answers11

Linked