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#66440013
  • activityBar.activeBorder#664400
  • activityBar.activeFocusBorder#664400
  • activityBar.background#CDC4AA
  • activityBar.dropBorder#664400
  • activityBar.inactiveForeground#403630
  • activityBarBadge.background#4CBF99
  • activityBarBadge.foreground#000000
  • badge.background#4CBF99
  • badge.foreground#000000
  • button.background#E60073
  • button.foreground#000000
  • button.hoverBackground#ca5f5f
  • checkbox.background#fffeea
  • diffEditor.insertedTextBackground#78BD6530
  • diffEditor.removedTextBackground#E6007335
  • dropdown.background#fffeea
  • dropdown.border#fffeea
  • editor.background#fffeea
  • editor.findMatchBorder#664400
  • editor.findMatchHighlightBackground#D9D9D930
  • editor.foldBackground#4CBF9930
  • editor.foreground#252525
  • editor.lineHighlightBackground#ffffff
  • editor.selectionBackground#66440030
  • editorBracketMatch.background#292929
  • editorBracketMatch.border#2c7ab3
  • editorCursor.background#000000
  • editorCursor.foreground#664400
  • editorError.foreground#E60073
  • editorGroup.border#fffeea
  • editorGroup.dropBackground#fffeea
  • editorGroupHeader.noTabsBackground#fffeea
  • editorGroupHeader.tabsBackground#fffeea
  • editorGutter.addedBackground#78BD65
  • editorGutter.deletedBackground#E60073
  • editorGutter.modifiedBackground#664400
  • editorHoverWidget.border#fffeea
  • editorIndentGuide.activeBackground#664400
  • editorIndentGuide.background#ffffff
  • editorInfo.foreground#664400
  • editorLineNumber.activeForeground#664400
  • editorLineNumber.foreground#664400
  • editorLink.activeForeground#664400
  • editorMarkerNavigation.background#2e2e2e
  • editorMarkerNavigationError.background#E60073
  • editorMarkerNavigationInfo.background#664400
  • editorMarkerNavigationWarning.background#EF7C2A
  • editorOverviewRuler.addedForeground#664400
  • editorOverviewRuler.border#fffeea
  • editorOverviewRuler.bracketMatchForeground#664400
  • editorOverviewRuler.deletedForeground#664400
  • editorOverviewRuler.errorForeground#E60073
  • editorOverviewRuler.infoForeground#664400
  • editorOverviewRuler.modifiedForeground#664400
  • editorOverviewRuler.selectionHighlightForeground#664400
  • editorOverviewRuler.warningForeground#EF7C2A
  • editorPane.background#242424
  • editorRuler.foreground#36454f
  • editorSuggestWidget.background#fffeea
  • editorSuggestWidget.border#fffeea
  • editorSuggestWidget.highlightForeground#FFCE6B
  • editorWarning.foreground#EF7C2A
  • editorWhitespace.foreground#616161
  • editorWidget.background#fffeea
  • editorWidget.resizeBorder#fffeea
  • errorForeground#E60073
  • extensionButton.prominentBackground#E60073
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#bd5959
  • focusBorder#664400
  • foreground#664400
  • gitDecoration.addedResourceForeground#78BD65
  • gitDecoration.deletedResourceForeground#E60073
  • gitDecoration.modifiedResourceForeground#664400
  • gitDecoration.stageDeletedResourceForeground#E60073
  • gitDecoration.stageModifiedResourceForeground#664400
  • input.background#fffeea
  • input.border#fffeea
  • inputValidation.errorBackground#E6007390
  • inputValidation.errorBorder#E60073
  • inputValidation.errorForeground#000000
  • inputValidation.infoBackground#66440090
  • inputValidation.infoBorder#664400
  • inputValidation.infoForeground#000000
  • inputValidation.warningBackground#EF7C2A90
  • inputValidation.warningBorder#EF7C2A
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#88A2BF
  • list.errorForeground#E60073
  • list.focusBackground#88A2BF
  • list.highlightForeground#FFCE6B
  • list.hoverBackground#66440080
  • list.inactiveSelectionBackground#88A2BF
  • list.warningForeground#EF7C2A
  • menu.background#fffeea
  • menu.foreground#2e2e2e
  • menu.selectionBackground#664400DD
  • menu.selectionForeground#000000
  • menu.separatorBackground#616161
  • minimap.errorHighlight#E60073
  • minimap.selectionHighlight#66440080
  • minimap.warningHighlight#EF7C2A
  • minimapGutter.addedBackground#78BD65
  • minimapGutter.deletedBackground#E60073
  • minimapGutter.modifiedBackground#664400
  • notebook.focusedRowBorder#664400
  • notifications.background#fffeea
  • notificationsErrorIcon.foreground#E60073
  • notificationsInfoIcon.foreground#664400
  • notificationsWarningIcon.foreground#EF7C2A
  • panel.dropBorder#664400
  • panelTitle.activeBorder#664400
  • peekViewResult.background#fffeea
  • peekViewTitle.background#212121
  • pickerGroup.border#141414
  • pickerGroup.foreground#664400
  • problemsErrorIcon.foreground#E60073
  • problemsInfoIcon.foreground#664400
  • problemsWarningIcon.foreground#EF7C2A
  • progressBar.background#664400
  • scrollbar.shadow#141414
  • scrollbarSlider.activeBackground#61616140
  • scrollbarSlider.background#fffeea
  • scrollbarSlider.hoverBackground#ffffff
  • selection.background#66440080
  • settings.modifiedItemIndicator#664400
  • sideBar.background#fffeea
  • sideBarSectionHeader.background#fffeea
  • statusBar.background#fffeea
  • statusBarItem.hoverBackground#fffeea
  • statusBarItem.prominentBackground#664400
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#338ccd
  • tab.activeBackground#fffeea
  • tab.activeBorder#664400
  • tab.activeModifiedBorder#664400
  • tab.border#ffffff
  • tab.hoverBackground#88A2BF
  • tab.inactiveBackground#CDC4AA
  • tab.lastPinnedBorder#66440050
  • terminal.selectionBackground#664400
  • terminalCursor.background#000000
  • terminalCursor.foreground#664400
  • textLink.activeForeground#4CBF99
  • textLink.foreground#A470D8
  • textPreformat.foreground#fa8d3e
  • textSeparator.foreground#141414
  • titleBar.activeBackground#fffeea
  • titleBar.border#404040
  • titleBar.inactiveBackground#fffeea
  • widget.shadow#141414

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#E60073
meta.embedded, source.groovy.embedded, meta.template.expression#36454f
variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#7BAFD4
comment, punctuation.definition.comment#CDC4AA
string, punctuation.definition.string#ff99cc
constant.character.escape#A470D8
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#ff8c19
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new#A470D8
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#00b300
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#E60073
constant#FFB319
constant.numeric, constant.language#78BD65
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#E60073
punctuation, meta.brace#36454f
comment.block.documentation entity.name.type#E60073
variable.language.this, variable.language.special.self#A470D8
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#36454f
entity.name.tag#A470D8
meta.tag string#0066
meta.attribute punctuation.definition.string#36454f
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#fa8d3e
constant.character.entity, punctuation.definition.entity#78BD65
entity.name.section.markdown, markup.heading.setext#fa8d3e
punctuation.definition.list#fa8d3e
meta.separator.markdown#fa8d3e
markup.inline.raw#A470D8
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#36454f
link, markup.underline.link, constant.other.reference.link.markdown#4CBF99
markup.quote#78BD65
entity.name.tag.css, entity.name.tag.wildcard#664400
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#A470D8
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#00994d
source.css constant.numeric#664400
meta.property-name, support.type.property-name#78BD65
meta.property-value, meta.property-value constant.other, support.constant.property-value#00994d
variable.parameter.url#78BD65
punctuation.definition.variable#36454f
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#fa8d3e
entity.name.section#00994d
support.type.property-name.json#fa8d3e
markup.inserted#78BD65
markup.changed#664400
markup.deleted#E60073
meta.diff.header#664400italic
meta.diff.range#A470D8