DEV Community

Sebastián Farías
Sebastián Farías

Posted on

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

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

Top comments (23)

Collapse
 
amanraj1608 profile image
Aman Raj

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

img

to

img2

Thanks in advance.

Collapse
 
sfarias051 profile image
Sebastián Farías

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

Collapse
 
wandingistaken profile image
Windyz

"terminal.background":"#231F20",
"terminal.foreground":"#D9D8D8",
"terminalCursor.background":"#D9D8D8",
"terminalCursor.foreground":"#D9D8D8",
"terminal.ansiBlack":"#231F20",
"terminal.ansiBlue":"#009DDC",
"terminal.ansiBrightBlack":"#737171",
"terminal.ansiBrightBlue":"#009DDC",
"terminal.ansiBrightCyan":"#85CEBC",
"terminal.ansiBrightGreen":"#00853E",
"terminal.ansiBrightMagenta":"#98005D",
"terminal.ansiBrightRed":"#EE2E24",
"terminal.ansiBrightWhite":"#FFFFFF",
"terminal.ansiBrightYellow":"#FFD204",
"terminal.ansiCyan":"#85CEBC",
"terminal.ansiGreen":"#00853E",
"terminal.ansiMagenta":"#98005D",
"terminal.ansiRed":"#EE2E24",
"terminal.ansiWhite":"#D9D8D8",
"terminal.ansiYellow":"#FFD204"

Collapse
 
ramakrishna_polisetty_a81 profile image
Ramakrishna Polisetty

Did u get an answer

Collapse
 
amanraj1608 profile image
Aman Raj

yes
Use WSL windows with zsh
youtube.com/watch?v=-atblwgc63E

Thread Thread
 
ramakrishna_polisetty_a81 profile image
Ramakrishna Polisetty

Ok but I have a mac

Thread Thread
 
voiedev profile image
Charles Allen

Zsh is the default shell on the latest MacOS

Install:

  • OhMyZsh
  • PowerLevel 9000 "theme" for OhMyZsh
Collapse
 
jeetintyagi profile image
jeetintyagi
Collapse
 
sebxyz profile image
Sebastiano

How can I get this?

Collapse
 
evilprince2009 profile image
Ibne Nahian

What theme did you use in your vscode ?

Collapse
 
amanraj1608 profile image
Aman Raj
Thread Thread
 
voiedev profile image
Charles Allen

Beautiful theme!

BTW if you're using Zsh now, you should also checkout OhMyZsh + PowerLevel 9000

Collapse
 
andes2912 profile image
Andri Desmana
Collapse
 
zamkam profile image
zamkam

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?

Collapse
 
inesgs12 profile image
Ines Guerrero • Edited

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

Collapse
 
timothy profile image
Timothy • Edited

You need to put everything inside the settings dictionary

Collapse
 
ranran2121 profile image
francesca

what do you mean by settings dictionary?

Collapse
 
remonetized profile image
Remonetized

Hi, this article was great, thank you! I use the MS Dos theme, which is great, but I don't like the terminal much tbh. This method let me change the terminal, but not the Problems, Output, Debug Console or my SQL console. Is there a way to set these colors, or revert them to the default while keeping the rest of the msdos theme?

Collapse
 
prayuditb profile image
Prayudi Tirta Bayu

thanks a lot, really appreciate it.

Collapse
 
de_heuer profile image
dominic.ryuhei

Perhaps you could try this:
glitchbone.github.io/vscode-base16...

Collapse
 
barnettlobel profile image
Barnett Lobel

thanks for posting this!

Collapse
 
williamgitau profile image
William Gitau

Exactly what I needed, thanks.

Collapse
 
akycdi profile image
Arun Kumar

I did not get it can anyone helpp.