Skip to main content
CodingTheme

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.

  • activityBarBackground#282a36
  • editor.background#282a36
  • editor.foreground#f8f8f2
  • editor.lineHighlightBackground#44475a
  • editor.selection#44475a
  • editor.selectionBackground#191A21
  • editor.whitespaces#696b7a
  • editorCursor#f8f8f2
  • sideBarBackground#191A21

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f8f8f2
variable.parameter.function,punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js#ff79c6
comment, punctuation.definition.comment#6272a4
punctuation.definition.parameters, punctuation.definition.array,punctuation.separator.key-value#f8f8f2
keyword.operator, constant.character.escape, constant.character.escape.json,entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#f1fa8c
punctuation.definition.variable#ff79c6
variable.other.property.php, variable.other.member.php, entity.name.function.php#ffffff
none#d3d0c8
punctuation.definition.block,meta.brace.square,meta.parameters,punctuation.definition.parameters,meta.brace.round,punctuation.definition.dictionary,punctuation.definition.array,punctuation.separator,constant.character.escape.backslash.regexp,punctuation.section,punctuation.terminator.statement,variable.other.property.js,support.variable.property.dom.js#d3d0c8
keyword.operator,punctuation.accessor.js#f1fa8c
support.constant.property-value#99bdd5
keyword,keyword.operator.expression.typeof,variable.language.this#f1fa8c
variable#ff79c6
meta.function-call#ffffff
entity.name.function, meta.require, support.function.any-method,meta.tag.sgml.html#ffffff
support.class, entity.name.type.class#8be9fd
meta.entity.new.name.expr,entity.name.tag.structure.any.html,meta.tag.structure.any.html,meta.tag.sgml.doctype.html#8bb0fd
meta.property-value#ffffff
keyword.other.special-method,entity.name.type#8be9fd
storage,support.function.construct.output.php,keyword.operator.new#f1fa8c
support.function#bd93f9
string, constant.other.symbol, entity.other.inherited-class,punctuation.definition.string#50fa7b
constant.numeric#ffb86c
none#ffb86c
string.regexp,string.regexp.js#ffb86c
constant#bd93f9
entity.name.tag,support.variable.dom.js,meta.tag.structure.any.html#8bb0fd
entity.other.attribute-name,entity.other.attribute-name.class.css,#ffb86c
entity.other.attribute-name.id#bd93f9
meta.selector#ffffff
entity.name.tag.reference,meta.embedded.block.php,meta.embedded.line.php, punctuation.definition.tag.begin.html,punctuation.definition.tag.end.html, punctuation.definition.tag.html#f8f8f2
markup.heading punctuation.definition.heading, entity.name.section#8be9fd
keyword.other.unit#ffb86c
keyword.other.phpdoc.php#bbbbbb
markup.bold, punctuation.definition.bold#ffb86cbold
markup.italic, punctuation.definition.italic#bd93f9italic
markup.raw.inline#50fa7b
string.other.link#50fa7b
meta.link#ffffff
markup.list#ff79c6
markup.quote#ffb86c
meta.separator#d3d0c8
markup.inserted, markup.inserted.git_gutter#50fa7b
markup.deleted, markup.deleted.git_gutter#ff79c6
markup.changed, markup.changed.git_gutter#bd93f9
markup.ignored, markup.ignored.git_gutter#515151
markup.untracked, markup.untracked.git_gutter#515151
constant.other.color,entity.other.attribute-name.pseudo-class.css, constant.other.php#76D4D6
string.regexp#76D4D6
entity.other.attribute-name.pseudo-element.css,meta.definition.variable.js,meta.var-single-variable.expr.js,variable.other.readwrite.js#76D4D6
punctuation.section.embedded, variable.interpolation#f8f8f2
invalid.illegal#ff79c6
markup.deleted.git_gutter#ff79c6
markup.inserted.git_gutter#50fa7b
markup.changed.git_gutter#bd93f9
markup.ignored.git_gutter#696b7a
markup.untracked.git_gutter#696b7a

Shiki preview

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

Loading...

New Moon Dracula VSCode by Tania Rascia - VS Code Theme