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#141617
  • activityBar.border#282b2d
  • activityBarBadge.background#52a9ff
  • activityBarBadge.foreground#212121
  • button.background#52a9ff
  • button.foreground#141617
  • button.hoverBackground#52a9ffe8
  • diffEditor.border#282b2d
  • diffEditor.insertedLineBackground#23ce6b42
  • diffEditor.insertedTextBackground#23ce6b42
  • diffEditor.removedLineBackground#ff000048
  • diffEditor.removedTextBackground#ff000048
  • diffEditorGutter.insertedLineBackground#23ce6b42
  • dropdown.background#2a2a2a
  • dropdown.foreground#ededee
  • dropdown.listBackground#212121
  • editor.background#141617
  • editor.foreground#ededee
  • editor.lineHighlightBackground#2a2a2a
  • editor.selectionBackground#343434
  • editorError.foreground#ff5c61
  • editorGroup.border#282b2d
  • editorGroupHeader.tabsBackground#141617
  • editorGutter.addedBackground#1eae5a
  • editorGutter.deletedBackground#ff5c61
  • editorGutter.modifiedBackground#52a9ff
  • editorOverviewRuler.addedForeground#1eae5a
  • editorOverviewRuler.errorForeground#ff5c61
  • editorOverviewRuler.modifiedBackground#52a9ff
  • editorWarning.foreground#FFF275
  • errorForeground#ff5c61
  • focusBorder#52a9ff
  • gitDecoration.addedResourceForeground#1eae5a
  • gitDecoration.deletedResourceForeground#ff5c61
  • gitDecoration.modifiedResourceForeground#52a9ff
  • input.background#2a2a2a
  • inputOption.activeBackground#52a9ff
  • inputOption.activeBorder#141617
  • inputOption.activeForeground#141617
  • keybindingLabel.background#c072f8
  • keybindingLabel.foreground#141617
  • list.activeSelectionBackground#343434
  • list.activeSelectionForeground#ededee
  • list.errorForeground#ff5c61
  • list.focusOutline#00000000
  • list.hoverBackground#212121
  • list.hoverForeground#ededee
  • list.inactiveSelectionBackground#2a2a2a
  • list.inactiveSelectionForeground#ededee
  • list.warningForeground#FFF275
  • menu.background#212121
  • menu.separatorBackground#343434
  • peekView.border#9b9b9b
  • peekViewEditor.background#141617
  • peekViewResult.background#141617
  • peekViewTitle.background#141617
  • progressBar.background#c072f8
  • quickInput.background#212121
  • quickInput.foreground#ededee
  • quickInputList.focusBackground#343434
  • quickInputList.focusForeground#ededee
  • sideBar.background#141617
  • sideBar.foreground#ededee
  • sideBarSectionHeader.background#141617
  • sideBarTitle.foreground#ededee
  • statusBar.background#141617
  • statusBar.border#282b2d
  • tab.activeBackground#2a2a2a
  • tab.border#141617
  • tab.hoverBackground#212121
  • tab.inactiveBackground#141617
  • titleBar.activeBackground#141617
  • titleBar.activeForeground#ededee
  • titleBar.border#282b2d
  • titleBar.inactiveBackground#141617
  • titleBar.inactiveForeground#ededee

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#81888ditalic
invalid, invalid.illegal, invalid.broken#ff5c61
support.other.variable, string.other.link#ededee
markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#ededee
keyword.control.from, keyword.control.import, keyword.control.export, keyword.control.default#52a9ff
variable.other.readwrite.alias, meta.import#ededee
meta.import string#ff5c61
string, constant.other.symbol, constant.other.key#ff5c61
constant.numeric#c072f8
constant.language.boolean#fcaf4a
meta.object-literal.key, variable.object.property#ededee
keyword, keyword.operator#81888d
keyword.control#52a9ff
keyword.operator.logical#ededee
keyword.other.template, keyword.other.substitution#81888d
variable.other.object#ededee
punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.section.embedded#81888d
punctuation.definition.binding-pattern.object, punctuation.definition.binding-pattern.array#ededee
punctuation.accessor#ededee
keyword.operator.spread, keyword.operator.rest#52a9ff
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html
storage.type, storage.modifier#52a9ff
variable, string constant.other.placeholder#ededee
variable.other.constant#ededee
variable.other.constant.property#52a9ff
storage.type.function#52a9ff
storage.type.function.arrow#c072f8
entity.name.function, meta.function-call, variable.function, support.function, meta.function-call entity.name.function, keyword.other.special-method, meta.block-level#c072f8
support.function, meta.function-call entity.name.function
variable.parameter#ededee
punctuation.definition.parameters.begin, punctuation.definition.parameters.end#ededee
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#c072f8
entity.other.attribute-name#ff5c61
meta.tag.attributes variable.other, meta.tag.attributes variable.other.object, meta.tag.attributes variable.other.property#ededee
meta.tag.attributes string#ededee
entity.name, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#ededee
support.class, support.other.namespace.php, support.type.sys-types#52a9ff
support.class.component#c072f8
storage.type.interface, storage.type.type, storage.modifier#52a9ff
entity.name.type, support.type, support.type.primitive#ff5c61
entity.other.inherited-class#c072f8
constant.language, support.constant, constant.character, constant.escape, keyword.other#c072f8
variable.language, keyword.operator.new#ff5c61italic
constant.language#fcaf4a
entity.name.tag.html#52a9ff
entity.other.attribute-name.html#c072f8italic
entity.name.tag.css#52a9ff
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#ededee
entity.other.attribute-name.class#ff5c61
entity.other.attribute-name.id#c072f8
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#ededee
support.constant.property-value#ff5c61
constant.numeric.css, keyword.other.unit#ff5c61
meta.jsx.children#ededee
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ededee
entity.name.method.js#ededeeitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#ededee
markup.inserted#ededee
markup.deleted#ededee
markup.changed#ededee
string.regexp#fcaf4a
constant.character.escape#7be0ad
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff5c61italic
source.json meta.structure.dictionary.json support.type.property-name.json#c072f8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ededee
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#c072f8
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#ededee
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#c072f8
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#ededee
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#c072f8
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ededee
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c072f8
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#f07178bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF