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#44475a
  • button.background#849
  • debugToolBar.background#333649
  • dropdown.background#44475a
  • editor.background#282a36
  • editor.foreground#f8f8f2
  • editor.lineHighlightBackground#ffffff0D
  • editor.selectionBackground#ffffff1a
  • editor.selectionHighlightBackground#ffffff1a
  • editorGroupHeader.tabsBackground#111427
  • editorLineNumber.foreground#6d8a88
  • input.background#44475a
  • input.foreground#f8f8f2
  • input.placeholderForeground#f8f8f299
  • list.activeSelectionBackground#222538
  • list.focusBackground#222538
  • list.hoverBackground#222538
  • list.inactiveFocusBackground#222538
  • list.inactiveSelectionBackground#222538
  • menu.background#333649
  • menu.foreground#f8f8f2
  • notifications.background#333649
  • sideBar.background#333649
  • statusBar.background#849
  • tab.inactiveBackground#333649
  • titleBar.activeBackground#44475a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6272a4
variable, string constant.other.placeholder, support.variable#50fa7b
meta.object-literal.key, meta.object-literal.key punctuation.definition.string, meta.object-literal.key string.quoted, variable.other.object.property, variable.other.property, support.variable.property#66d9ef
constant.other.color#fff
invalid, invalid.illegal#FF5F7C
keyword, storage.type, storage.type punctuation.definition.block, storage.modifier, meta.class meta.method.declaration meta.block storage.type#ff79c6
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#ff79c6
punctuation.definition.block, punctuation.definition.parameters#fff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff79c6
meta.definition.function entity.name.function, meta.function.expression variable.parameter#ffb86c
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#66d9ef
meta.block variable.other, meta.block support.variable#50fa7b
meta.definition.variable entity.name.function#50fa7b
support.other.variable, string.other.link#f07178
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#bd93f9
string, 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#f1fa8c
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#50fa7b
entity.name.type.class#ffb86c
meta.class meta.method.declaration storage.type#66d9ef
support.type#ffb86c
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#66d9ef
source.css support.function#ff79c6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#ff79c6italic
variable.language.this.js, variable.language.this.ts#ff79c6
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#ffb86c
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#50fa7bitalic
source.vue meta.directive meta.block string.quoted, source.vue meta.directive meta.block string.quoted punctuation.definition.string#66d9ef
source.vue meta.directive entity.other.attribute-name#bd93f9
entity.other.attribute-name.class#50fa7b
source.sass keyword.control#50fa7b
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#f1fa8c
constant.character.escape#66d9ef
*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#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#50fa7b
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.list meta.paragraph#66d9ef
text.html.markdown markup.inline.raw.markdown#bd93f9
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#bd93f9
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#50fa7b
markup.italic#ffb86citalic
markup.bold, markup.bold string#ffb86cbold
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#ffb86citalic bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quote beginning.punctuation.definition.quote, markup.quote meta.paragraph#66d9ef
meta.link markup.underline.link, meta.image markup.underline.link.image#bd93f9
string.other.link.description.title.markdown, string.other.link.title.markdown, meta.image string.other.link.description#f1fa8c
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
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6