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#051336
  • badge.background#0063a5
  • button.background#2B3C5D
  • debugExceptionWidget.background#051336
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#051336
  • diffEditor.insertedTextBackground#31958A55
  • diffEditor.removedTextBackground#892F4688
  • dropdown.background#181f2f
  • editor.background#000c18
  • editor.findMatchHighlightBackground#eeeeee44
  • editor.foreground#9cdcfe
  • editor.lineHighlightBackground#04225e
  • editor.selectionBackground#04225e
  • editorCursor.foreground#ddbb88
  • editorGroup.border#2b2b4a
  • editorGroup.dropBackground#25375daa
  • editorGroupHeader.tabsBackground#1c1c2a
  • editorHoverWidget.background#000c38
  • editorHoverWidget.border#0544bb
  • editorIndentGuide.activeBackground#204972
  • editorIndentGuide.background#002952
  • editorLineNumber.activeForeground#80a2c2
  • editorLineNumber.foreground#FFFFFF4d
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorWidget.background#262641
  • extensionButton.prominentBackground#0544bb
  • extensionButton.prominentHoverBackground#00429999
  • 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#04225e
  • 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#060621
  • sideBarSectionHeader.background#10192c
  • statusBar.background#10192c
  • statusBar.debuggingBackground#10192c
  • statusBar.noFolderBackground#10192c
  • statusBarItem.prominentBackground#0063a5
  • statusBarItem.prominentHoverBackground#0063a5dd
  • statusBarItem.remoteBackground#0063a5
  • tab.activeBorder#0780b8
  • tab.border#2b2b4a
  • tab.inactiveBackground#10192c
  • tab.lastPinnedBorder#2b3c5d
  • titleBar.activeBackground#10192c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block.jsitalic
support.type, support.class, entity.name.functionitalic
entity.other.attribute-nameitalic
variable.parameteritalic
storage.typeitalic
entity.other.inherited-classitalic underline
meta.diff, meta.diff.headeritalic
markup.italicitalic
comment, comment.block.jsitalic
support.type, support.class, entity.name.functionitalic
entity.other.attribute-nameitalic
variable.parameteritalic
storage.typeitalic
entity.other.inherited-classitalic underline
meta.diff, meta.diff.headeritalic
markup.italicitalic
#68c
meta.embedded, source.groovy.embedded#9cdcfe
string#ce9178
comment, comment.block.js#457dadd3
support.type, support.class, entity.name.function#9cdcfe
constant.numeric#9de
entity.other.attribute-name#db8
entity.name.tag, keyword#18c
support.function#27f
variable.parameter#27f
variable
storage#258
storage.type#9966b8
entity.name.class, entity.name.scope-resolution, entity.name.namespace#febunderline
constant.language#AE81FF
entity.other.inherited-class#db8underline
support.function, entity.name.function#C8B482
support.constant#9966b8
support.other.variable
invalid#A22D44
invalid.deprecated#A22D44
meta.diff, meta.diff.header#E0EDDD
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#1c5a54
markup.quote#2a4
markup.bold, markup.italic#2a4
markup.boldbold
markup.italic
markup.inline.raw#9966b8
markup.heading, markup.heading.setext#68cbold