CODEWITHSUNDEEP
terminalvisual-studio-code
John Jai
John Jai

Reputation: 3733

Color theme for VS Code integrated terminal

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

enter image description here

Upvotes: 230

Views: 331248

Answers (12)

SeanNguyen
SeanNguyen

Reputation: 11

Gruvbox Dark color:

"workbench.colorCustomizations": {
    "terminal.background":"#252525",
    "terminal.foreground":"#ecdbb2",
    "terminal.ansiBlack":"#353535",
    "terminal.ansiBrightBlack":"#a39586",
    "terminal.ansiBrightBlue":"#94b3a8",
    "terminal.ansiBrightCyan":"#9dd08e",
    "terminal.ansiBrightGreen":"#c4c431",
    "terminal.ansiBrightMagenta":"#dc9aab",
    "terminal.ansiBrightRed":"#fe6142",
    "terminal.ansiBrightWhite":"#efe1bf",
    "terminal.ansiBrightYellow":"#fcc73c",
    "terminal.ansiBlue":"#549699",
    "terminal.ansiCyan":"#79aa7d",
    "terminal.ansiGreen":"#a8a521",
    "terminal.ansiMagenta":"#bf7897",
    "terminal.ansiRed":"#d73925",
    "terminal.ansiWhite":"#b7a996",
    "terminal.ansiYellow":"#dfa82a"
  },

Upvotes: 1

JS-JeevaSaravanan
JS-JeevaSaravanan

Reputation: 587

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

Upvotes: 14

Longfei Wu
Longfei Wu

Reputation: 845

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.

Upvotes: 36

Rana Jayant
Rana Jayant

Reputation: 1413

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/#/

Upvotes: 129

Zrag123
Zrag123

Reputation: 3796

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

  1. Open user settings (Ctrl+,)
  2. 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.

Upvotes: 366

Fabrelle
Fabrelle

Reputation: 11

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/#/

Upvotes: 1

aazimkhani
aazimkhani

Reputation: 549

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  
}

Upvotes: 6

VonC
VonC

Reputation: 1329572

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;
    }

Upvotes: 2

aderchox
aderchox

Reputation: 4074

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.

Upvotes: 13

Dani Akash
Dani Akash

Reputation: 7106

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

Upvotes: 47

Danna Capellan
Danna Capellan

Reputation: 127

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

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

Upvotes: 5

A1991
A1991

Reputation: 43

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

Upvotes: -2

Related Questions