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.

  • activityBar.background#FFF
  • activityBar.foreground#00F
  • activityBar.inactiveForeground#000
  • activityBarBadge.background#FFF
  • activityBarBadge.foreground#000
  • badge.background#FFF
  • badge.foreground#000
  • button.background#0BF
  • button.border#0BF
  • button.foreground#000
  • contrastActiveBorder#0BF
  • contrastBorder#00F
  • descriptionForeground#000
  • diffEditor.insertedTextBorder#0B0
  • diffEditor.removedTextBorder#F00
  • dropdown.background#FFF
  • dropdown.foreground#000
  • dropdown.listBackground#FFF
  • editor.background#FFF
  • editor.foreground#000
  • editor.lineHighlightBackground#FF0
  • editor.lineHighlightBorder#FFF
  • editor.selectionBackground#FF0
  • editor.selectionForeground#000
  • editorCursor.foreground#000
  • editorLineNumber.activeForeground#00F
  • editorLineNumber.foreground#000
  • editorWhitespace.foreground#FF0
  • editorWidget.background#FFF
  • editorWidget.foreground#000
  • errorForeground#F00
  • focusBorder#00F
  • foreground#000
  • icon.foreground#000
  • input.background#FFF
  • input.border#00F
  • input.foreground#000
  • input.placeholderForeground#F0F
  • inputOption.activeBackground#0BF
  • inputOption.activeBorder#0BF
  • inputOption.activeForeground#FFF
  • minimap.background#FFF
  • minimap.errorHighlight#F00
  • minimap.findMatchHighlight#00F
  • minimap.selectionHighlight#FF0
  • minimap.selectionOccurrenceHighlight#FFF
  • minimap.warningHighlight#FF0
  • panel.background#FFF
  • panelSectionHeader.background#FFF
  • panelTitle.activeForeground#00F
  • panelTitle.inactiveForeground#000
  • pickerGroup.border#00F
  • scrollbarSlider.activeBackground#0007
  • scrollbarSlider.background#0003
  • scrollbarSlider.hoverBackground#0007
  • selection.background#FF0
  • settings.headerForeground#00F
  • settings.modifiedItemIndicator#0BF
  • sideBar.background#FFF
  • sideBar.foreground#000
  • statusBar.background#FFF
  • statusBar.foreground#000
  • tab.activeBackground#FF0
  • tab.activeForeground#000
  • tab.inactiveBackground#FFF
  • tab.inactiveForeground#000
  • tab.unfocusedActiveBackground#FFF
  • tab.unfocusedActiveForeground#000
  • tab.unfocusedInactiveBackground#FFF
  • tab.unfocusedInactiveForeground#000
  • terminal.ansiBlack#FFF
  • terminal.ansiBlue#00F
  • terminal.ansiBrightBlack#FFF
  • terminal.ansiBrightBlue#00F
  • terminal.ansiBrightCyan#0BF
  • terminal.ansiBrightGreen#0B0
  • terminal.ansiBrightMagenta#F0F
  • terminal.ansiBrightRed#F00
  • terminal.ansiBrightWhite#000
  • terminal.ansiBrightYellow#FF0
  • terminal.ansiCyan#0BF
  • terminal.ansiGreen#0B0
  • terminal.ansiMagenta#F0F
  • terminal.ansiRed#F00
  • terminal.ansiWhite#000
  • terminal.ansiYellow#FF0
  • terminal.background#FFF
  • terminal.foreground#000
  • terminal.selectionBackground#FF0
  • textLink.foreground#0BF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#0B0
string#0B0
constant.numeric#F00
constant.language#F00
constant.character, constant.other#F00
variable#000
keyword#0BF
storage#F0F
meta.interface#F00
meta.type.declaration, entity.name.type#F00
meta.class, entity.other.inherited-class, entity.name.type.class#F00
entity.name.function#00F
variable.parameter#000
entity.name.tag#F00
entity.other.attribute-name#F00
support.function#0B0
support.constant#0B0
support.type, support.class#F00
support.other.variable#F00
invalid#000
invalid.deprecated#000
source.json meta.structure.dictionary.json support.type.property-name.json#00F