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#FFCE6B13
  • activityBar.activeBorder#FFCE6B
  • activityBar.activeFocusBorder#FFCE6B
  • activityBar.background#1a1e21
  • activityBar.dropBorder#FFCE6B
  • activityBar.inactiveForeground#b3b3b3
  • activityBarBadge.background#c15353
  • activityBarBadge.foreground#ffffff
  • badge.background#c15353
  • badge.foreground#ffffff
  • button.background#FFCE6B
  • button.foreground#000000
  • button.hoverBackground#d9af5b
  • checkbox.background#2e343b
  • diffEditor.insertedTextBackground#78BD6530
  • diffEditor.removedTextBackground#F0717135
  • dropdown.background#2e343b
  • dropdown.border#363d45
  • editor.background#24292E
  • editor.findMatchBorder#FFCE6B
  • editor.findMatchHighlightBackground#E6E6E630
  • editor.foldBackground#FA8D3E30
  • editor.foreground#E6E6E6
  • editor.lineHighlightBackground#2e343b
  • editor.selectionBackground#FFCE6B30
  • editorBracketMatch.background#202429
  • editorBracketMatch.border#cca556
  • editorCursor.background#000000
  • editorCursor.foreground#FFCE6B
  • editorError.foreground#F07171
  • editorGroup.border#1a1e21
  • editorGroup.dropBackground#FFCE6B30
  • editorGroupHeader.noTabsBackground#2e343b
  • editorGroupHeader.tabsBackground#2e343b
  • editorGutter.addedBackground#78BD65
  • editorGutter.deletedBackground#F07171
  • editorGutter.modifiedBackground#399EE6
  • editorHoverWidget.border#384048
  • editorIndentGuide.activeBackground#FFCE6B
  • editorIndentGuide.background#384048
  • editorInfo.foreground#399EE6
  • editorLineNumber.activeForeground#9ea8b3
  • editorLineNumber.foreground#515c67
  • editorLink.activeForeground#FFCE6B
  • editorMarkerNavigation.background#24292E
  • editorMarkerNavigationError.background#F07171
  • editorMarkerNavigationInfo.background#399EE6
  • editorMarkerNavigationWarning.background#FA8D3E
  • editorOverviewRuler.addedForeground#399EE6
  • editorOverviewRuler.border#384048
  • editorOverviewRuler.bracketMatchForeground#FFCE6B
  • editorOverviewRuler.deletedForeground#399EE6
  • editorOverviewRuler.errorForeground#F07171
  • editorOverviewRuler.infoForeground#399EE6
  • editorOverviewRuler.modifiedForeground#399EE6
  • editorOverviewRuler.selectionHighlightForeground#FFCE6B
  • editorOverviewRuler.warningForeground#FA8D3E
  • editorPane.background#1c2024
  • editorRuler.foreground#384048
  • editorSuggestWidget.background#2e343b
  • editorSuggestWidget.border#384048
  • editorSuggestWidget.highlightForeground#c15353
  • editorWarning.foreground#FA8D3E
  • editorWhitespace.foreground#4c5661
  • editorWidget.background#24292E
  • editorWidget.resizeBorder#384048
  • errorForeground#F07171
  • extensionButton.prominentBackground#FFCE6B
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#cca556
  • focusBorder#FFCE6B
  • foreground#E6E6E6
  • gitDecoration.addedResourceForeground#78BD65
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.modifiedResourceForeground#399EE6
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#399EE6
  • input.background#2e343b
  • input.border#363d45
  • 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#FFCE6B20
  • list.errorForeground#F07171
  • list.focusBackground#FFCE6B30
  • list.highlightForeground#c15353
  • list.hoverBackground#2f363c
  • list.inactiveSelectionBackground#FFCE6B25
  • list.warningForeground#FA8D3E
  • menu.background#24292E
  • menu.foreground#E6E6E6
  • menu.selectionBackground#FFCE6BDD
  • menu.selectionForeground#000000
  • menu.separatorBackground#4c5661
  • minimap.errorHighlight#F07171
  • minimap.selectionHighlight#FFCE6B80
  • minimap.warningHighlight#FA8D3E
  • minimapGutter.addedBackground#78BD65
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#399EE6
  • notebook.focusedRowBorder#FFCE6B
  • notifications.background#24292E
  • notificationsErrorIcon.foreground#F07171
  • notificationsInfoIcon.foreground#399EE6
  • notificationsWarningIcon.foreground#FA8D3E
  • panel.dropBorder#FFCE6B
  • panelTitle.activeBorder#FFCE6B
  • peekViewResult.background#2e343b
  • peekViewTitle.background#1a1e21
  • pickerGroup.border#101214
  • pickerGroup.foreground#FFCE6B
  • problemsErrorIcon.foreground#F07171
  • problemsInfoIcon.foreground#399EE6
  • problemsWarningIcon.foreground#FA8D3E
  • progressBar.background#FFCE6B
  • scrollbar.shadow#0e0f11
  • scrollbarSlider.activeBackground#4c566140
  • scrollbarSlider.background#606d7b50
  • scrollbarSlider.hoverBackground#74849440
  • selection.background#FFCE6B80
  • settings.modifiedItemIndicator#399EE6
  • sideBar.background#1f2328
  • sideBarSectionHeader.background#292e35
  • statusBar.background#1a1e21
  • statusBarItem.hoverBackground#2e353a
  • statusBarItem.prominentBackground#FFCE6B
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#e6b960
  • tab.activeBackground#24292E
  • tab.activeBorder#FFCE6B
  • tab.activeModifiedBorder#399EE6
  • tab.border#384048
  • tab.hoverBackground#384048
  • tab.inactiveBackground#2e343b
  • tab.lastPinnedBorder#FFCE6B50
  • terminal.selectionBackground#FFCE6B
  • terminalCursor.background#000000
  • terminalCursor.foreground#FFCE6B
  • textLink.activeForeground#FA8D3E
  • textLink.foreground#78BD65
  • textPreformat.foreground#FA8D3E
  • textSeparator.foreground#101214
  • titleBar.activeBackground#2e343b
  • titleBar.border#323840
  • titleBar.inactiveBackground#24292E
  • widget.shadow#0e0f11

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#F07171
meta.embedded, source.groovy.embedded, meta.template.expression#E6E6E6
variable, punctuation.definition.variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#E6E6E6
comment, punctuation.definition.comment#6a7887
string, punctuation.definition.string#C8B6FF
constant.character.escape#78BD65
keyword, constant.language.import-export-all#c15353
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#FFCE6B
keyword.control, keyword.operator, 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#FA8D3E
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#1f99ef
constant#FFCE6B
constant.numeric, constant.language#7DBFEF
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#7DBFEF
punctuation, meta.brace#a6a6a6
variable.language.this, variable.language.special.self#78BD65
comment.block.documentation entity.name.type#1f99ef
variable.language.super#FA8D3E
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#a6a6a6
entity.name.tag#78BD65
meta.tag string#C8B6FF
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#c15353
constant.character.entity, punctuation.definition.entity#7DBFEF
entity.name.section.markdown, markup.heading.setext#c15353
punctuation.definition.list#c15353
meta.separator.markdown#c15353
markup.inline.raw#78BD65
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#a6a6a6
link, markup.underline.link, constant.other.reference.link.markdown#FA8D3E
markup.quote#7DBFEF
entity.name.tag.css, entity.name.tag.wildcard#C8B6FF
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#c15353
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#FA8D3E
source.css constant.numeric, source.less constant.numeric, source.scss constant.numeric#C8B6FF
meta.property-name, support.type.property-name#7DBFEF
meta.property-value, meta.property-value constant.other, support.constant.property-value#FA8D3E
variable.parameter.url#7DBFEF
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#c15353
entity.name.section#FA8D3E
support.type.property-name.json#c15353
markup.inserted#78BD65
markup.changed#399EE6
markup.deleted#F07171
meta.diff.header#399EE6
meta.diff.range#78BD65