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#fa8d3e13
  • activityBar.activeBorder#fa8d3e
  • activityBar.activeFocusBorder#fa8d3e
  • activityBar.background#0e0c18
  • activityBar.dropBorder#fa8d3e
  • activityBar.inactiveForeground#a6a6a6
  • activityBarBadge.background#fa8d3e
  • activityBarBadge.foreground#000000
  • badge.background#fa8d3e
  • badge.foreground#000000
  • button.background#F07171
  • button.foreground#000000
  • button.hoverBackground#ca5f5f
  • checkbox.background#1c1a32
  • diffEditor.insertedTextBackground#78BD6530
  • diffEditor.removedTextBackground#F0717135
  • dropdown.background#1c1a32
  • dropdown.border#221f3c
  • editor.background#151325
  • editor.findMatchBorder#fa8d3e
  • editor.findMatchHighlightBackground#D9D9D930
  • editor.foldBackground#78BD6530
  • editor.foreground#D9D9D9
  • editor.lineHighlightBackground#1c1a32
  • editor.selectionBackground#fa8d3e30
  • editorBracketMatch.background#121020
  • editorBracketMatch.border#c77031
  • editorCursor.background#000000
  • editorCursor.foreground#fa8d3e
  • editorError.foreground#F07171
  • editorGroup.border#0e0c18
  • editorGroup.dropBackground#fa8d3e30
  • editorGroupHeader.noTabsBackground#1c1a32
  • editorGroupHeader.tabsBackground#1c1a32
  • editorGutter.addedBackground#78BD65
  • editorGutter.deletedBackground#F07171
  • editorGutter.modifiedBackground#399EE6
  • editorHoverWidget.border#23203f
  • editorIndentGuide.activeBackground#fa8d3e
  • editorIndentGuide.background#23203f
  • editorInfo.foreground#399EE6
  • editorLineNumber.activeForeground#827cbb
  • editorLineNumber.foreground#3b3668
  • editorLink.activeForeground#fa8d3e
  • editorMarkerNavigation.background#151325
  • editorMarkerNavigationError.background#F07171
  • editorMarkerNavigationInfo.background#399EE6
  • editorMarkerNavigationWarning.background#EF7C2A
  • editorOverviewRuler.addedForeground#399EE6
  • editorOverviewRuler.border#23203f
  • editorOverviewRuler.bracketMatchForeground#fa8d3e
  • editorOverviewRuler.deletedForeground#399EE6
  • editorOverviewRuler.errorForeground#F07171
  • editorOverviewRuler.infoForeground#399EE6
  • editorOverviewRuler.modifiedForeground#399EE6
  • editorOverviewRuler.selectionHighlightForeground#fa8d3e
  • editorOverviewRuler.warningForeground#EF7C2A
  • editorPane.background#0f0e1b
  • editorRuler.foreground#23203f
  • editorSuggestWidget.background#1c1a32
  • editorSuggestWidget.border#23203f
  • editorSuggestWidget.highlightForeground#399EE6
  • editorWarning.foreground#EF7C2A
  • editorWhitespace.foreground#322d58
  • editorWidget.background#151325
  • editorWidget.resizeBorder#23203f
  • errorForeground#F07171
  • extensionButton.prominentBackground#F07171
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#bd5959
  • focusBorder#fa8d3e
  • foreground#D9D9D9
  • gitDecoration.addedResourceForeground#78BD65
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.modifiedResourceForeground#399EE6
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#399EE6
  • input.background#1c1a32
  • input.border#221f3c
  • 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#fa8d3e20
  • list.errorForeground#F07171
  • list.focusBackground#fa8d3e30
  • list.highlightForeground#399EE6
  • list.hoverBackground#1f1c36
  • list.inactiveSelectionBackground#fa8d3e25
  • list.warningForeground#EF7C2A
  • menu.background#151325
  • menu.foreground#D9D9D9
  • menu.selectionBackground#fa8d3eDD
  • menu.selectionForeground#000000
  • menu.separatorBackground#322d58
  • minimap.errorHighlight#F07171
  • minimap.selectionHighlight#fa8d3e80
  • minimap.warningHighlight#EF7C2A
  • minimapGutter.addedBackground#78BD65
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#399EE6
  • notebook.focusedRowBorder#fa8d3e
  • notifications.background#151325
  • notificationsErrorIcon.foreground#F07171
  • notificationsInfoIcon.foreground#399EE6
  • notificationsWarningIcon.foreground#EF7C2A
  • panel.dropBorder#fa8d3e
  • panelTitle.activeBorder#fa8d3e
  • peekViewResult.background#1c1a32
  • peekViewTitle.background#0e0c18
  • pickerGroup.border#07060c
  • pickerGroup.foreground#fa8d3e
  • problemsErrorIcon.foreground#F07171
  • problemsInfoIcon.foreground#399EE6
  • problemsWarningIcon.foreground#EF7C2A
  • progressBar.background#fa8d3e
  • scrollbar.shadow#020203
  • scrollbarSlider.activeBackground#322d5840
  • scrollbarSlider.background#403a7250
  • scrollbarSlider.hoverBackground#4f478b40
  • selection.background#fa8d3e80
  • settings.modifiedItemIndicator#399EE6
  • sideBar.background#11101f
  • sideBarSectionHeader.background#18172c
  • statusBar.background#0e0c18
  • statusBarItem.hoverBackground#1d1932
  • statusBarItem.prominentBackground#fa8d3e
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#e17f38
  • tab.activeBackground#151325
  • tab.activeBorder#fa8d3e
  • tab.activeModifiedBorder#399EE6
  • tab.border#23203f
  • tab.hoverBackground#23203f
  • tab.inactiveBackground#1c1a32
  • tab.lastPinnedBorder#fa8d3e50
  • terminal.selectionBackground#fa8d3e
  • terminalCursor.background#000000
  • terminalCursor.foreground#fa8d3e
  • textLink.activeForeground#78BD65
  • textLink.foreground#fa8d3e
  • textPreformat.foreground#A470D8
  • textSeparator.foreground#07060c
  • titleBar.activeBackground#1c1a32
  • titleBar.border#1f1d37
  • titleBar.inactiveBackground#151325
  • widget.shadow#020203

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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