# Summarize the whole topic in less than 300 characters for SEO purpose
MetaDescription: Theme Color reference that lists all themable colors in Visual Studio Code.
---
# Theme Color
You can customize your active Visual Studio Code [color theme](/docs/getstarted/themes) with the `workbench.colorCustomizations` user [setting](/docs/getstarted/settings).
```json
{
"workbench.colorCustomizations": {
"activityBar.background": "#00AA00"
}
}
```
**Note**: If you want to use an existing color theme, see [Color Themes](/docs/getstarted/themes) where you'll learn how to set the active color theme through the **Preferences: Color Theme** dropdown (`kb(workbench.action.selectTheme)`).
Theme colors are available as CSS variables in [webviews](/api/extension-guides/webview), and [an extension](https://marketplace.visualstudio.com/items?itemName=connor4312.css-theme-completions) is available which provides IntelliSense for them.
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.
-`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.
-`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).
-`list.activeSelectionIconForeground`: List/Tree icon foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
-`list.dropBackground`: List/Tree drag and drop background when moving items around using the mouse.
-`list.focusBackground`: List/Tree background color for the focused item when the list/tree is active.
-`list.focusForeground`: List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
-`list.focusOutline`: List/Tree outline color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
-`list.highlightForeground`: List/Tree foreground color of the match highlights when searching inside the list/tree.
-`list.hoverBackground`: List/Tree background when hovering over items using the mouse.
-`list.hoverForeground`: List/Tree foreground when hovering over items using the mouse.
-`list.inactiveSelectionBackground`: List/Tree background color for the selected item when the list/tree is inactive.
-`list.inactiveSelectionForeground`: List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
-`list.inactiveSelectionIconForeground`: List/Tree icon foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
-`list.inactiveFocusBackground`: List background color for the focused item when the list is inactive. An active list has keyboard focus, an inactive does not. Currently only supported in lists.
-`list.inactiveFocusOutline`: List/Tree outline color for the focused item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
-`list.invalidItemForeground`: List/Tree foreground color for invalid items, for example an unresolved root in explorer.
-`list.errorForeground`: Foreground color of list items containing errors.
-`list.warningForeground`: Foreground color of list items containing warnings.
-`listFilterWidget.background`: List/Tree Filter background color of typed text when searching inside the list/tree.
-`listFilterWidget.outline`: List/Tree Filter Widget's outline color of typed text when searching inside the list/tree.
-`listFilterWidget.noMatchesOutline`: List/Tree Filter Widget's outline color when no match is found of typed text when searching inside the list/tree.
-`activityBar.dropBorder`: Drag and drop feedback color for the activity bar items. The activity bar is showing on the far left or right and allows to switch between views of the side bar.
-`sideBar.dropBackground`: Drag and drop feedback color for the side bar sections. The color should have transparency so that the side bar sections can still shine through.
-`minimap.selectionOccurrenceHighlight`: Minimap marker color for repeating editor selections.
-`minimap.foregroundOpacity`: Opacity of foreground elements rendered in the minimap. For example, "#000000c0" will render the elements with 75% opacity.
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.
-`editorGroup.border`: Color to separate multiple editor groups from each other.
-`editorGroupHeader.noTabsBackground`: Background color of the editor group title header when Tabs are disabled (set `"workbench.editor.showTabs": false`).
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 [Customizing a Color Theme](/docs/getstarted/themes#_customizing-a-color-theme) for details on updating a Color Theme and the available token types.
-`editorLineNumber.foreground`: Color of editor line numbers.
-`editorLineNumber.activeForeground`: Color of the active editor line number.
-`editorCursor.background`: The background color of the editor cursor. Allows customizing the color of a character overlapped by a block cursor.
-`editorCursor.foreground`: Color of the editor cursor.
Selection colors are visible when selecting one or more characters. In addition to the selection also all regions with the same content are highlighted.
-`editor.selectionBackground`: Color of the editor selection.
-`editor.selectionForeground`: Color of the selected text for high contrast.
-`editor.inactiveSelectionBackground`: Color of the selection in an inactive editor. The color must not be opaque so as not to hide underlying decorations.
-`editor.selectionHighlightBackground`: Color for regions with the same content as the selection. The color must not be opaque so as not to hide underlying decorations.
-`editor.selectionHighlightBorder`: Border color for regions with the same content as the selection.
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.
-`editor.wordHighlightBackground`: Background color of a symbol during read-access, for example when reading a variable. The color must not be opaque so as not to hide underlying decorations.
-`editor.wordHighlightBorder`: Border color of a symbol during read-access, for example when reading a variable.
-`editor.wordHighlightStrongBackground`: Background color of a symbol during write-access, for example when writing to a variable. The color must not be opaque so as not to hide underlying decorations.
-`editor.wordHighlightStrongBorder`: Border color of a symbol during write-access, for example when writing to a variable.
Find colors depend on the current find string in the Find/Replace dialog.
-`editor.findMatchBackground`: Color of the current search match.
-`editor.findMatchHighlightBackground`: Color of the other search matches. The color must not be opaque so as not to hide underlying decorations.
-`editor.findRangeHighlightBackground`: Color the range limiting the search (Enable 'Find in Selection' in the find widget). The color must not be opaque so as not to hide underlying decorations.
-`editor.findMatchBorder`: Border color of the current search match.
-`editor.findMatchHighlightBorder`: Border color of the other search matches.
-`editor.findRangeHighlightBorder`: Border color the range limiting the search (Enable 'Find in Selection' in the find widget).
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.
-`editor.hoverHighlightBackground`: Highlight below the word for which a hover is shown. The color must not be opaque so as not to hide underlying decorations.
The current line is typically shown as either background highlight or a border (not both).
-`editor.lineHighlightBackground`: Background color for the highlight of line at the cursor position.
-`editor.lineHighlightBorder`: Background color for the border around the line at the cursor position.
The link color is visible when clicking on a link.
-`editorLink.activeForeground`: Color of active links.
The range highlight is visible when selecting a search result.
-`editor.rangeHighlightBackground`: Background color of highlighted ranges, used by Quick Open, Symbol in File and Find features. The color must not be opaque so as not to hide underlying decorations.
-`editor.rangeHighlightBorder`: Background color of the border around highlighted ranges.
-`editorOverviewRuler.background`: Background color of the editor overview ruler. Only used when the minimap is enabled and placed on the right side of the editor.
-`editorOverviewRuler.border`: Color of the overview ruler border.
-`editorOverviewRuler.findMatchForeground`: Overview ruler marker color for find matches. The color must not be opaque so as not to hide underlying decorations.
-`editorOverviewRuler.rangeHighlightForeground`: Overview ruler marker color for highlighted ranges, like by the Quick Open, Symbol in File and Find features. The color must not be opaque so as not to hide underlying decorations.
-`editorOverviewRuler.selectionHighlightForeground`: Overview ruler marker color for selection highlights. The color must not be opaque so as not to hide underlying decorations.
-`editorOverviewRuler.wordHighlightForeground`: Overview ruler marker color for symbol highlights. The color must not be opaque so as not to hide underlying decorations.
-`editorOverviewRuler.wordHighlightStrongForeground`: Overview ruler marker color for write-access symbol highlights. The color must not be opaque so as not to hide underlying decorations.
-`editorOverviewRuler.modifiedForeground`: Overview ruler marker color for modified content.
-`editorOverviewRuler.addedForeground`: Overview ruler marker color for added content.
-`editorOverviewRuler.deletedForeground`: Overview ruler marker color for deleted content.
-`editorOverviewRuler.errorForeground`: Overview ruler marker color for errors.
-`editorOverviewRuler.warningForeground`: Overview ruler marker color for warnings.
-`editorOverviewRuler.infoForeground`: Overview ruler marker color for infos.
-`editorOverviewRuler.bracketMatchForeground`: Overview ruler marker color for matching brackets.
Errors and warnings:
-`editorError.foreground`: Foreground color of error squiggles in the editor.
-`editorUnnecessaryCode.border`: Border color of unnecessary (unused) source code in the editor.
-`editorUnnecessaryCode.opacity`: Opacity of unnecessary (unused) source code in the editor. For example, `"#000000c0"` will render the code with 75% opacity. For high contrast themes, use the `"editorUnnecessaryCode.border"` theme color to underline unnecessary code instead of fading it out.
The gutter contains the glyph margins and the line numbers:
-`editorGutter.background`: Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.
-`editorGutter.modifiedBackground`: Editor gutter background color for lines that are modified.
-`editorGutter.addedBackground`: Editor gutter background color for lines that are added.
-`editorGutter.deletedBackground`: Editor gutter background color for lines that are deleted.
For coloring inserted and removed text, use either a background or a border color but not both.
-`diffEditor.insertedTextBackground`: Background color for text that got inserted. The color must not be opaque so as not to hide underlying decorations.
-`diffEditor.insertedTextBorder`: Outline color for the text that got inserted.
-`diffEditor.removedTextBackground`: Background color for text that got removed. The color must not be opaque so as not to hide underlying decorations.
-`diffEditor.removedTextBorder`: Outline color for text that got removed.
-`diffEditor.border`: Border color between the two text editors.
-`editorWidget.background`: Background color of editor widgets, such as Find/Replace.
-`editorWidget.border`: Border color of the editor widget unless the widget does not contain a border or defines its own border color.
-`editorWidget.resizeBorder`: Border color of the resize bar of editor widgets. The color is only used if the widget chooses to have a resize border and if the color is not overridden by a widget.
-`editorSuggestWidget.background`: Background color of the suggestion widget.
-`editorSuggestWidget.border`: Border color of the suggestion widget.
-`editorSuggestWidget.foreground`: Foreground color of the suggestion widget.
-`merge.currentHeaderBackground`: Current header background in inline merge conflicts. The color must not be opaque so as not to hide underlying decorations.
-`merge.currentContentBackground`: Current content background in inline merge conflicts. The color must not be opaque so as not to hide underlying decorations.
-`merge.incomingHeaderBackground`: Incoming header background in inline merge conflicts. The color must not be opaque so as not to hide underlying decorations.
-`merge.incomingContentBackground`: Incoming content background in inline merge conflicts. The color must not be opaque so as not to hide underlying decorations.
-`merge.border`: Border color on headers and the splitter in inline merge conflicts.
-`merge.commonContentBackground`: Common ancestor content background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.
-`merge.commonHeaderBackground`: Common ancestor header background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.
-`editorOverviewRuler.currentContentForeground`: Current overview ruler foreground for inline merge conflicts.
-`editorOverviewRuler.incomingContentForeground`: Incoming overview ruler foreground for inline merge conflicts.
-`editorOverviewRuler.commonContentForeground`: Common ancestor overview ruler foreground for inline merge conflicts.
## Panel colors
Panels are shown below the editor area and contain views like Output and Integrated Terminal.
-`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.
-`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.
-`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.
-`statusBarItem.errorBackground`: Status bar error items background color. Error items stand out from other status bar entries to indicate error conditions.
-`statusBarItem.errorForeground`: Status bar error items foreground color. Error items stand out from other status bar entries to indicate error conditions.
-`statusBarItem.warningBackground`: Status bar warning items background color. Warning items stand out from other status bar entries to indicate warning conditions. The status bar is shown in the bottom of the window.
-`statusBarItem.warningForeground`: Status bar warning items foreground color. Warning items stand out from other status bar entries to indicate warning conditions. The status bar is shown in the bottom of the window.
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.
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:
-`terminal.dropBackground`: The background color when dragging on top of terminals. The color should have transparency so that the terminal contents can still shine through.
-`notebook.focusedEditorBorder`: The color of the notebook cell editor border.
-`notebook.inactiveFocusedCellBorder`: The color of the cell's top and bottom border when a cell is focused while the primary focus is outside of the editor.
-`notebook.inactiveSelectedCellBorder`: The color of the cell's borders when multiple cells are selected.
-`notebook.outputContainerBackgroundColor`: The Color of the notebook output container background.
Color ids can also be contributed by extensions through the [color contribution point](/api/references/contribution-points#contributes.colors). 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](/docs/editor/extension-marketplace#_extension-details) tab.
