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#ffffff13
  • activityBar.activeBorder#ffffff
  • activityBar.activeFocusBorder#ffffff
  • activityBar.background#212121
  • activityBar.dropBorder#ffffff
  • activityBar.inactiveForeground#cccccc
  • activityBarBadge.background#ffb380
  • activityBarBadge.foreground#000000
  • badge.background#ffb380
  • badge.foreground#000000
  • button.background#ffb380
  • button.foreground#000000
  • button.hoverBackground#d9986d
  • checkbox.background#3b3b3b
  • diffEditor.insertedTextBackground#78BD6530
  • diffEditor.removedTextBackground#F0717135
  • dropdown.background#3b3b3b
  • dropdown.border#454545
  • editor.background#2e2e2e
  • editor.findMatchBorder#ffffff
  • editor.findMatchHighlightBackground#ffffff30
  • editor.foldBackground#ffffff30
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#3b3b3b
  • editor.selectionBackground#ffffff30
  • editorBracketMatch.background#292929
  • editorBracketMatch.border#cccccc
  • editorCursor.background#000000
  • editorCursor.foreground#ffffff
  • editorError.foreground#F07171
  • editorGroup.border#212121
  • editorGroup.dropBackground#ffffff30
  • editorGroupHeader.noTabsBackground#3b3b3b
  • editorGroupHeader.tabsBackground#3b3b3b
  • editorGutter.addedBackground#78BD65
  • editorGutter.deletedBackground#F07171
  • editorGutter.modifiedBackground#399EE6
  • editorHoverWidget.border#484848
  • editorIndentGuide.activeBackground1#ffffff
  • editorIndentGuide.background1#484848
  • editorInfo.foreground#399EE6
  • editorLineNumber.activeForeground#adadad
  • editorLineNumber.foreground#616161
  • editorLink.activeForeground#ffffff
  • editorMarkerNavigation.background#2e2e2e
  • editorMarkerNavigationError.background#F07171
  • editorMarkerNavigationInfo.background#399EE6
  • editorMarkerNavigationWarning.background#FA8D3E
  • editorOverviewRuler.addedForeground#399EE6
  • editorOverviewRuler.border#484848
  • editorOverviewRuler.bracketMatchForeground#ffffff
  • editorOverviewRuler.deletedForeground#399EE6
  • editorOverviewRuler.errorForeground#F07171
  • editorOverviewRuler.infoForeground#399EE6
  • editorOverviewRuler.modifiedForeground#399EE6
  • editorOverviewRuler.selectionHighlightForeground#ffffff
  • editorOverviewRuler.warningForeground#FA8D3E
  • editorPane.background#242424
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#3b3b3b
  • editorSuggestWidget.border#484848
  • editorSuggestWidget.highlightForeground#eeb37c
  • editorWarning.foreground#FA8D3E
  • editorWhitespace.foreground#616161
  • editorWidget.background#2e2e2e
  • editorWidget.resizeBorder#484848
  • errorForeground#F07171
  • extensionButton.prominentBackground#ffb380
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#cc8f66
  • focusBorder#ffffff
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#78BD65
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.modifiedResourceForeground#399EE6
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#399EE6
  • input.background#3b3b3b
  • input.border#454545
  • 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#ffffff20
  • list.errorForeground#F07171
  • list.focusBackground#ffffff30
  • list.highlightForeground#eeb37c
  • list.hoverBackground#3b3b3b
  • list.inactiveSelectionBackground#ffffff25
  • list.warningForeground#FA8D3E
  • menu.background#2e2e2e
  • menu.foreground#ffffff
  • menu.selectionBackground#ffffffDD
  • menu.selectionForeground#000000
  • menu.separatorBackground#616161
  • minimap.errorHighlight#F07171
  • minimap.selectionHighlight#ffffff80
  • minimap.warningHighlight#FA8D3E
  • minimapGutter.addedBackground#78BD65
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#399EE6
  • notifications.background#2e2e2e
  • notificationsErrorIcon.foreground#F07171
  • notificationsInfoIcon.foreground#399EE6
  • notificationsWarningIcon.foreground#FA8D3E
  • panel.dropBorder#ffffff
  • panelTitle.activeBorder#ffffff
  • peekViewResult.background#3b3b3b
  • peekViewTitle.background#212121
  • pickerGroup.border#141414
  • pickerGroup.foreground#ffffff
  • problemsErrorIcon.foreground#F07171
  • problemsInfoIcon.foreground#399EE6
  • problemsWarningIcon.foreground#FA8D3E
  • progressBar.background#ffffff
  • scrollbar.shadow#141414
  • scrollbarSlider.activeBackground#61616140
  • scrollbarSlider.background#7b7b7b50
  • scrollbarSlider.hoverBackground#94949440
  • selection.background#ffffff80
  • settings.modifiedItemIndicator#399EE6
  • sideBar.background#282828
  • sideBarSectionHeader.background#353535
  • statusBar.background#212121
  • statusBarItem.hoverBackground#3b3b3b
  • statusBarItem.prominentBackground#ffffff
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#e6e6e6
  • tab.activeBackground#2e2e2e
  • tab.activeBorder#ffffff
  • tab.activeModifiedBorder#399EE6
  • tab.border#484848
  • tab.hoverBackground#484848
  • tab.inactiveBackground#3b3b3b
  • tab.lastPinnedBorder#ffffff50
  • terminal.selectionBackground#ffffff
  • terminalCursor.background#000000
  • terminalCursor.foreground#ffffff
  • textLink.activeForeground#ffffff
  • textLink.foreground#f0f0f0
  • textPreformat.foreground#f0f0f0
  • textSeparator.foreground#141414
  • titleBar.activeBackground#3b3b3b
  • titleBar.border#404040
  • titleBar.inactiveBackground#2e2e2e
  • widget.shadow#141414

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#F07171
meta.embedded, source.groovy.embedded, meta.template.expression#ffffff
variable, punctuation.definition.variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#ffffff
comment, punctuation.definition.comment#878787
string, punctuation.definition.string#ffffff
constant.character.escape#f0f0f0
keyword, constant.language.import-export-all#ffb380
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#d6d6d6
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new#f0f0f0
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#ffffff
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#eeb37c
constant#d6d6d6
constant.numeric, constant.language#c7c7c7
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#c7c7c7
punctuation, meta.brace#bfbfbf
variable.language.this, variable.language.special.self#f0f0f0
comment.block.documentation entity.name.type#eeb37c
variable.language.super#ffffff
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#bfbfbf
entity.name.tag#f0f0f0
meta.tag string#ffffff
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#ffb380
constant.character.entity, punctuation.definition.entity#c7c7c7
entity.name.section.markdown, markup.heading.setext#ffb380
punctuation.definition.list#ffb380
meta.separator.markdown#ffb380
markup.inline.raw#f0f0f0
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#bfbfbf
link, markup.underline.link, constant.other.reference.link.markdown#ffffff
markup.quote#c7c7c7
entity.name.tag.css, entity.name.tag.wildcard#ffffff
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#ffb380
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color#f0f0f0
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#ffffff
source.css constant.numeric, source.less constant.numeric, source.scss constant.numeric#ffffff
meta.property-name, support.type.property-name#c7c7c7
meta.property-value, meta.property-value constant.other, support.constant.property-value#ffffff
variable.parameter.url#c7c7c7
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ffb380
entity.name.section#ffffff
support.type.property-name.json#ffb380
markup.inserted#78BD65
markup.changed#399EE6
markup.deleted#F07171
meta.diff.header#399EE6
meta.diff.range#f0f0f0