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