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.background#191919
  • activityBar.dropBackground#1c1c1c
  • activityBar.foreground#a6a6a6
  • activityBarBadge.background#004747
  • activityBarBadge.foreground#bfbfbf
  • badge.background#262626
  • badge.foreground#d7d7d7
  • button.background#404040
  • button.hoverBackground#545454
  • debugToolBar.background#191919
  • diffEditor.insertedTextBackground#2e8b5733
  • diffEditor.removedTextBackground#ff424233
  • dropdown.background#262626
  • dropdown.border#1a1a1a
  • dropdown.listBackground#1f1f1f
  • editor.background#1f1f1f
  • editor.foreground#bfbfbf
  • editor.lineHighlightBackground#383838
  • editor.selectionBackground#008080
  • editor.selectionHighlightBackground#2e8b5777
  • editorBracketMatch.background#50505050
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#808080
  • editorCursor.foreground#007a7a
  • editorError.foreground#ff4242
  • editorGroup.border#1a1a1a
  • editorGroup.dropBackground#1a1a1a7f
  • editorGroupHeader.tabsBackground#191919
  • editorGutter.addedBackground#2e8b57
  • editorGutter.deletedBackground#ff4242
  • editorGutter.modifiedBackground#b4b432
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorOverviewRuler.addedForeground#2e8b57
  • editorOverviewRuler.border#111111
  • editorOverviewRuler.deletedForeground#ff4242
  • editorOverviewRuler.errorForeground#ff0000
  • editorOverviewRuler.findMatchForeground#008080
  • editorOverviewRuler.infoForeground#62b1ff
  • editorOverviewRuler.modifiedForeground#b4b432
  • editorOverviewRuler.rangeHighlightForeground#a6a6a6
  • editorOverviewRuler.selectionHighlightForeground#008080
  • editorOverviewRuler.warningForeground#ff8c00
  • editorOverviewRuler.wordHighlightForeground#bfbfbf
  • editorOverviewRuler.wordHighlightStrongForeground#bfbfbf
  • editorRuler.foreground#404040
  • editorSuggestWidget.background#262626
  • editorSuggestWidget.border#1a1a1a
  • editorSuggestWidget.foreground#bfbfbf
  • editorSuggestWidget.highlightForeground#2e8b57
  • editorSuggestWidget.selectedBackground#383838
  • editorWarning.foreground#ff8c00
  • editorWhitespace.foreground#404040
  • editorWidget.background#262626
  • editorWidget.border#454545
  • errorForeground#ff4242
  • extensionButton.prominentBackground#2e8b57
  • extensionButton.prominentHoverBackground#3cb371
  • focusBorder#1f1f1f
  • foreground#d7d7d7
  • gitDecoration.conflictingResourceForeground#ff8c00
  • gitDecoration.deletedResourceForeground#ff4242
  • gitDecoration.ignoredResourceForeground#404040
  • gitDecoration.modifiedResourceForeground#b4b432
  • gitDecoration.untrackedResourceForeground#2e8b57
  • input.background#333333
  • input.border#1a1a1a
  • inputOption.activeBorder#1c1c1c
  • inputValidation.errorBackground#802d2d
  • inputValidation.errorBorder#6b2929
  • list.activeSelectionBackground#262626
  • list.activeSelectionForeground#bfbfbf
  • list.hoverBackground#1f1f1f
  • list.inactiveSelectionBackground#1a1a1a
  • merge.currentContentBackground#2e8b5733
  • merge.currentHeaderBackground#2e8b5777
  • merge.incomingContentBackground#008b8b33
  • merge.incomingHeaderBackground#008b8b77
  • panel.background#1f1f1f
  • panel.border#1a1a1a
  • panelTitle.activeBorder#2e8b57
  • panelTitle.activeForeground#bfbfbf
  • panelTitle.inactiveForeground#737373
  • peekView.border#2e8b57
  • peekViewEditor.background#1c1c1c
  • peekViewEditor.matchHighlightBackground#50505050
  • peekViewEditorGutter.background#1c1c1c
  • peekViewResult.background#1f1f1f
  • peekViewResult.matchHighlightBackground#50505050
  • peekViewResult.selectionBackground#383838
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#a6a6a6
  • pickerGroup.border#1a1a1a
  • pickerGroup.foreground#2e8b57
  • progressBar.background#004747
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#454545
  • scrollbarSlider.background#333333
  • scrollbarSlider.hoverBackground#404040
  • selection.background#383838
  • sideBar.background#191919
  • sideBar.foreground#a6a6a6
  • sideBarSectionHeader.background#1a1a1a
  • sideBarTitle.foreground#a6a6a6
  • statusBar.background#151515
  • statusBar.debuggingBackground#af4242
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#737373
  • statusBar.noFolderBackground#151515
  • statusBarItem.activeBackground#383838
  • statusBarItem.hoverBackground#404040
  • statusBarItem.remoteBackground#2e8b57
  • statusBarItem.remoteForeground#151515
  • tab.activeBackground#262626
  • tab.activeBorder#2e8b57
  • tab.activeForeground#bfbfbf
  • tab.border#191919
  • tab.inactiveBackground#1c1c1c
  • tab.inactiveForeground#737373
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#62b1ff
  • terminal.ansiBrightBlack#404040
  • terminal.ansiBrightBlue#80c0ff
  • terminal.ansiBrightCyan#80ffff
  • terminal.ansiBrightGreen#3cb371
  • terminal.ansiBrightMagenta#ff80ff
  • terminal.ansiBrightRed#ff6666
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff80
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#2e8b57
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff4242
  • terminal.ansiWhite#f0f0f0
  • terminal.ansiYellow#ffff00
  • textLink.activeForeground#bfbfbf
  • textLink.foreground#a6a6a6
  • titleBar.activeBackground#151515
  • titleBar.activeForeground#a6a6a6
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#737373
  • welcomePage.buttonBackground#191919
  • welcomePage.buttonHoverBackground#262626
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6c6c6c
variable, support.variable, string constant.other.placeholder, text.html#d7d7d7
support.variable.dom, support.constant.math#bfbfbf
constant.other.color#bfbfbf
invalid, invalid.illegal#ff4242
invalid.deprecated#b4b432
keyword, storage.type, storage.modifier#2e8b57
keyword.control#00ffff
keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#00ffff
punctuation.section.embedded, variable.interpolation#ff00ff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff4242
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#62b1ff
meta.block variable.other#d7d7d7
support.other.variable, string.other.link#ff4242
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffff00
string constant.numeric#ff8c00
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#2e8b57
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ff8c00
support.type#b2ccd6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css, support.type.vendored.property-name#7fdbca
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff4242
variable.language#ff4242
entity.name.method.js#82AAFF
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6B
entity.other.attribute-name.class#FFCB6B
source.sass keyword.control#82AAFF
markup.inserted#2e8b57
markup.deleted#ff4242
markup.changed#b4b432
string.regexp#9effff
constant.character.escape#9effff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFF
source.js constant.other.object.key.js string.unquoted.label.js#FF5370
source.json meta.structure.dictionary.json support.type.property-name.json#b4b432
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffff00
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#62b1ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#00ffff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff00ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#2e8b57
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff4242
text.html.markdown, punctuation.definition.list_item.markdown#d7d7d7
text.html.markdown markup.inline.raw.markdown#bfbfbf
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#00ffff
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#2e8b57
markup.italic#ff8c00italic
markup.bold, markup.bold string#ff8c00bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#ff8c00bold
markup.underline#ff00ffunderline
markup.quote punctuation.definition.blockquote.markdown#00ffff
markup.quoteitalic
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#bfbfbf
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d7d7d7
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#d7d7d7