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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type, storage.type, support.type, meta.type, variable.other#bd93f9italic
comment#6272a4italic
keyword#ffb86cbold
variable#f8f8f2
string#50fa7b
constant.numeric#f1fa8c
constant.language#ff5555
support.function#8be9fdbold
punctuation#f5f5f5
entity.name.function#8be9fdbold
meta.class, entity.other.inherited-class, entity.name.type.class#bd93f9
entity.name.tag#ff5555
entity.other.attribute-name#ffb86c
source.json meta.structure.dictionary.json support.type.property-name.json#f1fa8c