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#080808
  • activityBar.dropBorder#FFCE6B
  • activityBar.inactiveForeground#a987cb
  • activityBarBadge.background#66c5f5
  • activityBarBadge.foreground#000000
  • badge.background#66c5f5
  • badge.foreground#000000
  • button.background#bfa5fd
  • button.foreground#000000
  • button.hoverBackground#a28cd7
  • checkbox.background#151515
  • diffEditor.insertedTextBackground#354d0830
  • diffEditor.removedTextBackground#F0717135
  • dropdown.background#151515
  • dropdown.border#1f1f1f
  • editor.background#080808
  • editor.findMatchBorder#FFCE6B
  • editor.findMatchHighlightBackground#d4a9fe30
  • editor.foldBackground#C8B6FF30
  • editor.foreground#d4a9fe
  • editor.lineHighlightBackground#151515
  • editor.selectionBackground#FFCE6B30
  • editorBracketMatch.background#030303
  • editorBracketMatch.border#cca556
  • editorCursor.background#000000
  • editorCursor.foreground#FFCE6B
  • editorError.foreground#F07171
  • editorGroup.border#080808
  • editorGroup.dropBackground#FFCE6B30
  • editorGroupHeader.noTabsBackground#151515
  • editorGroupHeader.tabsBackground#151515
  • editorGutter.addedBackground#354d08
  • editorGutter.deletedBackground#F07171
  • editorGutter.modifiedBackground#399EE6
  • editorHoverWidget.border#222222
  • editorIndentGuide.activeBackground#FFCE6B
  • editorIndentGuide.background#222222
  • editorInfo.foreground#0095ff
  • editorLineNumber.activeForeground#888888
  • editorLineNumber.foreground#3b3b3b
  • editorLink.activeForeground#FFCE6B
  • editorMarkerNavigation.background#080808
  • editorMarkerNavigationError.background#F07171
  • editorMarkerNavigationInfo.background#0095ff
  • editorMarkerNavigationWarning.background#FA8D3E
  • editorOverviewRuler.addedForeground#399EE6
  • editorOverviewRuler.border#222222
  • editorOverviewRuler.bracketMatchForeground#FFCE6B
  • editorOverviewRuler.deletedForeground#399EE6
  • editorOverviewRuler.errorForeground#F07171
  • editorOverviewRuler.infoForeground#0095ff
  • editorOverviewRuler.modifiedForeground#399EE6
  • editorOverviewRuler.selectionHighlightForeground#FFCE6B
  • editorOverviewRuler.warningForeground#FA8D3E
  • editorPane.background#080808
  • editorRuler.foreground#222222
  • editorSuggestWidget.background#151515
  • editorSuggestWidget.border#222222
  • editorSuggestWidget.highlightForeground#e5a6f2
  • editorWarning.foreground#FA8D3E
  • editorWhitespace.foreground#3b3b3b
  • editorWidget.background#080808
  • editorWidget.resizeBorder#222222
  • errorForeground#F07171
  • extensionButton.prominentBackground#bfa5fd
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#9884ca
  • focusBorder#FFCE6B
  • foreground#d4a9fe
  • gitDecoration.addedResourceForeground#354d08
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.modifiedResourceForeground#399EE6
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#399EE6
  • input.background#151515
  • input.border#1f1f1f
  • inputValidation.errorBackground#F0717190
  • inputValidation.errorBorder#F07171
  • inputValidation.errorForeground#000000
  • inputValidation.infoBackground#0095ff90
  • inputValidation.infoBorder#0095ff
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#FA8D3E90
  • inputValidation.warningBorder#FA8D3E
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#FFCE6B20
  • list.errorForeground#F07171
  • list.focusBackground#FFCE6B30
  • list.highlightForeground#e5a6f2
  • list.hoverBackground#151515
  • list.inactiveSelectionBackground#FFCE6B25
  • list.warningForeground#FA8D3E
  • menu.background#080808
  • menu.foreground#d4a9fe
  • menu.selectionBackground#FFCE6BDD
  • menu.selectionForeground#000000
  • menu.separatorBackground#3b3b3b
  • minimap.errorHighlight#F07171
  • minimap.selectionHighlight#FFCE6B80
  • minimap.warningHighlight#FA8D3E
  • minimapGutter.addedBackground#354d08
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#399EE6
  • notebook.focusedRowBorder#FFCE6B
  • notifications.background#080808
  • notificationsErrorIcon.foreground#F07171
  • notificationsInfoIcon.foreground#0095ff
  • notificationsWarningIcon.foreground#FA8D3E
  • panel.dropBorder#FFCE6B
  • panelTitle.activeBorder#FFCE6B
  • peekViewResult.background#151515
  • peekViewTitle.background#080808
  • pickerGroup.border#080808
  • pickerGroup.foreground#FFCE6B
  • problemsErrorIcon.foreground#F07171
  • problemsInfoIcon.foreground#0095ff
  • problemsWarningIcon.foreground#FA8D3E
  • progressBar.background#FFCE6B
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#3b3b3b40
  • scrollbarSlider.background#55555550
  • scrollbarSlider.hoverBackground#6e6e6e40
  • selection.background#FFCE6B80
  • settings.modifiedItemIndicator#399EE6
  • sideBar.background#020202
  • sideBarSectionHeader.background#0f0f0f
  • statusBar.background#080808
  • statusBarItem.hoverBackground#222222
  • statusBarItem.prominentBackground#FFCE6B
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#e6b960
  • tab.activeBackground#080808
  • tab.activeBorder#FFCE6B
  • tab.activeModifiedBorder#399EE6
  • tab.border#222222
  • tab.hoverBackground#222222
  • tab.inactiveBackground#151515
  • tab.lastPinnedBorder#FFCE6B50
  • terminal.selectionBackground#FFCE6B
  • terminalCursor.background#000000
  • terminalCursor.foreground#FFCE6B
  • textLink.activeForeground#C8B6FF
  • textLink.foreground#bfa5fd
  • textPreformat.foreground#bfa5fd
  • textSeparator.foreground#080808
  • titleBar.activeBackground#151515
  • titleBar.border#1a1a1a
  • titleBar.inactiveBackground#080808
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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