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.activeBorder#C5CBFF
  • activityBar.background#ececec
  • activityBar.border#dadada
  • activityBar.dropBorder#C5CBFF
  • activityBar.foreground#01325f
  • activityBar.inactiveForeground#2e87ec
  • activityBarBadge.background#fa8500
  • activityBarBadge.foreground#ececec
  • badge.background#fa8500
  • badge.foreground#ececec
  • banner.background#fa8500
  • banner.foreground#ececec
  • breadcrumb.activeSelectionForeground#fa8500
  • breadcrumb.background#ececec
  • breadcrumb.focusForeground#22282b
  • breadcrumb.foreground#252526
  • breadcrumbPicker.background#ececec
  • button.background#fa8500
  • button.foreground#ececec
  • debugExceptionWidget.background#ececec
  • debugExceptionWidget.border#C5CBFF
  • debugToolBar.background#ececec
  • descriptionForeground#686868b3
  • diffEditor.diagonalFill#cccccc33
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000025
  • dropdown.background#ececec
  • dropdown.border#C5CBFF
  • dropdown.foreground#af1400
  • editor.background#fafafa
  • editor.foreground#01325f
  • editor.lineHighlightBackground#dff2ffaa
  • editor.selectionBackground#b0ddfcaa
  • editorBracketMatch.border#b0ddfcaa
  • editorCursor.foreground#01325f
  • editorGroupHeader.tabsBackground#ececec
  • editorHoverWidget.background#ececec
  • editorLineNumber.activeForeground#fa8500
  • editorWhitespace.foreground#ececec
  • editorWidget.background#ececec
  • extensionButton.prominentBackground#fa8500
  • extensionButton.prominentHoverBackground#fa8500
  • input.background#ececec
  • input.border#2e87ec
  • inputOption.activeBorder#1b60a5
  • inputValidation.errorBackground#01325f
  • inputValidation.errorBorder#dc3958
  • inputValidation.infoBackground#01325f
  • inputValidation.infoBorder#1b60a5
  • inputValidation.warningBackground#01325f
  • list.activeSelectionBackground#b0ddfc
  • list.activeSelectionForeground#01325f
  • list.highlightForeground#fa8500
  • list.hoverBackground#c5e6fcbb
  • list.inactiveSelectionBackground#ececec
  • list.inactiveSelectionForeground#01325f
  • menu.background#ececec
  • menu.foreground#01325f
  • minimap.errorHighlight#ff1212b3
  • minimap.findMatchHighlight#d18616
  • minimap.selectionHighlight#b0ddfcbb
  • minimap.warningHighlight#cca700
  • panelTitle.activeBorder#fa8500
  • panelTitle.activeForeground#1b60a5
  • panelTitle.inactiveForeground#2e87ec
  • peekView.border#b0ddfc
  • peekViewEditor.background#ececec
  • peekViewEditor.matchHighlightBackground#b0ddfc
  • peekViewResult.background#ececec
  • peekViewTitle.background#ececec
  • pickerGroup.border#b0ddfc
  • pickerGroup.foreground#2e87ec
  • selection.background#b0ddfcbb
  • sideBar.background#fafafa
  • sideBar.border#ececec
  • sideBar.foreground#01325f
  • statusBar.background#e0e0e0
  • statusBar.debuggingBackground#ececec
  • statusBar.debuggingForeground#01325f
  • statusBar.foreground#01325f
  • statusBar.noFolderBackground#ececec
  • statusBarItem.remoteBackground#fa8500
  • statusBarItem.remoteForeground#ececec
  • tab.inactiveBackground#ececec
  • tab.lastPinnedBorder#2e87ec
  • terminal.background#fafafa
  • terminal.dropBackground#ececec
  • terminal.foreground#01325f
  • titleBar.activeBackground#e0e0e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#bbb—
comment.block, comment.block.documentation#b8b8b8—
string#809440—
constant.numeric#fa8500—
constant.language#fa8500—
constant.character, constant.other#fa8500—
keyword#2d7ad3—
storage#2e87ec—
storage.type#2e87ec—
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#07705f—
entity.other.inherited-class#809440—
entity.name.function#af1400—
variable.parameter#01325f—
entity.name.tag#01325f—
entity.other.attribute-name#fa8500—
support.function#d64000—
support.constant#fa8500—
support.type, support.class#ee9a54—
support.other.variable—
invalid#dc3958—
invalid.deprecated#dc3958—
meta.diff, meta.diff.header#ceb465—
markup.deleted#3ca7ff—
markup.changed#3ca7ff—
markup.inserted#3ca7ff—
markup.underline.link#ceb465—
markup.quote#809440—
markup.bold, markup.italic#fa8500—
markup.inline.raw#fa8500—
markup.heading, markup.heading.setext#af1400—