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#151515
  • activityBar.activeBorder#059669
  • activityBar.background#181818
  • activityBar.border#2B2B2B
  • activityBar.foreground#D7D7D7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#059669
  • activityBarBadge.foreground#FFFFFF
  • badge.background#616161
  • badge.foreground#F8F8F8
  • breadcrumb.background#151515
  • breadcrumb.focusForeground#e5e5e5
  • breadcrumb.foreground#999
  • button.background#047857
  • button.border#FFFFFF12
  • button.foreground#FFFFFF
  • button.hoverBackground#065f46
  • button.secondaryBackground#313131
  • button.secondaryForeground#CCCCCC
  • button.secondaryHoverBackground#3C3C3C
  • chat.slashCommandBackground#1b2b28
  • chat.slashCommandForeground#059669
  • checkbox.background#313131
  • checkbox.border#3C3C3C
  • debugToolBar.background#181818
  • debugToolBar.border#474747
  • descriptionForeground#9D9D9D
  • dropdown.background#313131
  • dropdown.border#3C3C3C
  • dropdown.foreground#CCCCCC
  • dropdown.listBackground#1F1F1F
  • editor.background#1F1F1F
  • editor.findMatchBackground#9E6A03
  • editor.foreground#CCCCCC
  • editor.selectionBackground#064e3b
  • editorError.foreground#f48771
  • editorGroup.border#FFFFFF17
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#2B2B2B
  • editorGutter.addedBackground#2EA043
  • editorGutter.deletedBackground#F85149
  • editorGutter.modifiedBackground#059669
  • editorLineNumber.activeForeground#CCCCCC
  • editorLineNumber.foreground#6E7681
  • editorOverviewRuler.border#010409
  • editorWarning.foreground#F7CC66
  • editorWidget.background#202020
  • editorWidget.foreground#ccc
  • editorWidget.resizeBorder#5f5f5f
  • errorForeground#F85149
  • focusBorder#059669
  • foreground#CCCCCC
  • gitDecoration.addedResourceForeground#81B88B
  • gitDecoration.conflictingResourceForeground#6C6CC4
  • gitDecoration.deletedResourceForeground#C74E39
  • gitDecoration.ignoredResourceForeground#8C8C8C
  • gitDecoration.modifiedResourceForeground#E2C08D
  • gitDecoration.submoduleResourceForeground#8DB9E2
  • gitDecoration.untrackedResourceForeground#73C991
  • icon.foreground#CCCCCC
  • input.background#313131
  • input.border#3C3C3C
  • input.foreground#CCCCCC
  • input.placeholderForeground#989898
  • inputOption.activeBackground#065f46
  • inputOption.activeBorder#059669
  • keybindingLabel.foreground#CCCCCC
  • list.activeSelectionBackground#022c22
  • list.dropBackground#151515
  • list.errorForeground#f48771
  • list.focusBackground#e5e5e51a
  • list.focusForeground#808080
  • list.highlightForeground#e5e5e5
  • list.warningForeground#F7CC66
  • menu.background#1F1F1F
  • menu.border#00000000
  • menu.foreground#e5e5e5
  • menu.selectionBackground#059669
  • menu.selectionBorder#00000000
  • menu.selectionForeground#e5e5e5
  • menubar.selectionBackground#e5e5e51a
  • menubar.selectionForeground#c5c5c5
  • notificationCenterHeader.background#1F1F1F
  • notificationCenterHeader.foreground#CCCCCC
  • notifications.background#1F1F1F
  • notifications.border#2B2B2B
  • notifications.foreground#CCCCCC
  • panel.background#181818
  • panel.border#2B2B2B
  • panelInput.border#2B2B2B
  • panelTitle.activeBorder#059669
  • panelTitle.activeForeground#CCCCCC
  • panelTitle.inactiveForeground#9D9D9D
  • peekViewEditor.background#1F1F1F
  • peekViewEditor.matchHighlightBackground#BB800966
  • peekViewResult.background#1F1F1F
  • peekViewResult.matchHighlightBackground#BB800966
  • pickerGroup.border#3C3C3C
  • pickerGroup.foreground#3794ff
  • progressBar.background#059669
  • quickInput.background#222222
  • quickInput.foreground#CCCCCC
  • scrollbar.shadow#0000007e
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#6f6f6f
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3C3C3C
  • settings.headerForeground#FFFFFF
  • settings.modifiedItemIndicator#BB800966
  • sideBar.background#181818
  • sideBar.border#2B2B2B
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#2B2B2B
  • sideBarSectionHeader.foreground#CCCCCC
  • sideBarTitle.foreground#CCCCCC
  • statusBar.background#181818
  • statusBar.border#2B2B2B
  • statusBar.debuggingBackground#059669
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#059669
  • statusBar.foreground#CCCCCC
  • statusBar.noFolderBackground#1F1F1F
  • statusBarItem.focusBorder#059669
  • statusBarItem.prominentBackground#6E768166
  • statusBarItem.remoteBackground#047857
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#1F1F1F
  • tab.activeBorder#1F1F1F
  • tab.activeBorderTop#059669
  • tab.activeForeground#FFFFFF
  • tab.border#2B2B2B
  • tab.hoverBackground#1F1F1F
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#9D9D9D
  • tab.selectedBorderTop#6cdfad
  • tab.unfocusedActiveBorder#1F1F1F
  • tab.unfocusedActiveBorderTop#2B2B2B
  • tab.unfocusedHoverBackground#1F1F1F
  • terminal.foreground#CCCCCC
  • terminal.tab.activeBorder#059669
  • textBlockQuote.background#2B2B2B
  • textBlockQuote.border#616161
  • textCodeBlock.background#2B2B2B
  • textLink.activeForeground#059669
  • textLink.foreground#059669
  • textPreformat.background#3C3C3C
  • textPreformat.foreground#D0D0D0
  • textSeparator.foreground#21262D
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#CCCCCC
  • titleBar.border#2B2B2B
  • titleBar.inactiveBackground#1F1F1F
  • titleBar.inactiveForeground#9D9D9D
  • welcomePage.progress.foreground#059669
  • welcomePage.tileBackground#2B2B2B
  • widget.border#313131
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment,punctuation.definition.comment,comment.line.double-slash,comment.block.documentationitalic
comment.line.double-slash,comment.block.documentationitalic
markup.italic.markdownitalic
meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.nodeitalic
string#BFD084
punctuation.definition.string#BFD084
constant.character.escape#BFD084
text.html constant.character.entity.named#BFD084
text.html.derivative#E5E5E5
punctuation.definition.entity.html#BFD084
template.expression.begin#7AD9FB
template.expression.end#7AD9FB
punctuation.definition.template-expression.begin#7AD9FB
punctuation.definition.template-expression.end#7AD9FB
constant#7AD9FB
keyword#A390FF
modifier#A390FF
storage#A390FF
punctuation.definition.block#86897A
punctuation.definition.parameters#86897A
meta.brace.round#86897A
meta.jsx.children#e5e5e5
punctuation.accessor#86897A
variable.other#ffffff
variable.parameter#ffffff
meta.embedded#E5E5E5
source.groovy.embedded#E5E5E5
meta.template.expression#E5E5E5
comment#6f6f6f
docblock#6f6f6f
meta.function-call#CDF861
meta.class entity.name.type.class#ffffffunderline
meta.class entity.name.type.module#CABEFF
meta.class meta.type.annotation, meta.class support.type.primitive, meta.interface support.type.primitive, meta.type.annotation support.type.primitive#A390FF
meta.type.annotation entity.name.type#CABEFF
variable.object.property#ffffff
entity.name.function#CDF861
meta.definition.variable#ffffff
modifier#A390FF
variable.language.this#A390FF
support.type.object#A390FF
support.module#7AD9FBitalic
support.node#7AD9FBitalic
support.type.ts#7AD9FB
entity.other.inherited-class#7AD9FB
meta.interface entity.name.type.interface#7AD9FB
keyword.operator#b3e8b4
storage.type.function.arrow#b3e8b4
variable.css#7AD9FB
source.css#CDF861
entity.other.attribute-name#CDF861
entity.name.tag.css#CDF861
entity.other.attribute-name.id#CDF861
entity.other.attribute-name.class#CDF861
source.css meta.selector.css#CDF861
support.type.property-name.css#ffffff
support.function.css#A390FF
support.constant.css#A390FF
keyword.css#A390FF
constant.numeric.css#A390FF
constant.other.color.css#A390FF
punctuation.section#86897A
punctuation.separator#86897A
punctuation.definition.entity.css#86897A
punctuation.terminator.rule.css#E5E5E5
source.css keyword.other.unit#CABEFF
string.css#CABEFF
punctuation.definition.string.css#CABEFF
support.type.property-name#ffffff
string.html#CDF861
punctuation.definition.tag#86897A
entity.other.attribute-name#CABEFF
entity.name.tag#A390FF
entity.name.tag.wildcard#CDF861
markup.markdown#ffffff
markup.heading.markdown#b3e8b4
punctuation.definition.bold.markdown#b3e8b4
meta.paragraph.markdown punctuation.definition.link.description#b3e8b4
punctuation.definition.raw.markdown#b3e8b4
meta.paragraph.markdown#e5e5e5
text.html.markdown meta.attribute#CABEFF
entity.name.section#ffffff
string.other#ffffff
string.other.link#ffffff
punctuation.definition.markdown#b3e8b4
punctuation.definition.string#b3e8b4
punctuation.definition.string.begin.shell#b3e8b4
markup.underline.link#BFD084
markup.inline.raw#86897A
text.html.vue variable.other.readwrite#A390FF
text.html.vue meta.object-literal.key#ffffff
text.html.vue entity.name.tag.css#A390FF
text.html.vue entity.other.attribute-name#ffffff
text.html.vue constant.numeric.css#7AD9FB
text.html.vue keyword.other.unit, text.html.vue support.constant.property-value, text.html.vue support.constant.color#A390FF