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.

  • activityBar.background#ffffff
  • activityBar.foreground#000000
  • activityBarBadge.background#F5E5ED
  • activityBarBadge.foreground#000
  • editor.background#ffffff
  • editor.foreground#000000
  • editor.selectionBackground#F8EEC7
  • editorIndentGuide.background#e6e6e6
  • editorLineNumber.activeForeground#808080
  • editorLineNumber.foreground#ccc
  • list.activeSelectionBackground#A71D5D
  • list.focusOutline#A71D5D
  • sideBar.background#ffffff
  • sideBar.border#e6e6e6
  • sideBarSectionHeader.background#F5E5ED
  • statusBar.background#ffffff
  • statusBar.debuggingBackground#A71D5D
  • statusBar.foreground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#000
comment, punctuation.definition.comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python, comment.block.preprocessor, comment.documentation, comment.block.documentation, comment.block.documentation support.class#969896italic
invalid.illegal#660000
source, constant#000
keyword.operator#000
keyword.other, keyword.control, storage, keyword.operator.logical, storage.type, keyword.operator.key, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.new#A71D5Dbold
support.type, entity.name.exception#0086B3
string#183691
support.constant, variable.language, constant.numeric, constant.language#0086B3
variable, support.variable, entity.other.inherited-class#000
entity.name.type, support.class#0086B3
meta.function entity.name.function, meta.definition.method entity.name.function#795DA3bold
support.function#62A35C
string.regexp, constant.character.set.regexp, keyword.operator.quantifier.regexp#62A35C
variable.language.this#62A35C
variable.parameter.function.language.special.self.python, variable.language.special.self.python#62A35C
meta.function.decorator support.type, entity.name.function.decorator#62A35C
keyword.operator.expression.in.js, keyword.operator.expression.typeof.js#A71D5D
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#999
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, constant.character.entity, punctuation.definition.entity#333
entity.name.tag#62A35C
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#795DA3
string.quoted.double.html#183691
text.html#000
meta.selector.css, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, punctuation.definition.entity.css#62A35C
meta.property-name, support.type.property-name#0086B3
meta.property-value, meta.property-value constant.other, support.constant.property-value, source.css constant.numeric, source.css constant.language, source.css keyword.other.unit#000
source.css keyword.control, source.css punctuation.definition.keyword#A71D5Dbold
punctuation.section.tag.twig#0086B3
keyword.control.twig#A71D5Dbold
variable.other.django.block, variable.other.django#000
support.constant.laravel-blade#0086B3
entity.name.function.laravel-blade#A71D5Dbold
source.php.embedded.line.html variable.other.php, source.php.embedded.line.html punctuation.definition.variable.php#000
support.type.property-name.json#0086B3
string.quoted.double.json#183691
keyword.other.class.php#000
keyword.blade, support.function.construct.begin.blade, support.function.construct.end.blade#A71D5D
support.function.construct.begin.blade, support.function.construct.end.blade#090910

Shiki preview

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

Loading...

Laravel Theme - Coding Theme