1

How can I customize my Visual Studio Code terminal so that it looks like this?

enter image description here

My current terminal

enter image description here

AmAn KumAr
  • 376
  • 2
  • 12
  • Does this answer your question? [Color theme for VS Code integrated terminal](https://stackoverflow.com/questions/42307949/color-theme-for-vs-code-integrated-terminal) – funie200 Oct 19 '20 at 08:02
  • No, it doesn't. It is to change the color of the integrated terminal. Mine terminal is complete different – AmAn KumAr Oct 19 '20 at 08:10
  • What kind of terminal are you referring to then? – funie200 Oct 19 '20 at 08:20
  • I have shown in the question – AmAn KumAr Oct 19 '20 at 08:27
  • The image of the terminal in the question is a picture of the integrated terminal. And my duplicate question has a solution for the integrated terminal. So I do not get the difference you're referring to. – funie200 Oct 19 '20 at 08:33
  • In your question, only the color of the terminal is changing but I don't want to change the color only I want to change the default PowerShell terminal to git bash terminal. – AmAn KumAr Oct 19 '20 at 08:51

2 Answers2

1

To change the look of the integrated terminal in VS Code, you will need to edit the settings.json file. This is how you can access the file:

Windows/Linux: File > Preference > Settings . Alternatively, you can press ctrl + shift + P to open Preferences: Open Settings (JSON)

MacOs: Code > Preferences > Settings. Alternatively, you can press:

  • Shortcut (⌘)
  • Search (⇧⌘P) → “Preferences: Open Settings”

Then search for Workbench > Appearance > Color Customizations. You will find your settings.json file. Make edits on the file.

You will find:

"workbench.colorCustomizations": {
        # Add your theme here    
    }

Example themes can be:

      "terminal.background":"#1D2021",
      "terminal.foreground":"#A89984",
      "terminalCursor.background":"#A89984",
      "terminalCursor.foreground":"#A89984",
      "terminal.ansiBlack":"#1D2021",
      "terminal.ansiBlue":"#0D6678",
      "terminal.ansiBrightBlack":"#665C54",
      "terminal.ansiBrightBlue":"#0D6678",
      "terminal.ansiBrightCyan":"#8BA59B",
      "terminal.ansiBrightGreen":"#95C085",
      "terminal.ansiBrightMagenta":"#8F4673",
      "terminal.ansiBrightRed":"#FB543F",
      "terminal.ansiBrightWhite":"#FDF4C1",
      "terminal.ansiBrightYellow":"#FAC03B",
      "terminal.ansiCyan":"#8BA59B",
      "terminal.ansiGreen":"#95C085",
      "terminal.ansiMagenta":"#8F4673",
      "terminal.ansiRed":"#FB543F",
      "terminal.ansiWhite":"#A89984",
      "terminal.ansiYellow":"#FAC03B"

Find customization documentation from VS Code here. More here

Gitau Harrison
  • 3,179
  • 1
  • 19
  • 23
  • It will only change the color of the terminal.Please tell me how can I make my terminal look like the picture which I have given in the question – AmAn KumAr Oct 19 '20 at 08:26
0

Judging from the first screenshot, this should be taken from a Linux or MacOS terminal with the Oh My Zsh framework installed. This framework allows custom theming to the terminal. Unfortunately, this framework is exclusive to Z shell terminals, which are only available on Linux and MacOS.

Fortunately, there's a workaround for Windows users. Windows has introduced the Windows Subsystem for Linux (WSL) that allows you to run Linux on your Windows. Please read the docs here to learn how to install WSL system on your Windows. After installing WSL on your system, check out this guide that shows the steps of installing Z Shell on your WSL system and install Oh My Zsh framework in the shell.

Finally, go to VS Code and set the default terminal to be your WSL Z shell Terminal. You may check out this short article for more details.

AnsonH
  • 2,460
  • 2
  • 15
  • 29