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.

  • editor.background#F1F2F4
  • editor.foreground#2d3748
  • editor.selectionBackground#D1D5DB
  • editorCursor.foreground#2d3748
  • editorIndentGuide.background#E5E7EB
  • editorLineNumber.foreground#6B7280

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.line.double-slash, comment.block.documentation#a0aec0italic
keyword, keyword.control, keyword.other#3182CE
entity.other.attribute-name, meta.annotation#6B46C1
string#B7791F
constant.numeric, constant.language.numeric#DD6B20
entity.name.class, support.class, support.type#805AD5
variable, variable.other, variable.other.object, variable.other.property, variable.parameter, meta.method-call, meta.property-access, entity.name.function, support.function, support.variable, punctuation.accessor#2d3748
markup.heading, markup.heading.markdown, entity.name.section.markdown#805AD5bold
punctuation.definition.heading.markdown, punctuation.definition.list.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.blockquote.markdown, meta.separator.markdown#a0aec0
markup.bold, markup.bold.markdownbold
markup.italic, markup.italic.markdownitalic
markup.bold.markdown markup.italic.markdownbold italic
markup.list, markup.list.unnumbered, markup.list.numbered, beginning.punctuation.definition.list.markdown#3182CE
markup.quote, markup.quote.markdown#a0aec0italic
markup.inline.raw, markup.raw.inline, markup.fenced_code.block, markup.raw.block, fenced_code.block.language#B7791F
markup.underline.link, markup.underline.link.markdown, string.other.link.description.title, constant.other.reference.link#6B46C1underline
string.other.link.title.markdown#DD6B20
storage.type, storage.modifier#3182CE
entity.name.tag, entity.name.tag.html, support.class.component#805AD5
punctuation.definition.tag, punctuation.separator.key-value, meta.tag.html#a0aec0
support.type.property-name.css, support.type.property-name, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6B46C1
support.constant.property-value.css, support.constant.font-name, constant.other.color.rgb-value.css, constant.other.color#DD6B20