How to Customize the VS Code Terminal Font, Colors, Cursor, and Shell

You can change how the VS Code integrated terminal looks without editing your shell's configuration files. VS Code controls the font, cursor, colors, and ligatures through its own settings. Your shell prompt stays separate and is configured through your shell's rc file.

If you want to change which shell opens, see /vscode/how-to-change-the-default-terminal-in-vs-code. If you want per-shell profiles with custom appearance, see /vscode/how-to-create-and-configure-terminal-profiles-in-vs-code.

Change the font

The terminal font is independent from the editor font. You can use a different typeface for each.

Open Settings (Ctrl+, / Cmd+,) and search for the setting name, or add these to your settings.json:

json

{
  "terminal.integrated.fontFamily": "'Fira Code', monospace",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.lineHeight": 1.2,
  "terminal.integrated.letterSpacing": 0,
  "terminal.integrated.fontWeight": "normal",
  "terminal.integrated.fontWeightBold": "bold"
}

Use a Powerline or Nerd Font

Powerline and Nerd Fonts are patched fonts that include extra glyphs for shell prompts and status lines. To use one in the terminal:

1. Download and install the patched font on your system.
2. Set the font family to the patched name in settings, for example:

json

{
  "terminal.integrated.fontFamily": "'Hack NF'"
}

For Powerline fonts, the name typically ends in " for Powerline". For Nerd Fonts, it typically ends in " NF". VS Code renders basic Powerline symbols even without a patched font, but a patched font gives you the full glyph set.

Change the cursor style

The terminal cursor can be a block, a line, or an underline. It can also blink.

json

{
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.cursorWidth": 2,
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyleInactive": "outline"
}

Terminal colors

The terminal uses the ANSI colors defined by your active VS Code color theme. If your theme has well-designed terminal colors, you do not need to change anything.

Here is an example that sets a dark background, light foreground, and custom ANSI colors. You only need to include the colors you want to change:

json

{
  "workbench.colorCustomizations": {
    "terminal.background": "#1E1E1E",
    "terminal.foreground": "#D4D4D4",
    "terminal.ansiGreen": "#0DBC79",
    "terminal.ansiYellow": "#E5E510"
  }
}

Each ANSI color slot is independent. The full list includes terminal.ansiBlack through terminal.ansiWhite and their bright variants (terminal.ansiBrightBlack through terminal.ansiBrightWhite).

Minimum contrast ratio

VS Code adjusts terminal text colors to maintain a minimum 4.5:1 contrast ratio as an accessibility feature. This can desaturate colors, especially with dark themes.

If your terminal colors look washed out, disable it by setting terminal.integrated.minimumContrastRatio to 1 in your settings.

Check that text is still readable after disabling it, especially light text on light backgrounds.

Enable ligatures

Ligatures combine character sequences like => and != into a single glyph. If your terminal font supports ligatures, enable terminal.integrated.fontLigatures.enabled in your settings.

If your font has ligatures but VS Code does not parse them correctly, you can manually list fallback ligature sequences:

json

{
  "terminal.integrated.fontLigatures.fallbackLigatures": ["ff", "fi", "fl"]
}

You can also use font-feature-settings CSS format with terminal.integrated.fontLigatures.featureSettings for fine-grained OpenType control.

Customize terminal tabs

Terminal tabs appear on the right side of the terminal panel. You can control their visibility and the text they display.

json

{
  "terminal.integrated.tabs.enabled": true,
  "terminal.integrated.tabs.hideCondition": "singleTerminal",
  "terminal.integrated.tabs.showActiveTerminal": "singleTerminal",
  "terminal.integrated.tabs.location": "right",
  "terminal.integrated.tabs.title": "${process}",
  "terminal.integrated.tabs.description": "${cwd}",
  "terminal.integrated.tabs.separator": " - "
}

Available variables for tab titles include ${cwd}, ${cwdFolder}, ${workspaceFolder}, ${workspaceFolderName}, ${process}, ${shellType}, ${shellCommand}, ${task}, ${local}, ${sequence}, ${separator} (the separator shows only when surrounded by values).

The terminal.integrated.tabs.showActiveTerminal setting also accepts always, singleTerminalOrNarrow, singleGroup, never in addition to singleTerminal, so you can control tab visibility more precisely than the example above.

Fix rendering problems

If the terminal shows visual glitches like colored triangles, black rectangles, or garbled text, the GPU renderer is having trouble with your hardware or drivers. Set terminal.integrated.gpuAcceleration to off in your settings.

Customize your shell prompt

Your shell prompt (the text before the cursor) is configured outside VS Code, in your shell's rc file. Here are the relevant files for each shell:

For a quick, cross-shell upgrade, tools like Starship and oh-my-posh give you a modern prompt with git status, language versions, and other context without writing scripts yourself. Install the tool, add one line to your shell's rc file, and choose a theme.