Skip to main content
Coding Theme

VS Code theme colors

971 workbench color IDs from the VS Code theme color reference, in 58 groups. Use a key in workbench.colorCustomizations. This catalog lists the id and what it paints. It does not include a default hex value.

Contrast colors

  • contrastActiveBorder

    An extra border around active elements to separate them from others for greater contrast.

  • contrastBorder

    An extra border around elements to separate them from others for greater contrast.

Base colors

  • focusBorder

    Overall border color for focused elements. This color is only used if not overridden by a component.

  • foreground

    Overall foreground color. This color is only used if not overridden by a component.

  • disabledForeground

    Overall foreground for disabled elements. This color is only used if not overridden by a component.

  • widget.border

    Border color of widgets such as Find/Replace inside the editor.

  • widget.shadow

    Shadow color of widgets such as Find/Replace inside the editor.

  • selection.background

    Background color of text selections in the workbench (for input fields or text areas, does not apply to selections within the editor and the terminal).

  • descriptionForeground

    Foreground color for description text providing additional information, for example for a label.

  • errorForeground

    Overall foreground color for error messages (this color is only used if not overridden by a component).

  • icon.foreground

    The default color for icons in the workbench.

  • sash.hoverBorder

    The hover border color for draggable sashes.

Window border

Modern UI colors

Text colors

Action colors

Button control

Input control

Scrollbar control

Badge

Progress bar

Lists and trees

Activity Bar

Profiles

  • profileBadge.background

    Profile badge background color. The profile badge shows on top of the settings gear icon in the activity bar.

  • profileBadge.foreground

    Profile badge foreground color. The profile badge shows on top of the settings gear icon in the activity bar.

  • profiles.sashBorder

    The color of the Profiles editor splitview sash border.

Minimap

Editor Groups & Tabs

Editor colors

Diff editor colors

Chat colors

Agent sessions colors

Inline Chat colors

Panel Chat colors

Editor widget colors

Peek view colors

Merge conflicts colors

Panel colors

  • panel.background

    Panel background color.

  • panel.border

    Panel border color to separate the panel from the editor.

  • panel.dropBorder

    Drag and drop feedback color for the panel titles. Panels are shown below the editor area and contain views like output and integrated terminal.

  • panelTitle.activeBorder

    Border color for the active panel title.

  • panelTitle.activeForeground

    Title color for the active panel.

  • panelTitle.inactiveForeground

    Title color for the inactive panel.

  • panelTitle.border

    Panel title border color on the bottom, separating the title from the views. Panels are shown below the editor area and contain views like output and integrated terminal.

  • panelTitleBadge.background

    Panel title badge background color. Panels are shown below the editor area and contain views like output and integrated terminal.

  • panelTitleBadge.foreground

    Panel title badge foreground color. Panels are shown below the editor area and contain views like output and integrated terminal.

  • panelInput.border

    Input box border for inputs in the panel.

  • panelSection.border

    Panel section border color used when multiple views are stacked horizontally in the panel. Panels are shown below the editor area and contain views like output and integrated terminal.

  • panelSection.dropBackground

    Drag and drop feedback color for the panel sections. The color should have transparency so that the panel sections can still shine through. Panels are shown below the editor area and contain views like output and integrated terminal.

  • panelSectionHeader.background

    Panel section header background color. Panels are shown below the editor area and contain views like output and integrated terminal.

  • panelSectionHeader.foreground

    Panel section header foreground color. Panels are shown below the editor area and contain views like output and integrated terminal.

  • panelStickyScroll.background

    Background color of sticky scroll in the panel.

  • panelStickyScroll.border

    Border color of sticky scroll in the panel.

  • panelStickyScroll.shadow

    Shadow color of sticky scroll in the panel.

  • panelSectionHeader.border

    Panel section header border color used when multiple views are stacked vertically in the panel. Panels are shown below the editor area and contain views like output and integrated terminal.

  • outputView.background

    Output view background color.

  • outputViewStickyScroll.background

    Output view sticky scroll background color.

Status Bar colors

Title Bar colors

Command Center colors

Notification colors

Extensions colors

Quick picker colors

Keybinding label colors

Keyboard shortcut table colors

Integrated Terminal colors

Debug colors

Testing colors

Welcome page colors

Git colors

Source Control Graph colors

Settings Editor colors

Snippets colors

Symbol Icons colors

Debug Icons colors

Notebook colors

Chart colors

Ports colors

Comments View colors

Action Bar colors

Simple Find Widget colors

Gauge colors

Markdown

Agent Session colors