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#94EBEB
  • activityBar.background#303030
  • activityBar.foreground#cccccc
  • activityBarBadge.background#FBB86C
  • activityBarBadge.foreground#111
  • badge.background#FBB86C
  • button.background#90CFB0
  • button.foreground#111
  • checkbox.border#FBB86C
  • editor.background#2e2e2e
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#48b8c102
  • editor.lineHighlightBackground#48b8c70a
  • editor.selectionBackground#ffae0049
  • editor.wordHighlightBackground#feaee019
  • errorForeground#E56A54
  • focusBorder#FBB86C
  • gitDecoration.addedResourceForeground#90CFB0
  • gitlens.decorations.modifiedForegroundColor#48b8c7
  • list.activeSelectionBackground#94EBE1AA
  • list.dropBackground#94ebeb54
  • list.filterMatchBorder#94EBEB
  • list.focusBackground#303030
  • list.focusOutline#94EBE101
  • list.inactiveSelectionBackground#94EBEB41
  • menu.selectionBackground#303030
  • minimap.errorHighlight#E56A54
  • minimap.findMatchHighlight#FBB86C
  • minimap.selectionHighlight#cccccc
  • minimap.warningHighlight#F9D87A
  • minimapGutter.modifiedBackground#48b8c7
  • notebook.cellToolbarSeparator#272727
  • peekView.border#48b8c7
  • peekViewEditor.background#48b8c721
  • peekViewEditor.matchHighlightBackground#48c7a12d
  • peekViewResult.matchHighlightBackground#48c7a12d
  • sash.hoverBorder#FBB86C
  • selection.background#48b8c7
  • settings.checkboxBorder#FBB86C
  • settings.modifiedItemIndicator#48b8c7
  • settings.textInputBackground#292929
  • sideBar.background#303030
  • sideBar.border#222
  • sideBarSectionHeader.background#363636
  • statusBar.background#363636
  • statusBar.debuggingBackground#F9D87A
  • statusBar.debuggingForeground#000
  • tab.border#555
  • tab.inactiveBackground#282828
  • textBlockQuote.background#272727
  • textBlockQuote.border#90CFB0
  • textLink.foreground#63B1BC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#747474italic
comment.block.preprocessor, punctuation.definition.comment#747474
comment.documentation, comment.block.documentation#448C27
invalid.illegal#d23737
keyword.operator#FBB86C
keyword, storage#FBB86C
storage.type, support.type#8fd1d1
constant.language, support.constant, variable.language#d09058
variable, support.variable#768ac6
entity.name.function, support.function#79b497bold
entity.name.type, entity.other.inherited-class, support.class#f79588
entity.name.exception#9575CD
entity.name.sectionbold
constant.numeric, constant.character, constant#ebacac
string#abb87a
constant.character.escape#79b6be
string.regexp#4B83CD
constant.other.symbol#d09058
punctuation#c5c5c5
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#4B83CD
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#ebacacitalic
constant.character.entity, punctuation.definition.entity#d23737
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#f79588
meta.property-name, support.type.property-name#79b6be
meta.property-value, meta.property-value constant.other, support.constant.property-value#90CFB0
keyword.other.importantbold
markup.changed#82BF8C
markup.deleted#ebacac
markup.italicitalic
markup.error#d23737
markup.inserted#b1b1b1
meta.link#4B83CD
markup.output, markup.raw#b1b1b1
markup.prompt#b1b1b1
markup.heading#f79588
markup.boldbold
markup.traceback#d23737
markup.underlineunderline
markup.quote#7A3E9D
markup.list#eee
markup.bold, markup.italic#448C27
markup.inline.raw#d09058
meta.diff.range, meta.diff.index, meta.separator#b1b1b1
meta.diff.header.from-file#b1b1b1
meta.diff.header.to-file#b1b1b1

Shiki preview

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

Loading...

Populus Theme by Alexander Temper - VS Code Theme