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#050504
  • editor.foreground#ecf0f1
  • editor.inactiveSelectionBackground#20919E78
  • editor.lineHighlightBackground#666565
  • editor.selectionBackground#20919E78
  • editorCursor.foreground#ecf0f1
  • editorIndentGuide.background#222222
  • editorWhitespace.foreground#F3FFB51A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#ecf0f1—
comment#FFFFFFitalic
constant#6c71c4
entity#2ecc71 bold
keyword#e74c3cbold
storage#3498db
string#f1c40f
support#3498dbbold
variable#e67e22
invalid#ffffff—
text source——
text.html.ruby source——
entity.other.inherited-class#2ecc71italic
string.quoted source#f1c40f
string constant#6c71c4—
string.regexp#3498db—
string variable#ffffff—
support.function#3498db
support.constant#2ecc71
other.preprocessor.c#3498db—
other.preprocessor.c entity#2ecc71—
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#e74c3c—
meta.selector.css entity.name.tag, entity.name.tag.css.sass.symbol#1abc9c—
meta.selector.css entity.other.attribute-name.id#2ecc71—
meta.selector.css entity.other.attribute-name.class#2ecc71—
support.type.property-name.css#3498db
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#2ecc71italic
meta.preprocessor.at-rule keyword.control.at-rule#f1c40fbold
meta.property-value support.constant.named-color.css, meta.property-value constant#e74c3c—
meta.constructor.argument.css#e74c3c—
meta.diff, meta.diff.header#F8F8F8italic
markup.deleted#F8F8F8—
markup.changed#F8F8F8—
markup.inserted#F8F8F8—
sublimelinter.outline.notes——
sublimelinter.outline.illegal——
sublimelinter.underline.illegal——
sublimelinter.outline.warning#ffffff—
sublimelinter.underline.warning——
sublimelinter.outline.violation——
sublimelinter.underline.violation——
entity.other.attribute-name.id.html#2ecc71—
entity.other.attribute-name.html#2ecc71—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#fff—
keyword.control.at-rule.import.css#f1c40fbold
variable.other.less#ffffff—
entity.other.less.mixin#9b59b6—
source.css.less keyword.unit.css#3498db—
entity.other.attribute-name.angular.html, source.angular.embedded.html#e74c3c—
constant.character.entity.html#3498db—
variable.other.readwrite.instance.coffee#e67e22—
meta.brace.round.coffee, meta.brace.square.coffee#f1c40f—
punctuation.section.embedded.coffee#5eebb8—
variable.assignment.coffee variable.assignment.coffee#FFFFFF—
meta.delimiter.method.period.coffee#3cadd7—
meta.brace.curly.coffee#1abc9c—
meta.tag.sgml.doctype.xml, declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string, doctype#3c444d—
sublimelinter.gutter-mark#FFFFFF—
sublimelinter.mark.warning#DDB700—
sublimelinter.mark.error#D02000—
markup.deleted.git_gutter#F92672—
markup.inserted.git_gutter#A6E22E—
markup.changed.git_gutter#967EFB—
markup.ignored.git_gutter#565656—
markup.untracked.git_gutter#565656—
variable.function#ffffff