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#f1ece4
  • activityBar.foreground#463c33
  • button.background#e98da9
  • button.foreground#2c1f1f
  • editor.background#fbf6ef
  • editor.foreground#2b2321
  • editor.lineHighlightBackground#f8f3eb
  • editor.selectionBackground#e2d9cd
  • editor.selectionHighlightBackground#f7eedfdd
  • editorCursor.foreground#e98da9
  • editorGroup.border#b5a89b
  • editorIndentGuide.activeBackground1#e98da9
  • editorIndentGuide.background1#f8f3eb
  • editorLineNumber.foreground#b5a89b
  • list.activeSelectionBackground#e2d9cd
  • list.activeSelectionForeground#2b2321
  • panel.border#b5a89b
  • scrollbarSlider.background#b5a89b
  • sideBar.background#f1ece4
  • sideBar.border#b5a89b
  • sideBar.foreground#3a302d
  • sideBarTitle.foreground#2c1f1f
  • statusBar.background#f1ece4
  • statusBar.foreground#2b2321
  • tab.activeBackground#fbf6ef
  • tab.activeForeground#2b2321
  • tab.inactiveBackground#f8f3eb
  • tab.inactiveForeground#4a403c
  • titleBar.activeBackground#f7eedf
  • titleBar.activeForeground#2b2321
  • titleBar.inactiveBackground#f8f3eb
  • titleBar.inactiveForeground#4a403c83

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a403citalic
string#b88e73
keyword, storage#e98da9
entity.name.function, support.function#e98da9bold
variable, support.variable#3a302d
storage.type, support.type, entity.name.type, support.class#3a302dbold
constant.numeric, constant.character, constant#84b49d
invalid, markup.error, entity.name.exception#dc6257
markup.warning#d08e42
constant.language, support.constant, variable.language#84b49d
meta.tag, entity.name.tag#e98da9
entity.other.attribute-name#b88e73
punctuation#4a403c
Latte With Crema by Seren McIntyre - VS Code Theme