Skip to main content
CodingTheme

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#1a1a1a
  • editor.foreground#ecf0f1
  • editor.inactiveSelectionBackground#e74c3c
  • editor.lineHighlightBackground#2a2a2a
  • editor.selectionBackground#2a2a2a
  • editorCursor.foreground#ecf0f1
  • editorIndentGuide.activeBackground#ffffff
  • editorIndentGuide.background#222222
  • editorWhitespace.foreground#f3ffb51a
  • statusBar.background#121212

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#606060italic
constant#6C71C4
entity#2ECC71
keyword#E74C3C bold
storage#3498DB
string#F1C40F
support#3498DB bold
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
punctuation.separator.key-value.js#6C71C4
meta.object-literal.key.js#F1C40F
entity.name.tag#E74C3C
entity.other.attribute-name#2ECC71
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#FFFFFF
meta.selector.css entity.name.tag#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#2ECC71 italic
meta.preprocessor.at-rule keyword.control.at-rule#F1C40F bold
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#FFFFFF
keyword.control.at-rule.import.css#F1C40F bold
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
variable.language, variable.parameter, variable.other.object, keyword, keyword.control, entity.name.function, storage.type, storage.type.modifier, storage.type.accessor, storage.type.built-in, entity.name.type
keyword.control, keyword, storage.type.built-inbold
comment
keyword.operator, punctuation.separator, punctuation.separator, punctuation.support.type.property-name.begin.json
variable.other.object#ECF0F1
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

The Best Themes for programmers by Estevam Souza - VS Code Theme