loading...

How to change the terminal style in VSCode in an easy way

sfarias051 profile image Sebastián Farías ・1 min read

I just required to change the look for the integrated terminal, and I just figured out how easy is this.

So…. here you have a happy walk around to do it 🙂

  1. Go to the settings (In VSCode obviously)
    • On Windows/Linux - File > Preferences > Settings
    • On macOS - Code > Preferences > Settings
      • Shortcut (⌘,)
      • Search (⇧⌘P) → “Preferences: Open Settings”
  2. Search for "workbench: color customizations" and open the settings.json file
  3. Edit or Paste your configuration under workbench.colorCustomizations
    1. https://code.visualstudio.com/api/references/theme-color
    "workbench.colorCustomizations": {
      "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"
    }

After that little change, you can check your integrated terminal in VS Code
Integrated Terminal VSCode

You can find several predefined templates here:
https://glitchbone.github.io/vscode-base16-term/#/

https://code.visualstudio.com/docs/getstarted/settings

https://code.visualstudio.com/api/references/theme-color

https://glitchbone.github.io/vscode-base16-term/#/

Posted on by:

sfarias051 profile

Sebastián Farías

@sfarias051

Mountain Climber, Mountain Biker, Full Stack Developer

Discussion

pic
Editor guide
 

Hey can you tell me how can I change my terminal from

img

to

img2

Thanks in advance.

 

Hi, You need to look for this configuration zsh(shell) + oh-my-zsh(framework on top of shell)

 
 

Background/Foreground colors are changed correctly, but these changes don't seem to affect the command line itself, meaning the stuff I type after the prompt. For example, "ls --all" displays the "ls" in yellow, and the option "--all" in dark gray, independently of the color I choose for background/foreground. The dark gray is particularly annoying, since it's almost invisible. How can I change that?

 

Hey, do you have any idea why nothing changes in my terminal when I add a theme customization?

 

You need to put everything inside the settings dictionary