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#00aaaa
  • badge.background#0063a5
  • button.background#2b3c5d
  • debugExceptionWidget.background#051336
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#00123f
  • diffEditor.insertedTextBackground#31958a55
  • diffEditor.removedTextBackground#892f4688
  • dropdown.background#00123f
  • editor.background#180049
  • editor.findMatchHighlightBackground#10174244
  • editor.foreground#f70a5a
  • editor.lineHighlightBackground#082050
  • editor.selectionBackground#000c50
  • editorCursor.foreground#ddbb88
  • editorGroup.border#2b2b4a
  • editorGroup.dropBackground#25375daa
  • editorGroupHeader.tabsBackground#1c1c2a
  • editorHoverWidget.background#000c38
  • editorHoverWidget.border#004c18
  • editorIndentGuide.activeBackground#204972
  • editorIndentGuide.background#002952
  • editorLineNumber.activeForeground#ce0a4c
  • editorLineNumber.foreground#406385
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#ab395b
  • editorMarkerNavigationWarning.background#5b7e7a
  • editorWhitespace.foreground#103050
  • editorWidget.background#262641
  • extensionButton.prominentBackground#5f8b3b
  • extensionButton.prominentHoverBackground#5f8b3bbb
  • focusBorder#596f99
  • input.background#181f2f
  • inputOption.activeBorder#1d4a87
  • inputValidation.errorBackground#a22d44
  • inputValidation.errorBorder#ab395b
  • inputValidation.infoBackground#051336
  • inputValidation.infoBorder#384078
  • inputValidation.warningBackground#5b7e7a
  • inputValidation.warningBorder#5b7e7a
  • list.activeSelectionBackground#08286b
  • list.dropBackground#041d52
  • list.highlightForeground#0063a5
  • list.hoverBackground#061940
  • list.inactiveSelectionBackground#152037
  • minimap.selectionHighlight#750000
  • panel.border#2b2b4a
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#eeeeee33
  • peekViewResult.background#060621
  • peekViewResult.matchHighlightBackground#eeeeee44
  • peekViewTitle.background#10192c
  • pickerGroup.border#596f99
  • pickerGroup.foreground#596f99
  • ports.iconRunningProcessForeground#80a2c2
  • progressBar.background#0063a5
  • quickInputList.focusBackground#08286b
  • scrollbar.shadow#515e91aa
  • scrollbarSlider.activeBackground#3b3f5188
  • scrollbarSlider.background#1f2230aa
  • scrollbarSlider.hoverBackground#3b3f5188
  • sideBar.background#119590
  • sideBar.foreground#2d0094
  • sideBarSectionHeader.background#00aaaa
  • statusBar.background#00aaaa
  • statusBar.debuggingBackground#00aaaa
  • statusBar.noFolderBackground#00aaaa
  • statusBarItem.prominentBackground#0063a5
  • statusBarItem.prominentHoverBackground#0063a5dd
  • statusBarItem.remoteBackground#00123f
  • tab.border#00aaaa'
  • tab.inactiveBackground#00123f
  • tab.lastPinnedBorder#2b3c5d
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#bbdaff
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#00aaaa
  • terminal.ansiBrightCyan#78ffff
  • terminal.ansiBrightGreen#ce0a4c
  • terminal.ansiBrightMagenta#d778ff
  • terminal.ansiBrightRed#ff7882
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe580
  • terminal.ansiCyan#99ffff
  • terminal.ansiGreen#d1f1a9
  • terminal.ansiMagenta#ebbbff
  • terminal.ansiRed#ff9da4
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#ffeead
  • titleBar.activeBackground#10192c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#6688CC
comment#2d0094
string#a8b1d4
constant.numeric#F280D0
constant.language#F280D0
constant.character, constant.other#f70a5a
variable#e9217a
keyword#e9217a
storage#f70a5a
storage.type#725ac1italic
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#eed16bitalic
entity.other.inherited-class#68d60eitalic
entity.name.function#00aaaa
variable.parameter#f70a5aitalic
variable.other.local#2d54beitalic
variable.other.property#33baf6italic
variable.other.enummember#03a9f4bold
entity.name.tag#225588
entity.other.attribute-name#DDBB88
support.function#9966B8
support.constant#9966B8
support.type, support.class#9966B8italic
support.other.variable
invalid#A22D44
invalid.deprecated#A22D44
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#219186
markup.quote#22AA44
markup.bold, markup.italic#22AA44
markup.boldbold
markup.italicitalic
markup.inline.raw#9966B8
markup.heading, markup.heading.setext#6688CCbold
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6