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#2B2649
  • activityBar.foreground#D9D6EC
  • activityBarBadge.background#C78BF7
  • activityBarBadge.foreground#24203F
  • button.background#C78BF7
  • button.foreground#24203F
  • dropdown.background#332D55
  • editor.background#24203F
  • editor.foreground#D9D6EC
  • editor.lineHighlightBackground#2A2547
  • editor.selectionBackground#3A355E
  • editorCursor.foreground#C78BF7
  • editorError.foreground#FF6B81
  • editorGroupHeader.tabsBackground#2B2649
  • editorGutter.addedBackground#6FE39B
  • editorGutter.deletedBackground#FF6B81
  • editorGutter.modifiedBackground#7FAEFF
  • editorIndentGuide.background1#3F3968
  • editorInfo.foreground#7FAEFF
  • editorLineNumber.activeForeground#B9B3D8
  • editorLineNumber.foreground#8F88BD
  • editorWarning.foreground#F2C97B
  • editorWhitespace.foreground#3F3968
  • focusBorder#C78BF7
  • input.background#332D55
  • input.border#3F3968
  • list.activeSelectionBackground#332D55
  • list.activeSelectionForeground#D9D6EC
  • list.hoverBackground#2B2649
  • panel.background#2B2649
  • panel.border#3F3968
  • scrollbarSlider.background#3F3968
  • sideBar.background#2B2649
  • sideBar.border#3F3968
  • sideBar.foreground#D9D6EC
  • sideBarSectionHeader.background#2B2649
  • statusBar.background#2B2649
  • statusBar.border#3F3968
  • statusBar.foreground#D9D6EC
  • tab.activeBackground#24203F
  • tab.activeBorderTop#C78BF7
  • tab.activeForeground#D9D6EC
  • tab.border#3F3968
  • tab.inactiveBackground#2B2649
  • terminal.ansiBlack#3A355E
  • terminal.ansiBlue#7FAEFF
  • terminal.ansiBrightBlack#8B84BC
  • terminal.ansiBrightBlue#A6C7FF
  • terminal.ansiBrightCyan#96EFEF
  • terminal.ansiBrightGreen#96F0B8
  • terminal.ansiBrightMagenta#DCA9FF
  • terminal.ansiBrightRed#FF93A4
  • terminal.ansiBrightWhite#F3F1FF
  • terminal.ansiBrightYellow#F7DA9E
  • terminal.ansiCyan#6FE0E0
  • terminal.ansiGreen#6FE39B
  • terminal.ansiMagenta#C78BF7
  • terminal.ansiRed#FF6B81
  • terminal.ansiWhite#D9D6EC
  • terminal.ansiYellow#F2C97B
  • terminal.background#24203F
  • terminal.foreground#D9D6EC
  • terminalCursor.foreground#C78BF7
  • titleBar.activeBackground#2B2649
  • titleBar.activeForeground#D9D6EC
  • widget.border#3F3968

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8B84BCitalic
string, string.quoted, punctuation.definition.string#6FE39B
constant.character.escape#96F0B8
constant.numeric#F2C97B
constant.language, constant.other#DCA9FF
keyword, storage.type, storage.modifier#C78BF7
keyword.control#C78BF7
keyword.operator#96EFEF
punctuation, meta.brace#8B84BC
entity.name.function, support.function#7FAEFF
meta.function-call, variable.function#7FAEFF
entity.name.type, support.type, storage.type.primitive#6FE0E0
entity.name.class, support.class#6FE0E0
entity.name.namespace, entity.name.module#96EFEF
variable, variable.other#D9D6EC
variable.parameter#A6C7FF
variable.other.property, support.variable.property, meta.object-literal.key#96EFEF
entity.name.tag#C78BF7
entity.other.attribute-name#F2C97B
string.regexp#96F0B8
invalid#FF6B81
markup.inserted#6FE39B
markup.deleted#FF6B81
markup.changed#7FAEFF
markup.heading#7FAEFFbold
markup.underline.link#6FE0E0underline
markup.italicitalic
markup.boldbold