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#F2ECE5
  • activityBar.foreground#3C352E
  • dropdown.background#F5F2EE
  • dropdown.border#E6DED4
  • dropdown.foreground#2E2A25
  • editor.background#F5F2EE
  • editor.foreground#2E2A25
  • editor.inactiveSelectionBackground#E9964A33
  • editor.lineHighlightBackground#F1E9E1
  • editor.lineHighlightBorder#E9964A33
  • editor.selectionBackground#E9964A44
  • editorBracketMatch.background#E9964A33
  • editorBracketMatch.border#E9964A80
  • editorCursor.foreground#8B4C1B
  • editorGutter.addedBackground#588F4A
  • editorGutter.deletedBackground#9B3F3F
  • editorGutter.modifiedBackground#A67228
  • editorLineNumber.activeForeground#7B6F5C
  • editorLineNumber.foreground#8F8673
  • editorWhitespace.foreground#D7CFC0
  • focusBorder#E9964A33
  • list.activeSelectionBackground#E9964A33
  • list.activeSelectionForeground#2E2A25
  • list.hoverBackground#E9964A22
  • list.hoverForeground#2E2A25
  • menu.background#F5F2EE
  • menu.foreground#2E2A25
  • menu.selectionBackground#E9964A33
  • menu.selectionForeground#2E2A25
  • menu.separatorBackground#E6DED4
  • sideBar.background#F4EFE8
  • sideBar.border#E6DED4
  • sideBar.foreground#4B443A
  • statusBar.background#F2ECE5
  • statusBar.border#E6DED4
  • statusBar.foreground#52483C
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#2E2A25
  • tab.hoverBackground#F9F7F2
  • tab.inactiveBackground#F2ECE5
  • tab.inactiveForeground#7A6E5F
  • terminal.background#F5F2EE
  • terminal.foreground#2E2A25
  • titleBar.activeBackground#F2ECE5
  • titleBar.activeForeground#3C352E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6F6858
keyword, storage.type, storage.modifier#793E19bold
variable, meta.definition.variable#7A2F35
string, constant.other.symbol#7B610F
number, constant.numeric#7B610F
function, entity.name.function#793E19
entity.name.class, support.class, meta.class#9B5A1Abold
support.function, support.constant#7B610F
constant.language, variable.language#7A2F35
invalid, invalid.illegal#2E2A25
markup.heading, entity.name.section#793E19bold
meta.tag, entity.name.tag#793E19
entity.other.attribute-name#49794A
punctuation.definition.tag, punctuation.separator.key-value#6F6858
constant.character.escape#7B610F
Vespera Theme by ovcharovcoder - VS Code Theme