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.activeBackground#399EE613
  • activityBar.activeBorder#399EE6
  • activityBar.activeFocusBorder#399EE6
  • activityBar.background#000000
  • activityBar.dropBorder#399EE6
  • activityBar.inactiveForeground#5e88cc
  • activityBarBadge.background#7300d1
  • activityBarBadge.foreground#ffffff
  • badge.background#7300d1
  • badge.foreground#ffffff
  • button.background#7DBFEF
  • button.foreground#000000
  • button.hoverBackground#69a0c9
  • checkbox.background#000000
  • diffEditor.insertedTextBackground#78BD6530
  • diffEditor.removedTextBackground#F0717135
  • dropdown.background#000000
  • dropdown.border#000000
  • editor.background#000000
  • editor.findMatchBorder#399EE6
  • editor.findMatchHighlightBackground#75aaff30
  • editor.foldBackground#399EE630
  • editor.foreground#75aaff
  • editor.lineHighlightBackground#000000
  • editor.selectionBackground#399EE630
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#2c7ab3
  • editorCursor.background#000000
  • editorCursor.foreground#399EE6
  • editorError.foreground#F07171
  • editorGroup.border#000000
  • editorGroup.dropBackground#399EE630
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#78BD65
  • editorGutter.deletedBackground#F07171
  • editorGutter.modifiedBackground#399EE6
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground1#399EE6
  • editorIndentGuide.background1#000000
  • editorInfo.foreground#399EE6
  • editorLineNumber.activeForeground#808080
  • editorLineNumber.foreground#333333
  • editorLink.activeForeground#399EE6
  • editorMarkerNavigation.background#000000
  • editorMarkerNavigationError.background#F07171
  • editorMarkerNavigationInfo.background#399EE6
  • editorMarkerNavigationWarning.background#FA8D3E
  • editorOverviewRuler.addedForeground#399EE6
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.bracketMatchForeground#399EE6
  • editorOverviewRuler.deletedForeground#399EE6
  • editorOverviewRuler.errorForeground#F07171
  • editorOverviewRuler.infoForeground#399EE6
  • editorOverviewRuler.modifiedForeground#399EE6
  • editorOverviewRuler.selectionHighlightForeground#399EE6
  • editorOverviewRuler.warningForeground#FA8D3E
  • editorPane.background#000000
  • editorRuler.foreground#000000
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.highlightForeground#C8B6FF
  • editorWarning.foreground#FA8D3E
  • editorWhitespace.foreground#000000
  • editorWidget.background#000000
  • editorWidget.resizeBorder#000000
  • errorForeground#F07171
  • extensionButton.prominentBackground#7DBFEF
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#6296bc
  • focusBorder#399EE6
  • foreground#75aaff
  • gitDecoration.addedResourceForeground#78BD65
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.modifiedResourceForeground#399EE6
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#399EE6
  • input.background#000000
  • input.border#000000
  • inputValidation.errorBackground#F0717190
  • inputValidation.errorBorder#F07171
  • inputValidation.errorForeground#000000
  • inputValidation.infoBackground#399EE690
  • inputValidation.infoBorder#399EE6
  • inputValidation.infoForeground#000000
  • inputValidation.warningBackground#FA8D3E90
  • inputValidation.warningBorder#FA8D3E
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#399EE620
  • list.errorForeground#F07171
  • list.focusBackground#399EE630
  • list.highlightForeground#C8B6FF
  • list.hoverBackground#0d0d0d
  • list.inactiveSelectionBackground#399EE625
  • list.warningForeground#FA8D3E
  • menu.background#000000
  • menu.foreground#75aaff
  • menu.selectionBackground#399EE6DD
  • menu.selectionForeground#000000
  • menu.separatorBackground#000000
  • minimap.errorHighlight#F07171
  • minimap.selectionHighlight#399EE680
  • minimap.warningHighlight#FA8D3E
  • minimapGutter.addedBackground#78BD65
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#399EE6
  • notifications.background#000000
  • notificationsErrorIcon.foreground#F07171
  • notificationsInfoIcon.foreground#399EE6
  • notificationsWarningIcon.foreground#FA8D3E
  • panel.dropBorder#399EE6
  • panelTitle.activeBorder#399EE6
  • peekViewResult.background#000000
  • peekViewTitle.background#000000
  • pickerGroup.border#000000
  • pickerGroup.foreground#399EE6
  • problemsErrorIcon.foreground#F07171
  • problemsInfoIcon.foreground#399EE6
  • problemsWarningIcon.foreground#FA8D3E
  • progressBar.background#399EE6
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#00000040
  • scrollbarSlider.background#00000050
  • scrollbarSlider.hoverBackground#00000040
  • selection.background#399EE680
  • settings.modifiedItemIndicator#399EE6
  • sideBar.background#000000
  • sideBarSectionHeader.background#000000
  • statusBar.background#000000
  • statusBarItem.hoverBackground#000000
  • statusBarItem.prominentBackground#399EE6
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#338ccd
  • tab.activeBackground#000000
  • tab.activeBorder#399EE6
  • tab.activeModifiedBorder#399EE6
  • tab.border#000000
  • tab.hoverBackground#000000
  • tab.inactiveBackground#000000
  • tab.lastPinnedBorder#399EE650
  • terminal.selectionBackground#399EE6
  • terminalCursor.background#000000
  • terminalCursor.foreground#399EE6
  • textLink.activeForeground#399EE6
  • textLink.foreground#7300d1
  • textPreformat.foreground#399EE6
  • textSeparator.foreground#000000
  • titleBar.activeBackground#000000
  • titleBar.border#000000
  • titleBar.inactiveBackground#000000
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#F07171
meta.embedded, source.groovy.embedded, meta.template.expression#75aaff
variable, punctuation.definition.variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#75aaff
comment, punctuation.definition.comment#88d4ff
string, punctuation.definition.string#0008ff
constant.character.escape#7300d1
keyword, constant.language.import-export-all#C8B6FF
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#8000ff
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new#7300d1
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#399EE6
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#FA8D3E
constant#8000ff
constant.numeric, constant.language#7DBFEF
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#7DBFEF
punctuation, meta.brace#587fbf
variable.language.this, variable.language.special.self#7300d1
comment.block.documentation entity.name.type#FA8D3E
variable.language.super#399EE6
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype#587fbf
entity.name.tag#7300d1
meta.tag string#0008ff
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#C8B6FF
constant.character.entity, punctuation.definition.entity#7DBFEF
entity.name.section.markdown, markup.heading.setext#C8B6FF
punctuation.definition.list#C8B6FF
meta.separator.markdown#C8B6FF
markup.inline.raw#7300d1
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#587fbf
link, markup.underline.link, constant.other.reference.link.markdown#399EE6
markup.quote#7DBFEF
entity.name.tag.css, entity.name.tag.wildcard#0008ff
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#C8B6FF
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color#7300d1
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#399EE6
source.css constant.numeric, source.less constant.numeric, source.scss constant.numeric#0008ff
meta.property-name, support.type.property-name#7DBFEF
meta.property-value, meta.property-value constant.other, support.constant.property-value#399EE6
variable.parameter.url#7DBFEF
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#C8B6FF
entity.name.section#399EE6
support.type.property-name.json#C8B6FF
markup.inserted#78BD65
markup.changed#399EE6
markup.deleted#F07171
meta.diff.header#399EE6
meta.diff.range#7300d1