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.

  • badge.background#1b80b2ff
  • editor.background#2c384b
  • editor.foreground#F8F8F8
  • editor.lineHighlightBackground#007DFF20
  • editor.selectionBackground#007DFF80
  • editorCursor.foreground#00FFFF
  • editorWhitespace.foreground#282A32

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F8F8F8
comment#AF60D0italic
constant#3BFFBC
entity#98E2FF
keyword#FF3E72
storage#99CF50
string#8FFF58
support#00FFBC
variable#689CFF
invalid.deprecated#FD5FF1underline
invalid.illegal#FD5FF1
-----------------------------------
text source, meta.embedded
entity.other.inherited-class#FF9749
string.quoted source#D972DE
string constant#D972DE
string.regexp#E9C062
string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#CF7D34
string variable#689CFF
support.function#F1D950
support.constant#FFA454
meta.preprocessor.c#8996A8
meta.preprocessor.c keyword#AFC4DB
entity.name.typeunderline
meta.cast#676767
meta.sgml.html meta.doctype, meta.sgml.html meta.doctype entity, meta.sgml.html meta.doctype string, meta.xml-processing, meta.xml-processing entity, meta.xml-processing string#494949
meta.tag, meta.tag entity#00C0FF
source entity.name.tag, source entity.other.attribute-name, meta.tag.inline, meta.tag.inline entity#00C0FF
entity.name.tag.namespace, entity.other.attribute-name.namespace#E18964
meta.selector.css entity.name.tag#8B98AB
meta.selector.css entity.other.attribute-name.tag.pseudo-class#8B98AB
meta.selector.css entity.other.attribute-name.id#8B98AB
meta.selector.css entity.other.attribute-name.class#8B98AB
support.type.property-name.css#C5AF75
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#F9EE98
meta.preprocessor.at-rule keyword.control.at-rule#8693A5
meta.property-value support.constant.named-color.css, meta.property-value constant#FF846B
meta.constructor.argument.css#8F9D6A
meta.diff, meta.diff.header#F8F8F8
markup.deleted#F8F8F8
markup.changed#F8F8F8
markup.inserted#F8F8F8
markup.italic#E9C062
markup.bold#E9C062
markup.underline#E18964underline
markup.quote#E1D4B9
markup.heading, markup.heading entity#FEDCC5
markup.list#E1D4B9
markup.raw#578BB3
markup comment#F67B37
meta.separator#60A633
meta.line.entry.logfile, meta.line.exit.logfile
meta.line.error.logfile
variable.language.this.js#3BFFBCitalic
variable.other.object.js#689CFFitalic
meta.template.expression.js variable.other.property.js, meta.template.expression.js variable.other.object.property.js#689CFF
meta.template.expression.js meta.brace.round.js, meta.template.expression.js meta.brace.curly.js, meta.template.expression.js punctuation.accessor.js#FFFFFF
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#FFFFFF
entity.name.tag.script.html, entity.name.tag.link-meta.any.html#00C0FFunderline
meta.tag.special.component.html, punctuation.separator.key-value.html#FFFFFF
punctuation.definition.string.begin, punctuation.definition.string.end#99CF50
entity.other.attribute-name.id#F9EE98
entity.other.attribute-name.as.html#F9EE98
support.function.event-handler.attribute.js.html, support.function.event-handler.binding.js.html#FF9639
entity.other.attribute-name#98E2FF
entity.name.tag.other.html#689CFF
entity.special.support.name.tag.html#00FFBC
support.function.html#F1D950
variable.other.readwrite.js.html#3BFFBCitalic
binding.curly.html, binding.square.html#FFFFFFitalic
keyword.operator.logical.not.js.html#FF3E72italic