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#ce0a4c
  • 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#000e31
  • 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#74092d
  • sideBarSectionHeader.background#ce0a4c
  • statusBar.background#ce0a4c
  • statusBar.debuggingBackground#ce0a4c
  • statusBar.noFolderBackground#ce0a4c
  • statusBarItem.prominentBackground#0063a5
  • statusBarItem.prominentHoverBackground#0063a5dd
  • statusBarItem.remoteBackground#00123f
  • tab.border#ce0a4c'
  • tab.inactiveBackground#00123f
  • tab.lastPinnedBorder#2b3c5d
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#bbdaff
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#80baff
  • 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#f70a5a
keyword#f70a5a—
storage#f70a5a
storage.type#725ac1italic
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#fb9ebeitalic
entity.other.inherited-class#68d60eitalic
entity.name.function#0075a1
variable.parameterf70a5aitalic
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.bold—bold
markup.italic—italic
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—