Theme Color (original) (raw)

You can customize your active Visual Studio Code color theme with the workbench.colorCustomizations user setting.

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#00AA00"
  }
}

Note: If you want to use an existing color theme, see Color Themes where you'll learn how to set the active color theme through the Preferences: Color Theme dropdown (⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)).

Theme colors are available as CSS variables in webviews, and an extension is available which provides IntelliSense for them.

Color formats

Color values can be defined in the RGB color model with an alpha channel for transparency. As format, the following hexadecimal notations are supported: #RGB, #RGBA, #RRGGBB and #RRGGBBAA. R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, a-f or A-F). The three-digit notation (#RGB) is a shorter version of the six-digit form (#RRGGBB) and the four-digit RGB notation (#RGBA) is a shorter version of the eight-digit form (#RRGGBBAA). For example #e35f is the same color as #ee3355ff.

If no alpha value is defined, it defaults to ff (opaque, no transparency). If alpha is set to 00, the color is fully transparent.

Some colors should not be opaque in order to not cover other annotations. Check the color descriptions to see to which colors this applies.

Contrast colors

The contrast colors are typically only set for high contrast themes. If set, they add an additional border around items across the UI to increase the contrast.

Base colors

Window border

The theme colors for VS Code window border.

The window border colors are only supported on macOS and Linux (not Windows) and only when the custom title bar is enabled ("window.titleBarStyle": "custom").

Text colors

Colors inside a text document, such as the welcome page.

Action colors

A set of colors to control the interactions with actions across the workbench.

Button control

A set of colors for button widgets such as Open Folder button in the Explorer of a new window.

button control

A set of colors for all Dropdown widgets such as in the Integrated Terminal or the Output panel. Note that the Dropdown control is not used on macOS currently.

dropdown control

Input control

Colors for input controls such as in the Search view or the Find/Replace dialog.

input control

Badge

Badges are small information labels, for example, search results count.

Progress bar

Lists and trees

Colors for list and trees like the File Explorer. An active list/tree has keyboard focus, an inactive does not.

Activity Bar

The Activity Bar is usually displayed either on the far left or right of the workbench and allows fast switching between views of the Side Bar.

Profiles

The Side Bar contains views like the Explorer and Search.

Minimap

The Minimap shows a minified version of the current file.

Editor Groups & Tabs

Editor Groups are the containers of editors. There can be many editor groups. A Tab is the container of an editor. Multiple Tabs can be opened in one editor group.

Editor colors

The most prominent editor colors are the token colors used for syntax highlighting and are based on the language grammar installed. These colors are defined by the Color Theme but can also be customized with the editor.tokenColorCustomizations setting. See Customize a Color Theme for details on updating a Color Theme and the available token types.

All other editor colors are listed here:

Selection colors are visible when selecting one or more characters. In addition to the selection also all regions with the same content are highlighted.

selection highlight

Word highlight colors are visible when the cursor is inside a symbol or a word. Depending on the language support available for the file type, all matching references and declarations are highlighted and read and write accesses get different colors. If document symbol language support is not available, this falls back to word highlighting.

occurrences

Find colors depend on the current find string in the Find/Replace dialog.

Find matches

Search colors are used in the search viewlet's global search results.

Search Results

Search Editor colors highlight results in a Search Editor. This can be configured separately from other find matches in order to better differentiate between different classes of match in the same editor.

Search Editor Matches

The hover highlight is shown behind the symbol for which a hover is shown.

Hover Highlight

The current line is typically shown as either background highlight or a border (not both).

Line Highlight

The color for unicode highlights

The link color is visible when clicking on a link.

Link

The range highlight is visible when selecting a search result.

Range Highlight

The symbol highlight is visible when navigating to a symbol via a command such as Go to Definition.

To see the editor white spaces, enable Toggle Render Whitespace.

To see the editor indent guides, set "editor.guides.indentation": true and "editor.guides.highlightActiveIndentation": true.

To see the editor inline hints, set "editor.inlineSuggest.enabled": true.

To see editor rulers, define their location with "editor.rulers"

CodeLens:

CodeLens

Lightbulb:

Bracket matches:

Bracket colors

Bracket pair colorization:

Bracket pair guides:

Folding:

Overview ruler:

This ruler is located beneath the scroll bar on the right edge of the editor and gives an overview of the decorations in the editor.

Errors and warnings:

Unused source code:

The gutter contains the glyph margins and the line numbers:

The editor comments widget can be seen when reviewing pull requests:

Editor inline edits can be seen when using Copilot to suggest the next change to make:

Diff editor colors

For coloring inserted and removed text, use either a background or a border color but not both.

Chat colors

Inline Chat colors

Panel Chat colors

The Editor widget is shown in front of the editor content. Examples are the Find/Replace dialog, the suggestion widget, and the editor hover.

The Debug Exception widget is a peek view that shows in the editor when debug stops at an exception.

The editor marker view shows when navigating to errors and warnings in the editor (Go to Next Error or Warning command).

Peek view colors

Peek views are used to show references and declarations as a view inside the editor.

Peek view

Merge conflicts colors

Merge conflict decorations are shown when the editor contains special diff ranges.

Merge ranges

Panel colors

Panels are shown below the editor area and contain views like Output and Integrated Terminal.

Status Bar colors

The Status Bar is shown in the bottom of the workbench.

Prominent items stand out from other Status Bar entries to indicate importance. One example is the Toggle Tab Key Moves Focus command change mode indicator.

Title Bar colors

Command Center colors

Notification colors

Notification toasts slide up from the bottom-right of the workbench.

Notification Toasts

Once opened in the Notification Center, they are displayed in a list with a header:

Notification Center

The banner appears below the title bar and spans the entire width of the workbench when visible.

Extensions colors

Quick picker colors

Keybinding label colors

Keybinding labels are shown when there is a keybinding associated with a command. An example of the keybinding label can be seen in the Command Palette:

Keybinding label

Usages of the keybinding label include (but are not limited to):

The following customizations are available:

Keyboard shortcut table colors

Integrated Terminal colors

Debug colors

Testing colors

Welcome page colors

Git colors

Source Control Graph colors

Settings Editor colors

Note: These colors are for the GUI settings editor which can be opened with the Preferences: Open Settings (UI) command.

The theme colors for breadcrumbs navigation:

Snippets colors

The theme colors for snippets:

Symbol Icons colors

The theme colors for symbol icons that appears in the Outline view, breadcrumb navigation, and suggest widget:

Debug Icons colors

Notebook colors

Chart colors

Ports colors

Action Bar colors

Gauge colors

Markdown

Agent Session colors

Extension colors

Color IDs can also be contributed by extensions through the color contribution point. These colors also appear when using code complete in the workbench.colorCustomizations settings and the color theme definition file. Users can see what colors an extension defines in the extension contributions tab.

6/10/2026