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#201a2c
  • activityBar.foreground#e9e4f5
  • activityBarBadge.background#b9a6e6
  • activityBarBadge.foreground#201a2c
  • dropdown.background#201a2c
  • dropdown.border#3f3454
  • dropdown.foreground#f3f1f8
  • editor.background#1a1624
  • editor.findMatchBackground#f0b27a
  • editor.findMatchHighlightBackground#5a3e2c
  • editor.foreground#f3f1f8
  • editor.inactiveSelectionBackground#352e47
  • editor.lineHighlightBackground#272037
  • editor.selectionBackground#3f3454
  • editor.selectionHighlightBackground#3f3454
  • editorCursor.foreground#f3f1f8
  • editorError.foreground#e0728b
  • editorGroupHeader.tabsBackground#201a2c
  • editorHint.foreground#c7b4f1
  • editorHoverWidget.background#201a2c
  • editorIndentGuide.activeBackground#4a3d64
  • editorIndentGuide.background#2a2239
  • editorInfo.foreground#a8b7e8
  • editorLineNumber.activeForeground#d9d1ee
  • editorLineNumber.foreground#7c6f9e
  • editorWarning.foreground#f0b27a
  • editorWidget.background#201a2c
  • editorWidget.border#3f3454
  • gitDecoration.addedResourceForeground#c7b4f1
  • gitDecoration.deletedResourceForeground#e0728b
  • gitDecoration.modifiedResourceForeground#f0b27a
  • gitDecoration.untrackedResourceForeground#b9a6e6
  • input.background#201a2c
  • input.border#3f3454
  • input.foreground#f3f1f8
  • list.activeSelectionBackground#3f3454
  • list.activeSelectionForeground#f3f1f8
  • list.hoverBackground#2a2239
  • list.hoverForeground#f3f1f8
  • list.inactiveSelectionBackground#342d46
  • list.inactiveSelectionForeground#e9e4f5
  • notification.background#201a2c
  • notification.foreground#f3f1f8
  • panel.background#201a2c
  • panel.border#171422
  • peekViewEditor.background#2b243a
  • peekViewEditor.matchHighlightBackground#5a3e2c
  • peekViewResult.background#201a2c
  • peekViewResult.matchHighlightBackground#5a3e2c
  • sideBar.background#15121f
  • sideBar.foreground#e9e4f5
  • sideBarSectionHeader.background#262033
  • sideBarSectionHeader.foreground#e9e4f5
  • sideBarTitle.foreground#e9e4f5
  • statusBar.background#171422
  • statusBar.foreground#e9e4f5
  • tab.activeBackground#2b243a
  • tab.activeForeground#f3f1f8
  • tab.inactiveBackground#201a2c
  • tab.inactiveForeground#7c6f9e
  • terminal.background#2b243a
  • terminal.foreground#f3f1f8
  • terminalCursor.foreground#f3f1f8
  • titleBar.activeBackground#171422
  • titleBar.activeForeground#e9e4f5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b3947aitalic
string, constant.other.symbol, constant.other.key#f1b07a
keyword, storage.type, storage.modifier#b9a6e6
keyword.operator, punctuation#b9a6e6
entity.name.function, support.function, meta.function-call, variable.function#f2b47f
variable, string constant.other.placeholder#f3f1f8
entity.name.type, entity.name.class, support.type, support.class#cbb7f3
constant.numeric, constant.language, constant.character, constant.escape, constant.other#f4c493
entity.name.tag, meta.tag#b9a6e6
entity.other.attribute-name#f2b47f
support.other.variable, support.other.namespace, support.other.module#f3f1f8
invalid, invalid.illegal#f08aa0
markup.inserted#cbb7f3
markup.deleted#f08aa0
markup.changed#a8b7e8
markup.bold#a8b7e8bold
markup.italic#a8b7e8italic
string.other.link, markup.underline.link#f1b07aunderline
Min Rosé by Erico Cordeiro Neto - VS Code Theme