Skip to main content
Coding Theme

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
brogrammer-evo by guoking - VS Code Theme