DEV Community

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

Discussion (19)

pic
Editor guide
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 Author

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
Collapse
evilprince2009 profile image
Ibne Nahian

What theme did you use in your vscode ?

Collapse
amanraj1608 profile image
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
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
prayuditb profile image
Prayudi Tirta Bayu

thanks a lot, really appreciate it.

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
dancingmonkey profile image
Timothy • Edited

You need to put everything inside the settings dictionary

Collapse
de_heuer profile image
Collapse
barnettlobel profile image
Barnett Lobel

thanks for posting this!

Collapse
williamgitau profile image
William Gitau

Exactly what I needed, thanks.