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.

  • activityBar.activeBorder#48b9c7
  • activityBar.background#F6F6F6
  • activityBar.foreground#000
  • activityBarBadge.background#FFAD00
  • badge.background#FFAD00
  • button.background#82BF8C
  • checkbox.border#FFAD00
  • editor.background#FFFFFF
  • editor.foreground#706d6d
  • editor.lineHighlightBackground#48b8c70a
  • editor.selectionBackground#ffae0049
  • editor.wordHighlightBackground#cccccc
  • errorForeground#E56A54
  • focusBorder#FFAD00
  • gitDecoration.addedResourceForeground#82BF8C
  • gitDecoration.modifiedResourceForeground#48b8c7
  • gitlens.decorations.modifiedForegroundColor#48b8c7
  • list.activeSelectionBackground#40a7b4
  • list.filterMatchBorder#48b9c7
  • list.focusOutline#48b9c7
  • list.hoverBackground#E1E1E1
  • list.inactiveSelectionBackground#94EBEB41
  • minimap.background#F6F6F6
  • minimap.errorHighlight#E56A54
  • minimap.findMatchHighlight#FFAD00
  • minimap.selectionHighlight#cccccc
  • minimap.warningHighlight#F2DB01
  • minimapGutter.modifiedBackground#48b8c7
  • peekView.border#48b8c7
  • peekViewEditor.background#48b8c721
  • peekViewEditor.matchHighlightBackground#48c7a12d
  • peekViewResult.matchHighlightBackground#48c7a12d
  • peekViewTitle.background#F3F3F3
  • sash.hoverBorder#FFAD00
  • selection.background#48b8c7
  • settings.checkboxBackground#FFF
  • settings.checkboxBorder#FFAD00
  • settings.modifiedItemIndicator#48b8c7
  • statusBar.background#574F4A
  • statusBar.debuggingBackground#FEDB40
  • statusBar.debuggingForeground#000
  • textBlockQuote.background#F6F6F6
  • textBlockQuote.border#82BF8C
  • textLink.foreground#63B1BC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B1B1B1italic
comment.block.preprocessor#B1B1B1
comment.documentation, comment.block.documentation#448C27
invalid.illegal#d23737
keyword.operator#df8600
keyword, storage#df8600
storage.type, support.type#3d9aa7
constant.language#c170d1
variable, support.variable#435dc4
entity.name.function, support.function#61aa6dbold
entity.name.type, entity.other.inherited-class, support.class#e05c4b
entity.name.exception#d23737
entity.name.sectionbold
constant.numeric, constant.character, constant#EA9090
string#9cad4c
constant.character.escape#79b6be
string.regexp#4B83CD
constant.other.symbol#d09058
punctuation#777777
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#91B3E0
entity.name.tag#435dc4
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#EA9090italic
constant.character.entity, punctuation.definition.entity#d09058
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#e05c4b
meta.property-name, support.type.property-name#48b9c7
meta.property-value, meta.property-value constant.other, support.constant.property-value#82BF8Cbold
keyword.other.importantbold
markup.changed#82BF8C
markup.deleted#EA9090
markup.italicitalic
markup.error#66#82BF8C0000
markup.inserted#777777
meta.link#63B1BC
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#e05c4b
markup.boldbold
markup.traceback#d23737
markup.underlineunderline
markup.quote#EA9090
markup.list#444
markup.bold, markup.italic#1494a5
markup.inline.raw#d09058
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343

Shiki preview

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

Loading...

Populus Theme by Alexander Temper - VS Code Theme