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#F0F3F9
  • activityBar.foreground#1A202C
  • activityBarBadge.background#4C6998
  • editor.background#FFFFFF
  • editor.foreground#1A202C
  • editor.lineHighlightBackground#EDF2F7
  • editor.selectionBackground#E2E8F0
  • editorCursor.foreground#1A202C
  • editorGroupHeader.tabsBackground#F0F3F9
  • editorLineNumber.foreground#3D4852
  • list.inactiveSelectionBackground#EDF2F7
  • sideBar.background#F0F3F9
  • sideBarTitle.foreground#1A202C
  • statusBar.background#E2E8F0
  • statusBar.foreground#1A202C
  • tab.activeBackground#E2E8F0
  • tab.activeForeground#1A202C
  • tab.inactiveBackground#F0F3F9
  • tab.inactiveForeground#3D4852
  • titleBar.activeBackground#F0F3F9
  • titleBar.activeForeground#1A202C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#64748B
variable, string constant.other.placeholder#1E293B
constant.other.color#2D3748
invalid, invalid.illegal#AB2F3C
keyword, storage.type, storage.modifier#7C3B7A
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#4A6997
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#AB2F3C
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#4A6997
meta.block variable.other#1E293B
support.other.variable, string.other.link#AB2F3C
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#A23D1A
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#3A6948
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, meta.import meta.block variable.other.readwrite, meta.import meta.block variable.other.readwrite.alias#A67611
support.type#2E6C6A
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#2E6C6A
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#AB2F3C
variable.language#AB2F3Citalic
entity.name.method.js#4A6997italic
meta.class-method.js entity.name.function.js, variable.function.constructor#4A6997
entity.other.attribute-name#A23D1A
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#A67611italic
markup.inserted#3A6948
markup.deleted#AB2F3C
markup.changed#7C3B7A
string.regexp#4A6997
constant.character.escape#4A6997
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#4A6997italic
source.json meta.structure.dictionary.json support.type.property-name.json#4A6997
text.html.markdown, punctuation.definition.list_item.markdown#1A202C
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#A67611
markup.italic, markup.italic string#1A202Citalic
markup., markup. string#1A202C
string.other.link.title.markdown#4A6997
murora by Muhammad Mwinchande - VS Code Theme