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#E3E7EC
  • activityBar.border#DDE2E8
  • activityBar.foreground#2F333A
  • activityBar.inactiveForeground#5D6670
  • dropdown.background#ECEFF1
  • dropdown.border#D1D7DD
  • dropdown.foreground#2E333B
  • editor.background#ECEFF1
  • editor.foreground#2E333B
  • editor.inactiveSelectionBackground#5F95B522
  • editor.lineHighlightBackground#DEE2E8
  • editor.lineHighlightBorder#5F95B522
  • editor.selectionBackground#5F95B544
  • editorBracketMatch.background#5F95B522
  • editorBracketMatch.border#5F95B566
  • editorCursor.foreground#3D739C
  • editorGutter.addedBackground#31795F
  • editorGutter.deletedBackground#943939
  • editorGutter.modifiedBackground#326B8A
  • editorLineNumber.activeForeground#567C9A
  • editorLineNumber.foreground#868D96
  • editorWhitespace.foreground#D1D7DD
  • focusBorder#3D739C33
  • list.activeSelectionBackground#3D739C33
  • list.activeSelectionForeground#2E333B
  • list.hoverBackground#3D739C11
  • list.hoverForeground#2E333B
  • menu.background#ECEFF1
  • menu.foreground#2E333B
  • menu.selectionBackground#3D739C33
  • menu.selectionForeground#2E333B
  • menu.separatorBackground#D1D7DD
  • statusBar.background#E3E7EC
  • statusBar.border#DDE2E8
  • statusBar.foreground#3A414D
  • tab.activeBackground#3D739C33
  • tab.activeForeground#2E333B
  • tab.hoverBackground#F0F4F8
  • tab.inactiveBackground#E3E7EC
  • tab.inactiveForeground#5C6571
  • terminal.background#ECEFF1
  • terminal.foreground#2E333B
  • terminalCursor.background#3D739C
  • titleBar.activeBackground#E3E7EC
  • titleBar.activeForeground#333943

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#727982
keyword, storage.type, storage.modifier#3D739Cbold
variable, meta.definition.variable#6E2F8D
string, constant.other.symbol#2D7A65
number, constant.numeric#3E5FA3
function, entity.name.function#35668E
entity.name.class, support.class, meta.class#664FC3bold
support.function, support.constant#317C70
constant.language, variable.language#912F1F
invalid, invalid.illegal#2E333B
markup.heading, entity.name.section#567C9Abold
meta.tag, entity.name.tag#3E8BBF
entity.other.attribute-name#31795F
punctuation.definition.tag, punctuation.separator.key-value#5C6671
constant.character.escape#3E6F6F
Vespera Theme by ovcharovcoder - VS Code Theme