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.js—italic
support.type, support.class, entity.name.function—italic
entity.other.attribute-name—italic
variable.parameter—italic
storage.type—italic
entity.other.inherited-class—italic underline
meta.diff, meta.diff.header—italic
markup.italic—italic
comment, comment.block.js—italic
support.type, support.class, entity.name.function—italic
entity.other.attribute-name—italic
variable.parameter—italic
storage.type—italic
entity.other.inherited-class—italic underline
meta.diff, meta.diff.header—italic
markup.italic—italic
—#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.bold—bold
markup.italic——
markup.inline.raw#9966b8—
markup.heading, markup.heading.setext#68cbold