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
—#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