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#1E2846
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#505AA0
  • activityBarBadge.background#ff194f
  • badge.background#6673c0
  • dropdown.background#182138
  • dropdown.listBackground#28325A
  • editor.background#1E2846
  • editor.foreground#78C8F0
  • editor.lineHighlightBackground#28325A
  • editor.selectionBackground#545d9c
  • editor.selectionHighlightBackground#353e74
  • editor.wordHighlightBackground#353e74
  • editorBracketMatch.background#3C4682
  • editorBracketMatch.border#FFFFFF
  • editorCursor.foreground#FFFFFF
  • editorIndentGuide.activeBackground#78C8F0
  • editorIndentGuide.background#383F6E
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#505AA0
  • editorOverviewRuler.addedForeground#0000
  • editorOverviewRuler.border#0000
  • editorOverviewRuler.bracketMatchForeground#0000
  • editorOverviewRuler.commonContentForeground#FFF09B
  • editorOverviewRuler.currentContentForeground#0000
  • editorOverviewRuler.deletedForeground#0000
  • editorOverviewRuler.errorForeground#ff194f
  • editorOverviewRuler.findMatchForeground#FFF09B
  • editorOverviewRuler.incomingContentForeground#0ADCA0
  • editorOverviewRuler.infoForeground#0000
  • editorOverviewRuler.modifiedForeground#0000
  • editorOverviewRuler.rangeHighlightForeground#0000
  • editorOverviewRuler.selectionHighlightForeground#0000
  • editorOverviewRuler.warningForeground#ff194f
  • editorOverviewRuler.wordHighlightForeground#0000
  • editorOverviewRuler.wordHighlightStrongForeground#0000
  • editorWhitespace.foreground#6673c0
  • editorWidget.background#182138
  • gitDecoration.ignoredResourceForeground#505AA0
  • gitDecoration.modifiedResourceForeground#FFF09B
  • gitDecoration.untrackedResourceForeground#0ADCA0
  • input.background#28325A
  • list.activeSelectionBackground#3C4682
  • list.errorForeground#ff194f
  • list.focusBackground#28325A
  • list.hoverBackground#28325A
  • list.inactiveFocusBackground#28325A
  • list.inactiveSelectionBackground#3C4682
  • list.warningForeground#ff194f
  • scrollbarSlider.activeBackground#505AA0
  • scrollbarSlider.background#28325ABF
  • scrollbarSlider.hoverBackground#3C4682BF
  • sideBar.background#182138
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#1E2846
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#505AA0
  • statusBar.background#182138
  • statusBar.border#182138
  • titleBar.activeBackground#182138
  • titleBar.border#182138

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.accessor, punctuation.separator#1496FFbold
punctuation.terminator, punctuation.definition#1496FFbold
meta.object-literal.key, variable.other.object, punctuation.definition.tag#1496FF
keyword.operator, meta.entity.tag#1496FFbold
meta.brace.square, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section, meta.brace.round#FFDC3Cbold
comment, punctuation.definition.comment#505AA0italic
variable, string constant.other.placeholder#1496FF
constant.other.color#4dff00
invalid, invalid.illegal#ff194f
entity.name.tag.render, entity.name.tag.liquid#F050B4
keyword, storage.type, storage.modifier, punctuation.separator.key-value.html#F050B4
keyword.control, constant.other.color, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, punctuation.definition.keyword, support.type#F050B4
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#1496FF
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FFF09B
variable.other, variable.other.object.property#78C8F0
support.other.variable, string.other.link#4dff00
constant.numeric, constant.language#FF96C8
support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#1496FF
string, punctuation.definition.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#0ADCA0
entity.name, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#F050B4
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#F050B4
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#4dff00
variable.language#78C8F0
entity.name.method.js#4dff00italic
meta.class-method.js entity.name.function.js, variable.function.constructor#4dff00
entity.other.attribute-name#FFF09B
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#4dff00italic
entity.other.attribute-name.class#1496FF
source.sass keyword.control#4dff00
markup.inserted#4dff00
markup.deleted#4dff00
markup.changed#4dff00
string.regexp#1496FF
constant.character.escape#1496FF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#4dff00italic
source.js constant.other.object.key.js string.unquoted.label.js#4dff00italic
source.json meta.structure.dictionary.json support.type.property-name.json#1496FF
text.html.markdown, punctuation.definition.list_item.markdown#78C8F0
text.html.markdown markup.inline.raw.markdown#4dff00
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#4dff00
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#F050B4
markup.italicitalic
markup.bold, markup.bold stringbold
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 stringbold
markup.underlineunderline
markup.quote punctuation.definition.blockquote.markdown#505AA0
markup.quoteitalic
string.other.link.title.markdown#F050B4underline
string.other.link.description.title.markdown#505AA0
constant.other.reference.link.markdown#4dff00
markup.raw.block#4dff00
markup.raw.block.fenced.markdown#4dff00
punctuation.definition.fenced.markdown#4dff00
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#4dff00
variable.language.fenced.markdown#4dff00
meta.separator#4dff00bold
markup.table#4dff00