Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map. A key in the color catalog links to its detail page.

keyHEXRGBRGBA
activityBar.activeBorder
activityBar.background
activityBar.border
activityBar.foreground
activityBar.inactiveForeground
activityBarBadge.background
activityBarBadge.foreground
badge.background
badge.foreground
breadcrumb.activeSelectionForeground
breadcrumb.focusForeground
breadcrumb.foreground
button.background
button.foreground
button.hoverBackground
button.secondaryBackground
button.secondaryForeground
button.secondaryHoverBackground
debugIcon.breakpointForeground
debugIcon.startForeground
debugToolBar.background
dropdown.background
dropdown.border
dropdown.foreground
dropdown.listBackground
editor.background
editor.findMatchBackground
editor.findMatchBorder
editor.findMatchHighlightBackground
editor.findMatchHighlightBorder
editor.foreground
editor.lineHighlightBackground
editor.selectionBackground
editor.selectionHighlightBackground
editor.wordHighlightBackground
editorGroup.border
editorGroupHeader.noTabsBackground
editorGroupHeader.tabsBackground
editorGutter.background
editorHoverWidget.background
editorHoverWidget.border
editorIndentGuide.activeBackground1
editorIndentGuide.background1
editorLineNumber.activeForeground
editorLineNumber.foreground
editorMarkerNavigation.background
editorMarkerNavigationError.background
editorMarkerNavigationWarning.background
editorSuggestWidget.background
editorSuggestWidget.border
editorSuggestWidget.highlightForeground
editorSuggestWidget.selectedBackground
editorWidget.background
editorWidget.border
focusBorder
foreground
gitDecoration.deletedResourceForeground
gitDecoration.ignoredResourceForeground
gitDecoration.modifiedResourceForeground
gitDecoration.untrackedResourceForeground
input.background
input.border
list.activeSelectionBackground
list.activeSelectionForeground
list.dropBackground
list.errorForeground
list.focusBackground
list.highlightForeground
list.hoverBackground
list.inactiveFocusBackground
list.inactiveSelectionBackground
list.warningForeground
menu.background
menu.foreground
menu.selectionBackground
menu.selectionForeground
menu.separatorBackground
menubar.selectionBackground
menubar.selectionForeground
minimap.background
minimapSlider.activeBackground
minimapSlider.background
minimapSlider.hoverBackground
notebook.cellEditorBackground
notebookStatusSuccessIcon.foreground
notificationCenter.border
notificationCenterHeader.background
notificationCenterHeader.foreground
notifications.background
panel.background
panel.border
panel.dropBorder
panelSection.border
panelSectionHeader.background
panelSectionHeader.foreground
panelTitle.activeForeground
peekView.border
peekViewEditor.background
peekViewResult.background
peekViewTitle.background
progressBar.background
quickInput.background
quickInput.foreground
quickInputList.focusBackground
scrollbarSlider.activeBackground
scrollbarSlider.background
scrollbarSlider.hoverBackground
search.matchBackground
search.matchBorder
searchEditor.findMatchBackground
searchEditor.findMatchBorder
searchEditor.matchHighlightBackground
searchEditor.textBackground
selection.background
settings.checkboxBackground
settings.checkboxBorder
settings.headerForeground
settings.modifiedItemIndicator
sideBar.background
sideBar.border
sideBar.foreground
sideBarSectionHeader.background
sideBarSectionHeader.border
sideBarSectionHeader.foreground
sideBarTitle.foreground
statusBar.background
statusBar.foreground
tab.activeBackground
tab.activeBorderTop
tab.activeForeground
tab.border
tab.inactiveBackground
tab.inactiveForeground
terminal.ansiBlue
terminal.ansiBrightBlue
terminal.ansiBrightCyan
terminal.ansiBrightGreen
terminal.ansiBrightMagenta
terminal.ansiBrightRed
terminal.ansiBrightWhite
terminal.ansiBrightYellow
terminal.ansiCyan
terminal.ansiGreen
terminal.ansiMagenta
terminal.ansiRed
terminal.ansiWhite
terminal.ansiYellow
terminal.background
terminal.foreground
terminal.selectionBackground
terminalCursor.foreground
titleBar.activeBackground
titleBar.activeForeground
titleBar.border
titleBar.inactiveBackground
titleBar.inactiveForeground
tree.indentGuidesStroke
widget.shadow

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#506685italic
variable, variable.parameter, variable.other.object, variable.language#B7C5D3—
keyword, keyword.control, storage.type, storage.modifier#7289DA—
string, string.template, string.quoted.single, string.quoted.double#A3E8B9—
constant.numeric, constant.language, constant.character, constant.other#FF8B92—
entity.name.function, support.function, meta.function-call#99BDFF—
entity.name.type, entity.name.class, entity.other.inherited-class, support.class#FFD280—
entity.name.tag, punctuation.definition.tag#7289DA—
entity.other.attribute-name#B19CD9italic
keyword.operator#89DDFF—
meta.decorator, meta.decorator variable.other.readwrite, meta.decorator entity.name.function#FFD280italic
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#89DDFF—
support.constant.property-value, support.constant.font-name, support.constant.color#A3E8B9—
invalid, invalid.illegal#FF5370—
terminal.ansiBlack#181821—
terminal.ansiBrightBlack#4A4A5E—
punctuation.definition.tag.jsx, punctuation.definition.tag.tsx#7289DA—
support.class.component.jsx, support.class.component.tsx#FFD280—
markup.heading, entity.name.section.markdown#7289DAbold
markup.underline.link, string.other.link#89DDFFunderline

Related themes