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#f0717113
  • activityBar.activeBorder#f07171
  • activityBar.activeFocusBorder#f07171
  • activityBar.background#210000
  • activityBar.dropBorder#610000
  • activityBar.inactiveForeground#1ab133
  • activityBarBadge.background#ffce6b
  • activityBarBadge.foreground#000000
  • badge.background#ffce6b
  • badge.foreground#000000
  • button.background#399ee6
  • button.foreground#000000
  • button.hoverBackground#2c7ab3
  • diffEditor.insertedTextBackground#78bd6530
  • diffEditor.removedTextBackground#f0717135
  • dropdown.background#3b0000
  • dropdown.border#450000
  • editor.background#2e0000
  • editor.foldBackground#ffce6b30
  • editor.foreground#21e441
  • editor.lineHighlightBackground#3b0000
  • editor.selectionBackground#f0717130
  • editorBracketMatch.background#f0717120
  • editorBracketMatch.border#bd5959
  • editorCursor.background#000000
  • editorCursor.foreground#f07171
  • editorError.foreground#f07171
  • editorGroup.border#210000
  • editorGroup.dropBackground#f0717130
  • editorGroupHeader.noTabsBackground#3b0000
  • editorGroupHeader.tabsBackground#3b0000
  • editorGutter.addedBackground#78bd65
  • editorGutter.deletedBackground#f07171
  • editorGutter.modifiedBackground#399ee6
  • editorHoverWidget.border#480000
  • editorIndentGuide.activeBackground#f07171
  • editorIndentGuide.background#480000
  • editorInfo.foreground#399ee6
  • editorLineNumber.activeForeground#ff2e2e
  • editorLineNumber.foreground#940000
  • editorLink.activeForeground#f07171
  • editorMarkerNavigation.background#2e0000
  • editorMarkerNavigationError.background#f07171
  • editorMarkerNavigationInfo.background#399ee6
  • editorMarkerNavigationWarning.background#ef7c2a
  • editorOverviewRuler.addedForeground#399ee6
  • editorOverviewRuler.border#480000
  • editorOverviewRuler.bracketMatchForeground#f07171
  • editorOverviewRuler.deletedForeground#399ee6
  • editorOverviewRuler.errorForeground#f07171
  • editorOverviewRuler.infoForeground#399ee6
  • editorOverviewRuler.modifiedForeground#399ee6
  • editorOverviewRuler.selectionHighlightForeground#e67c7c48
  • editorOverviewRuler.warningForeground#ef7c2a
  • editorPane.background#240000
  • editorRuler.foreground#480000
  • editorSuggestWidget.background#3b0000
  • editorSuggestWidget.border#480000
  • editorSuggestWidget.highlightForeground#a470d8
  • editorWarning.foreground#ef7c2a
  • editorWhitespace.foreground#610000
  • editorWidget.background#2e0000
  • editorWidget.resizeBorder#480000
  • errorForeground#f07171
  • extensionButton.prominentBackground#399ee6
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#2c7ab3
  • focusBorder#f07171
  • foreground#21e441
  • gitDecoration.addedResourceForeground#78bd65
  • gitDecoration.deletedResourceForeground#f07171
  • gitDecoration.modifiedResourceForeground#399ee6
  • gitDecoration.stageDeletedResourceForeground#f07171
  • gitDecoration.stageModifiedResourceForeground#399ee6
  • input.background#3b0000
  • input.border#450000
  • inputValidation.errorBackground#f0717190
  • inputValidation.errorBorder#f07171
  • inputValidation.errorForeground#000000
  • inputValidation.infoBackground#399ee690
  • inputValidation.infoBorder#399ee6
  • inputValidation.infoForeground#000000
  • inputValidation.warningBackground#ef7c2a90
  • inputValidation.warningBorder#ef7c2a
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#f0717120
  • list.errorForeground#f07171
  • list.focusBackground#f0717130
  • list.highlightForeground#a470d8
  • list.hoverBackground#480000
  • list.inactiveSelectionBackground#f0717125
  • list.warningForeground#ef7c2a
  • menu.background#2e0000
  • menu.foreground#21e441
  • menu.selectionBackground#f07171DD
  • menu.selectionForeground#000000
  • menu.separatorBackground#610000
  • minimap.errorHighlight#f07171
  • minimap.selectionHighlight#f0717180
  • minimap.warningHighlight#ef7c2a
  • minimapGutter.addedBackground#78bd65
  • minimapGutter.deletedBackground#f07171
  • minimapGutter.modifiedBackground#399ee6
  • notebook.focusedRowBorder#f07171
  • notifications.background#2e0000
  • notificationsErrorIcon.foreground#f07171
  • notificationsInfoIcon.foreground#399ee6
  • notificationsWarningIcon.foreground#ef7c2a
  • panelTitle.activeBorder#f07171
  • peekViewResult.background#3b0000
  • peekViewTitle.background#210000
  • pickerGroup.border#140000
  • pickerGroup.foreground#f07171
  • problemsErrorIcon.foreground#f07171
  • problemsInfoIcon.foreground#399ee6
  • problemsWarningIcon.foreground#ef7c2a
  • progressBar.background#f07171
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#61000040
  • scrollbarSlider.background#7b000050
  • scrollbarSlider.hoverBackground#94000040
  • selection.background#f0717180
  • settings.modifiedItemIndicator#399ee6
  • sideBar.background#280000
  • sideBarSectionHeader.background#350000
  • statusBar.background#210000
  • statusBarItem.hoverBackground#3b0000
  • statusBarItem.prominentBackground#f07171
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#d66565
  • tab.activeBackground#2e0000
  • tab.activeBorder#f07171
  • tab.activeModifiedBorder#399ee6
  • tab.border#480000
  • tab.hoverBackground#480000
  • tab.inactiveBackground#3b0000
  • tab.lastPinnedBorder#f0717150
  • terminal.selectionBackground#f07171
  • terminalCursor.background#000000
  • terminalCursor.foreground#f07171
  • textLink.activeForeground#ffce6b
  • textLink.foreground#78bd65
  • textPreformat.foreground#399ee6
  • textSeparator.foreground#140000
  • titleBar.activeBackground#3b0000
  • titleBar.border#400000
  • titleBar.inactiveBackground#2e0000
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#f07171
meta.embedded, source.groovy.embedded, meta.template.expression#21e441
variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#21e441
comment, punctuation.definition.comment#A55555
string, punctuation.definition.string#f07171
constant.character.escape#78bd65
keyword, constant.language.import-export-all#fa8d3e
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#399ee6
keyword.control, storage, support.type, keyword.operator.expression, keyword.operator.new#78bd65
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#ffce6b
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#4cbf99
constant#399ee6
constant.numeric, constant.language#a470d8
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#a470d8
punctuation, meta.brace#148b28
comment.block.documentation entity.name.type#4cbf99
variable.language.this, variable.language.special.self#78bd65
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#148b28
entity.name.tag#78bd65
meta.tag string#f07171
meta.attribute punctuation.definition.string#148b28
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#fa8d3e
constant.character.entity, punctuation.definition.entity#a470d8
entity.name.section.markdown, markup.heading.setext#fa8d3e
punctuation.definition.list#fa8d3e
meta.separator.markdown#fa8d3e
markup.inline.raw#78bd65
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#148b28
link, markup.underline.link, constant.other.reference.link.markdown#ffce6b
markup.quote#a470d8
entity.name.tag.css, entity.name.tag.wildcard#f07171
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#fa8d3e
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color#78bd65
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#ffce6b
source.css constant.numeric#f07171
meta.property-name, support.type.property-name#a470d8
meta.property-value, meta.property-value constant.other, support.constant.property-value#ffce6b
variable.parameter.url#a470d8
punctuation.definition.variable#21e441
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#fa8d3e
entity.name.section#ffce6b
support.type.property-name.json#fa8d3e
markup.inserted#78bd65
markup.changed#399ee6
markup.deleted#f07171
meta.diff.header#399ee6italic
meta.diff.range#78bd65