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.

  • activityBar.background#3c3f41
  • activityBar.border#4b4b4b
  • activityBar.foreground#ffffff
  • activityBarBadge.background#cc7832
  • dropdown.background#3c3f41
  • dropdown.border#4b4b4b
  • dropdown.foreground#bababa
  • editor.background#1e2017
  • editor.foreground#a9b7c6
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#323232
  • editor.selectionHighlightBackground#415a41
  • editorIndentGuide.activeBackground#606060
  • editorIndentGuide.background#4b4b4b
  • editorLineNumber.activeForeground#999999
  • editorLineNumber.foreground#606366
  • input.background#3c3f41
  • input.border#4b4b4b
  • input.foreground#bababa
  • input.placeholderForeground#a6a6a6
  • list.dropBackground#373a3c
  • menu.background#3c3f41
  • menu.foreground#bababa
  • panel.background#3c3f41
  • panel.border#4b4b4b
  • panelTitle.activeBorder#bababa
  • panelTitle.activeForeground#bababa
  • panelTitle.inactiveForeground#888888
  • punctuation.definition.tag.end.html#323000
  • scrollbarSlider.activeBackground#707070
  • scrollbarSlider.background#505050
  • scrollbarSlider.hoverBackground#676767
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBar.background#3c3f41
  • sideBar.border#4b4b4b
  • sideBar.foreground#bababa
  • sideBarSectionHeader.foreground#bababa
  • sideBarTitle.foreground#bababa
  • statusBar.background#3c3f41
  • statusBar.border#4b4b4b
  • statusBar.foreground#bababa
  • tab.activeBackground#515658
  • tab.activeBorder#bababa
  • tab.activeForeground#bababa
  • tab.border#4b4b4b
  • tab.inactiveBackground#3c3e3f
  • tab.inactiveForeground#a1a1a1
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#5394ec
  • terminal.ansiBrightBlue#7eaef1
  • terminal.ansiBrightCyan#6cdada
  • terminal.ansiBrightGreen#a8c023
  • terminal.ansiBrightMagenta#ff99ff
  • terminal.ansiBrightRed#ff8785
  • terminal.ansiBrightYellow#ffff00
  • terminal.ansiCyan#299999
  • terminal.ansiGreen#a8c023
  • terminal.ansiMagenta#ae8abe
  • terminal.ansiRed#ff6b68
  • terminal.ansiWhite#1f1f1f
  • terminal.ansiYellow#d6bf55
  • terminal.background#2b2b2b
  • terminal.border#4b4b4b
  • widget.shadow#1a1a1aaa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b8b857
comment#676452
string#ead586
constant.numeric#AE81FF
constant.language#AE81FF
constant.character, constant.other#AE81FF
variable
keyword#F92672
storage#F92672
storage.type#66D9EF
entity.name.class#78c91funderline
entity.other.inherited-class#78c91f
entity.name.function#78c91f
variable.parameter#FD971F
entity.name.tag#F92672
entity.other.attribute-name#78c91f
support.function#66D9EF
support.constant#66D9EF
support.type, support.class#66D9EF
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0

Shiki preview

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

Loading...

WebStorm Monokai by ctwhome - VS Code Theme