Skip to main content
Coding Theme

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#141820
  • activityBarBadge.background#262A3B
  • badge.background#242B38
  • badge.foreground#B8BAC4
  • button.background#242B38
  • button.hoverBackground#2C3342
  • editor.background#151A22
  • editor.foreground#C8C9D3
  • editor.inactiveSelectionBackground#242B3866
  • editor.lineHighlightBackground#1C212A
  • editor.selectionBackground#242B38
  • editorCursor.foreground#9B98BE
  • editorGroup.border#1C212A
  • editorLineNumber.activeForeground#7E8493
  • editorLineNumber.foreground#353B46
  • focusBorder#242B38
  • input.background#1C212A
  • input.foreground#C8C9D3
  • panel.background#181C25
  • scrollbarSlider.background#242B3899
  • scrollbarSlider.hoverBackground#2C334280
  • sideBar.background#141820
  • sideBarTitle.foreground#9AA0B2
  • statusBar.background#141820
  • terminal.ansiBlack#1A1F27
  • terminal.ansiBlue#8C99D6
  • terminal.ansiCyan#7AAEB2
  • terminal.ansiGreen#8DB690
  • terminal.ansiMagenta#9B98BE
  • terminal.ansiRed#A86B74
  • terminal.ansiWhite#C8C9D3
  • terminal.ansiYellow#C4B481
  • terminal.background#151A22
  • terminal.foreground#C8C9D3
  • titleBar.activeBackground#161A23

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#515765italic
keyword, storage.type, storage.modifier, keyword.control, keyword.control.import, keyword.control.from#9B98BE
variable, string constant.other.placeholder#C8C9D3
entity.name.function, meta.function-call#939FD1
string, constant.character.escape#98BE9B
constant.numeric, constant.language#BCAE89
entity.name.type, support.class#A9A7C9
entity.name.tag, meta.tag#9B98BE
entity.other.attribute-name#A9A7C9
keyword.operator, punctuation#868C9C
invalid, invalid.illegal#A86B74underline
tag.decorator.js entity.name.tag.js#9B98BEitalic
source.json meta.structure.dictionary.json support.type.property-name.json#9B98BE
markup.heading#A9A7C9bold
string.other.link.title.markdown#939FD1underline
PenPen Deep Focus by yanpenalva - VS Code Theme