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#3E3D32
  • activityBar.activeBorder#A6E22E
  • activityBar.background#1E1F1C
  • activityBar.border#75715E
  • activityBar.foreground#F8F8F2
  • button.background#3E3D32
  • button.border#75715E
  • button.foreground#F8F8F2
  • button.hoverBackground#75715E
  • debugIcon.continueForeground#A6E22E
  • debugIcon.disconnectForeground#FD971F
  • debugIcon.pauseForeground#FD971F
  • debugIcon.restartForeground#A6E22E
  • debugIcon.startForeground#A6E22E
  • debugIcon.stepBackForeground#AE81FF
  • debugIcon.stepIntoForeground#66D9E8
  • debugIcon.stepOutForeground#66D9E8
  • debugIcon.stepOverForeground#66D9E8
  • debugIcon.stopForeground#F92672
  • debugToolBar.background#272822
  • dropdown.background#272822
  • dropdown.border#75715E
  • dropdown.foreground#F8F8F2
  • editor.background#272822
  • editor.findMatchBackground#E6DB7455
  • editor.findMatchBorder#E6DB74
  • editor.findMatchHighlightBackground#E6DB7425
  • editor.findMatchHighlightBorder#E6DB7470
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#75715E25
  • editor.lineHighlightBackground#3E3D3250
  • editor.selectionBackground#75715E40
  • editor.selectionHighlightBackground#75715E20
  • editor.selectionHighlightBorder#75715E60
  • editor.wordHighlightBackground#66D9E840
  • editor.wordHighlightBorder#66D9E890
  • editor.wordHighlightStrongBackground#F92672
  • editor.wordHighlightStrongBorder#F92672
  • editorGroup.border#75715E
  • editorGroupHeader.tabsBorder#1E1F1C
  • editorIndentGuide.activeBackground#75715E
  • editorIndentGuide.background#3E3D32
  • editorLineNumber.activeForeground#A6E22E
  • editorLineNumber.foreground#75715E
  • editorSuggestWidget.background#272822
  • editorSuggestWidget.border#75715E
  • editorSuggestWidget.highlightForeground#A6E22E
  • editorSuggestWidget.selectedBackground#3E3D32
  • editorWidget.background#272822
  • editorWidget.border#75715E
  • extensionButton.prominentBackground#A6E22E
  • extensionButton.prominentForeground#272822
  • extensionButton.prominentHoverBackground#66D9E8
  • gitDecoration.addedResourceForeground#A6E22E
  • gitDecoration.conflictingResourceForeground#FD971F
  • gitDecoration.deletedResourceForeground#F92672
  • gitDecoration.ignoredResourceForeground#75715E
  • gitDecoration.modifiedResourceForeground#E6DB74
  • gitDecoration.renamedResourceForeground#66D9E8
  • gitDecoration.untrackedResourceForeground#AE81FF
  • input.background#272822
  • input.border#75715E
  • input.foreground#F8F8F2
  • input.placeholderForeground#75715E
  • list.activeSelectionBackground#3E3D32
  • list.activeSelectionForeground#A6E22E
  • list.background#1E1F1C
  • list.focusBackground#3E3D32
  • list.focusForeground#A6E22E
  • list.foreground#F8F8F2
  • list.hoverBackground#3E3D32
  • list.inactiveSelectionBackground#272822
  • list.inactiveSelectionForeground#F8F8F2
  • notification.background#272822
  • notification.border#75715E
  • notification.foreground#F8F8F2
  • panel.background#1E1F1C
  • panel.border#75715E
  • peekView.border#A6E22E
  • peekViewEditor.background#272822
  • peekViewEditor.matchHighlightBackground#E6DB7440
  • peekViewResult.background#1E1F1C
  • peekViewResult.fileForeground#F8F8F2
  • peekViewResult.lineForeground#75715E
  • peekViewResult.matchHighlightBackground#E6DB7440
  • peekViewTitle.background#3E3D32
  • peekViewTitleDescription.foreground#75715E
  • peekViewTitleLabel.foreground#F8F8F2
  • progressBar.background#A6E22E
  • scrollbar.shadow#1E1F1C
  • scrollbarSlider.activeBackground#66D9E8
  • scrollbarSlider.background#75715E
  • scrollbarSlider.hoverBackground#A6E22E
  • sideBar.background#1E1F1C
  • sideBar.border#75715E
  • sideBar.foreground#F8F8F2
  • sideBarSectionHeader.background#272822
  • sideBarSectionHeader.border#75715E
  • sideBarSectionHeader.foreground#A6E22E
  • sideBarTitle.foreground#A6E22E
  • statusBar.background#1E1F1C
  • statusBar.border#75715E
  • statusBar.debuggingBackground#FD971F
  • statusBar.debuggingForeground#272822
  • statusBar.foreground#F8F8F2
  • tab.activeBackground#272822
  • tab.activeBorder#A6E22E
  • tab.activeBorderTop#A6E22E
  • tab.activeForeground#F8F8F2
  • tab.border#1E1F1C
  • tab.inactiveBackground#1E1F1C
  • tab.inactiveForeground#75715E
  • terminal.background#272822
  • terminal.foreground#F8F8F2
  • titleBar.activeBackground#1E1F1C
  • titleBar.activeForeground#F8F8F2
  • titleBar.border#75715E
  • titleBar.inactiveBackground#1E1F1C
  • titleBar.inactiveForeground#75715E
  • tree.indentGuidesStroke#3E3D32
  • tree.tableColumnsBorder#75715E
  • welcomePage.background#272822
  • welcomePage.progress.background#A6E22E
  • welcomePage.progress.foreground#F8F8F2
  • welcomePage.tileBackground#1E1F1C
  • welcomePage.tileBorder#75715E
  • welcomePage.tileHoverBackground#3E3D32
  • widget.shadow#1E1F1C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.line.double-slash, comment.line.number-sign#75715Eitalic
variable, variable.other, variable.parameter, variable.language, string constant.other.placeholder#F8F8F2—
constant.other.color#ffffff—
invalid, invalid.illegal, invalid.broken#F8F8F2—
keyword, storage.type, storage.modifier#F92672—
storage.type, keyword.control—italic
keyword.operator, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded#F8F8F2—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#F92672—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#A6E22E—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#AE81FF—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter#E6DB74normal
entity.name.class, entity.name.type.class, support.type, support.class, markup.changed.git_gutter, support.type.sys-types#66D9E8—
source.css support.type, source.sass support.type, source.scss support.type#66D9E8—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#F92672—
variable.language#F92672italic
entity.name.method.js#A6E22E—
entity.other.attribute-name#A6E22E—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FD971Fitalic
entity.other.attribute-name.class#FD971F—
source.sass keyword.control#A6E22E—
markup.inserted#A6E22E—
markup.deleted#F92672—
markup.changed#FD971F—
string.regexp#66D9E8—
constant.character.escape#66D9E8—
*url*, *link*, *uri*—underline
entity.name.filename.find-in-files#A6E22E—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#AE81FFitalic
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#66D9E8—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#A6E22E—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#A6E22E—
markup.italic#F92672italic
markup.bold, markup.bold string#FD971Fbold
markup.bold markup.italic, markup.italic markup.bold—bold italic
markup.underline#66D9E8underline
string.other.link.title.markdown#66D9E8—
string.other.link.description.title.markdown#AE81FF—
markup.table#F8F8F2—
markup.inserted.git_gutter#A6E22E—
markup.changed.git_gutter#FD971F—
markup.deleted.git_gutter#F92672—
brackethighlighter.default#F8F8F2—
brackethighlighter.unmatched#F92672—