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#f4f4f4
  • activityBarBadge.background#3b5dc9
  • editor.background#f4f4f4
  • editor.foreground#1a1c2c
  • editor.lineHighlightBackground#e8eef2
  • editor.selectionBackground#94b0c2
  • editorBracketHighlight.foreground1#b13e53
  • editorBracketHighlight.foreground2#29366f
  • editorBracketHighlight.foreground3#257179
  • editorBracketHighlight.foreground4#5d275d
  • editorBracketHighlight.foreground5#3b5dc9
  • editorBracketHighlight.foreground6#38b764
  • editorBracketHighlight.unexpectedBracket.foreground#b13e53
  • editorBracketMatch.background#94b0c2
  • editorBracketMatch.border#3b5dc9
  • editorCursor.foreground#3b5dc9
  • editorIndentGuide.activeBackground1#566c86
  • editorIndentGuide.background1#94b0c2
  • editorLineNumber.activeForeground#566c86
  • editorLineNumber.foreground#94b0c2
  • editorRuler.foreground#94b0c2
  • sideBar.background#f4f4f4
  • sideBarTitle.foreground#566c86
  • statusBar.background#f4f4f4
  • tab.activeBackground#f4f4f4
  • tab.inactiveBackground#e8eef2
  • titleBar.activeBackground#f4f4f4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, comment.line.number-sign, comment.line.semicolon, comment.block, comment.block.documentation, punctuation.definition.comment, string.comment#566c86italic
keyword, storage.type, storage, storage.modifier#b13e53
keyword.control, keyword.control.loop, keyword.control.conditional, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.trycatch, keyword.control.exception#3b5dc9
keyword.operator, keyword.operator.arrow, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.expression, keyword.operator.new, keyword.operator.delete, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.wordlike#5d275d
string, string.quoted, string.quoted.double, string.quoted.single, string.quoted.other, string.quoted.triple, string.template, meta.embedded.assembly#257179
string.regexp, source.regexp, constant.regexp, string.regexp.character-class, string.regexp.arbitrary-repitition#257179
constant.character.escape, string.regexp constant.character.escape#388a8cbold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, punctuation.section.embedded.begin, punctuation.section.embedded.end#b13e53
constant.numeric, constant.numeric.decimal, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal, constant.numeric.dozenal, keyword.other.unit#b13e53
constant.language, variable.language#8a2858italic
constant.language.boolean#a03050italic
entity.name.type, support.type.builtin, support.type.primitive#257179
support.type, entity.name.type.class, entity.name.type.struct, entity.name.type.enum, entity.name.type.interface, entity.name.type.alias, entity.name.type.module, entity.name.namespace, entity.other.inherited-class, support.class#257179
support.type.nominal#5d275ditalic
support.type.comptime#b13e53italic
entity.name.type.parameter, support.type.parameter#257179italic
entity.name.function, support.function, entity.name.operator.custom-literal, support.constant.handlebars#38b764
variable, variable.other, meta.definition.variable.name, entity.name.variable#333c57
variable.other.constant, variable.other.enummember, entity.name.constant#29366fbold
variable.parameter, variable.parameter.function#3b5dc9italic
variable.parameter.output#b13e53italic bold
variable.other.global#5d275d
variable.other.property, variable.other.object.property, support.variable, meta.object-literal.key, meta.property-name, support.type.vendored.property-name, support.type.property-name#333c57
entity.name.tag, support.class.component#257179
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#566c86
entity.other.attribute-name, entity.name.decorator, meta.decorator, entity.name.function.decorator#ef7d57
punctuation.accessor, punctuation.accessor.property, punctuation.accessor.tuple, punctuation.separator.dot-access#566c86
punctuation.bracket, keyword.operator.bracket, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments#566c86
punctuation.accessor.pointer#257179
punctuation.accessor.typepun#b13e53
punctuation.separator, punctuation.separator.comma, punctuation.terminator, punctuation.terminator.statement#566c86
invalid, invalid.illegal#b13e53
invalid.deprecated#b13e53italic
support, support.constant, support.other#333c57
meta.embedded, source.groovy.embedded, meta.template.expression#1a1c2c
entity.name.label#1a1c2c
meta.preprocessor, entity.name.function.preprocessor, keyword.control.directive#b13e53
constant.other.reference.link, string.other.link#257179
markup.heading, heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown, entity.name.section, entity.name.section.markdown, markup.heading entity.name#3b5dc9bold
punctuation.definition.heading.markdown#29366f
markup.bold, markup.bold.markdown#b13e53bold
markup.italic, markup.italic.markdown#5d275ditalic
markup.bold markup.italic, markup.italic markup.bold#b13e53bold italic
markup.underline#257179underline
markup.strikethrough, markup.strikethrough.markdown#94b0c2strikethrough
markup.underline.link, markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.description.markdown#257179
string.other.link.title.markdown#3b5dc9
markup.inline.raw, markup.inline.raw.string.markdown, markup.raw.inline.markdown#b13e53
markup.fenced_code.block.markdown, markup.raw.block.markdown#1a1c2c
fenced_code.block.language.markdown#257179
markup.quote, markup.quote.markdown, punctuation.definition.quote.begin.markdown#566c86italic
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#5d275d
meta.separator, meta.separator.markdown#94b0c2
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#38b764
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b13e53
markup.changed, punctuation.definition.changed#ef7d57
meta.diff.range#38b764bold
meta.diff.header#3b5dc9
support.type.property-name.json, support.type.property-name.json.comments#257179
support.type.property-name.css, support.type.property-name.less, support.type.property-name.scss#333c57
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.scss, entity.name.tag.css, entity.name.tag.less#b13e53
support.constant.property-value, support.constant.color, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value#257179