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#F2EEFB
  • activityBar.foreground#2A2440
  • activityBarBadge.background#7C3AED
  • activityBarBadge.foreground#FFFFFF
  • button.background#7C3AED
  • button.foreground#FFFFFF
  • dropdown.background#FFFFFF
  • editor.background#FAF8FE
  • editor.foreground#2A2440
  • editor.lineHighlightBackground#F1ECFA
  • editor.selectionBackground#DED6F5
  • editorCursor.foreground#7C3AED
  • editorError.foreground#C02A47
  • editorGroupHeader.tabsBackground#F2EEFB
  • editorGutter.addedBackground#147A52
  • editorGutter.deletedBackground#C02A47
  • editorGutter.modifiedBackground#2B4ACB
  • editorIndentGuide.background1#DCD5EE
  • editorInfo.foreground#2B4ACB
  • editorLineNumber.activeForeground#3B3557
  • editorLineNumber.foreground#71698F
  • editorWarning.foreground#8A5A0B
  • editorWhitespace.foreground#DCD5EE
  • focusBorder#7C3AED
  • input.background#FFFFFF
  • input.border#DCD5EE
  • list.activeSelectionBackground#FFFFFF
  • list.activeSelectionForeground#2A2440
  • list.hoverBackground#F2EEFB
  • panel.background#F2EEFB
  • panel.border#DCD5EE
  • scrollbarSlider.background#DCD5EE
  • sideBar.background#F2EEFB
  • sideBar.border#DCD5EE
  • sideBar.foreground#2A2440
  • sideBarSectionHeader.background#F2EEFB
  • statusBar.background#F2EEFB
  • statusBar.border#DCD5EE
  • statusBar.foreground#2A2440
  • tab.activeBackground#FAF8FE
  • tab.activeBorderTop#7C3AED
  • tab.activeForeground#2A2440
  • tab.border#DCD5EE
  • tab.inactiveBackground#F2EEFB
  • terminal.ansiBlack#2A2440
  • terminal.ansiBlue#2B4ACB
  • terminal.ansiBrightBlack#6B6685
  • terminal.ansiBrightBlue#2039A8
  • terminal.ansiBrightCyan#0B5A69
  • terminal.ansiBrightGreen#0F6444
  • terminal.ansiBrightMagenta#6425C9
  • terminal.ansiBrightRed#A81E39
  • terminal.ansiBrightWhite#2A2440
  • terminal.ansiBrightYellow#74490A
  • terminal.ansiCyan#0F6E80
  • terminal.ansiGreen#147A52
  • terminal.ansiMagenta#7C3AED
  • terminal.ansiRed#C02A47
  • terminal.ansiWhite#55506E
  • terminal.ansiYellow#8A5A0B
  • terminal.background#FAF8FE
  • terminal.foreground#2A2440
  • terminalCursor.foreground#7C3AED
  • titleBar.activeBackground#F2EEFB
  • titleBar.activeForeground#2A2440
  • widget.border#DCD5EE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B6685italic
string, string.quoted, punctuation.definition.string#147A52
constant.character.escape#0F6444
constant.numeric#8A5A0B
constant.language, constant.other#6425C9
keyword, storage.type, storage.modifier#7C3AED
keyword.control#7C3AED
keyword.operator#0B5A69
punctuation, meta.brace#6B6685
entity.name.function, support.function#2B4ACB
meta.function-call, variable.function#2B4ACB
entity.name.type, support.type, storage.type.primitive#0F6E80
entity.name.class, support.class#0F6E80
entity.name.namespace, entity.name.module#0B5A69
variable, variable.other#2A2440
variable.parameter#2039A8
variable.other.property, support.variable.property, meta.object-literal.key#0B5A69
entity.name.tag#7C3AED
entity.other.attribute-name#8A5A0B
string.regexp#0F6444
invalid#C02A47
markup.inserted#147A52
markup.deleted#C02A47
markup.changed#2B4ACB
markup.heading#2B4ACBbold
markup.underline.link#0F6E80underline
markup.italicitalic
markup.boldbold
Violeeter by Gabriel Gripp - VS Code Theme