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#2c3038
  • activityBarBadge.background#6a8799
  • diffEditor.insertedTextBackground#788351
  • diffEditor.removedTextBackground#b1524e
  • editor.background#2e333b
  • editor.foreground#d9d9d9
  • editor.lineHighlightBackground#353a44
  • editor.selectionBackground#525968
  • editor.selectionHighlightBackground#52596870
  • editor.wordHighlightBackground#FFFFFF0D
  • editor.wordHighlightStrongBackground#ffffff17
  • editorGroupHeader.tabsBackground#2a2e36
  • editorGutter.addedBackground#909d63
  • editorGutter.deletedBackground#bc5653
  • editorGutter.modifiedBackground#ebc17a
  • editorLineNumber.activeForeground#808080
  • editorLineNumber.foreground#6363639d
  • editorRuler.foreground#6363639d
  • editorSuggestWidget.highlightForeground#616161
  • editorWhitespace.foreground#6363639d
  • editorWidget.background#2a2e36
  • editorWidget.border#5a5a5a
  • focusBorder#353a44
  • gitDecoration.conflictingResourceForeground#b06698
  • gitDecoration.deletedResourceForeground#bc5653
  • gitDecoration.ignoredResourceForeground#d9d9d9
  • gitDecoration.modifiedResourceForeground#ffc600
  • gitDecoration.untrackedResourceForeground#909d63
  • input.border#808080
  • list.activeSelectionBackground#24252b
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#6a8799
  • list.focusForeground#f7f7f7
  • list.highlightForeground#616161
  • list.hoverBackground#24252b
  • list.inactiveSelectionForeground#ffffff
  • notificationLink.foreground#616161
  • panel.background#2c3038
  • panel.border#2c3038
  • pickerGroup.foreground#616161
  • progressBar.background#616161
  • scrollbar.shadow#353a44
  • scrollbarSlider.activeBackground#616161
  • sideBar.background#2a2e36
  • sideBar.border#2a2e36
  • sideBarSectionHeader.background#2d313a
  • sideBarTitle.foreground#d9d9d9
  • statusBar.background#2c3038
  • statusBar.border#2c3038
  • statusBar.debuggingBackground#7eaac7
  • statusBar.debuggingForeground#353a44
  • statusBar.noFolderBackground#2c3038
  • statusBar.noFolderForeground#ffffff
  • tab.activeBorder#616161
  • tab.inactiveBackground#2a2e36
  • terminal.ansiBlack#151515
  • terminal.ansiBlue#6a8799
  • terminal.ansiBrightBlack#636363
  • terminal.ansiBrightBlue#7eaac7
  • terminal.ansiBrightCyan#acbbd0
  • terminal.ansiBrightGreen#a0ac77
  • terminal.ansiBrightMagenta#b48ead
  • terminal.ansiBrightRed#bc5653
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#ebc17a
  • terminal.ansiCyan#c9dfff
  • terminal.ansiGreen#909d63
  • terminal.ansiMagenta#b06698
  • terminal.ansiRed#bc5653
  • terminal.ansiWhite#d9d9d9
  • terminal.ansiYellow#ebc17a
  • terminal.background#353a44
  • terminal.foreground#d9d9d9
  • terminal.selectionBackground#6a79853a
  • terminalCursor.background#d9d9d9
  • terminalCursor.foreground#d9d9d9
  • textLink.foreground#616161
  • titleBar.activeBackground#2a2e36
  • widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#727272italic
variable, string constant.other.placeholder#d9d9d9
constant.other.color#f7f7f7
invalid, invalid.illegal#bc5653
keyword, storage.type, storage.modifier#b06698
keyword.control, 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#6a8799
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#bc5653
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.parameters, punctuation#7eaac7
meta.block variable.other#d9d9d9
support.other.variable, string.other.link#bc5653
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#b06698
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#909d63
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#ebc17a
support.type#7eaac7
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#7eaac7
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#bc5653
variable.language#bc5653italic
entity.name.method.js#7eaac7italic
meta.class-method.js entity.name.function.js, variable.function.constructor#6a8799
entity.other.attribute-name.js#b06698
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, entity.other.attribute-name.js#ebc17aitalic
support.constant.font-name.css, meta.property-value.scss, constant.numeric.css, support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.hex.css, punctuation.section.function.scss, support.constant.property-value.css, entity.other.attribute-name.attribute.scss#ebc17a
keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.cm.css, keyword.other.unit.percentage.css, punctuation.definition.constant.css#ebc17a
keyword.control.at-rule.media.css, support.constant.media.css, keyword.control.at-rule.media.scss, meta.at-rule.media.scss, keyword.control.at-rule.page.scss, meta.at-rule.page.scss, punctuation.definition.keyword.scss#6a8799italic
source.css variable, source.stylus variable, source.sass variable#acbbd0
entity.other.attribute-name.class#909d63
source.sass keyword.control, entity.other.attribute-name.id.css#b06698
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string, meta.attribute-selector.scss#909d63
keyword.operator.scss#d9d9d9
punctuation.definition.entity.css, meta.property-list.scss#6a8799
markup.inserted#909d63
markup.deleted#bc5653
markup.changed#ebc17a
string.regexp#acbbd0
constant.character.escape#acbbd0
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7eaac7italic
source.js constant.other.object.key.js string.unquoted.label.js#bc5653italic
string.quoted.double.json#c9dfff
constant.language.json#bc5653
source.json meta.structure.dictionary.json support.type.property-name.json#ebc17a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7eaac7
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#bc5653
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#bc5653
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#bc5653
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#bc5653
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#bc5653
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#bc5653
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#bc5653
text.html.markdown, punctuation.definition.list_item.markdown#d9d9d9
text.html.markdown markup.inline.raw.markdown#bc5653
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#d9d9d9
text.html.markdown meta.dummy.line-break#bc5653
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#909d63
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.quote#65737Eitalic
string.other.link.title.markdown#6894c1
string.other.link.description.title.markdown#6894c1
constant.other.reference.link.markdown#ebc17a
markup.raw.block#b06698
markup.raw.block.fenced.markdown#636363
punctuation.definition.fenced.markdown#636363
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d9d9d9
variable.language.fenced.markdown#636363
meta.separator#65737Ebold
markup.table#d9d9d9
token.info-token#6a8799
token.warn-token#ebc17a
token.error-token#bc5653
token.debug-token#b267e6
meta.jsx.children.js#d9d9d9
support.class.component.js#e26d69
meta.object-literal.key.js#ecd3a8
constant.numeric.decimal.js#ecd3a8
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#ecd3a8
variable.jsdoc#cc6666