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#2E3440
  • activityBar.foreground#D8DEE9
  • activityBarBadge.background#88C0D0
  • editor.background#2E3440
  • editor.foreground#D8DEE9
  • editor.lineHighlightBackground#3B4252
  • editor.selectionBackground#434C5E
  • editor.wordHighlightBackground#3B4252
  • editorCursor.foreground#D8DEE9
  • editorGroupHeader.tabsBackground#2E3440
  • editorLineNumber.foreground#4C566A
  • list.activeSelectionBackground#434C5E
  • list.inactiveSelectionBackground#3B4252
  • sideBar.background#2E3440
  • sideBarTitle.foreground#D8DEE9
  • statusBar.background#3B4252
  • statusBar.foreground#D8DEE9
  • tab.activeBackground#3B4252
  • tab.activeForeground#D8DEE9
  • tab.inactiveBackground#2E3440
  • tab.inactiveForeground#81A1C1
  • titleBar.activeBackground#2E3440
  • titleBar.activeForeground#D8DEE9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4C566A
variable, string constant.other.placeholder#D8DEE9
constant.other.color#ECEFF4
invalid, invalid.illegal#BF616A
keyword, storage.type, storage.modifier#B48EAD
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#81A1C1
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#BF616A
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#88C0D0
meta.block variable.other#D8DEE9
support.other.variable, string.other.link#BF616A
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#D08770
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#A3BE8C
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#EBCB8B
support.type#8FBCBB
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#8FBCBB
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#BF616A
variable.language#BF616Aitalic
entity.name.method.js#88C0D0italic
meta.class-method.js entity.name.function.js, variable.function.constructor#88C0D0
entity.other.attribute-name#D08770
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#EBCB8Bitalic
markup.inserted#A3BE8C
markup.deleted#BF616A
markup.changed#B48EAD
string.regexp#88C0D0
constant.character.escape#88C0D0
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#88C0D0italic
source.json meta.structure.dictionary.json support.type.property-name.json#88C0D0
text.html.markdown, punctuation.definition.list_item.markdown#D8DEE9
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#EBCB8B
markup.italic, markup.italic string#D8DEE9italic
markup.bold, markup.bold string#D8DEE9bold
string.other.link.title.markdown#88C0D0
murora by Muhammad Mwinchande - VS Code Theme