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#e8dfe4
  • activityBar.border#c8afbe
  • activityBar.foreground#9e4fa5
  • activityBar.inactiveForeground#8b4e7c
  • activityBarBadge.background#6ae66f
  • activityBarBadge.foreground#f5f1f2
  • badge.background#9e4fa5
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#231124
  • breadcrumb.focusForeground#231124
  • breadcrumb.foreground#8b4e7c
  • button.background#9e4fa5
  • button.foreground#f5f1f2
  • button.hoverBackground#8e4795
  • button.secondaryBackground#e8dfe4
  • button.secondaryForeground#231124
  • descriptionForeground#8b4e7c
  • dropdown.background#f7f4f6
  • dropdown.border#c8afbe
  • dropdown.foreground#231124
  • editor.background#f7f4f6
  • editor.findMatchBackground#c5ac7d59
  • editor.findMatchHighlightBackground#c5ac7d26
  • editor.foreground#231124
  • editor.inactiveSelectionBackground#9e4fa51a
  • editor.lineHighlightBackground#9e4fa514
  • editor.lineHighlightBorder#9e4fa500
  • editor.selectionBackground#9e4fa533
  • editor.wordHighlightBackground#9e4fa526
  • editorBracketMatch.background#9e4fa533
  • editorBracketMatch.border#9e4fa580
  • editorCursor.foreground#9e4fa5
  • editorError.foreground#bf1932
  • editorGroup.border#c8afbe
  • editorGroupHeader.tabsBackground#f0eaed
  • editorGroupHeader.tabsBorder#c8afbe
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#2311242e
  • editorIndentGuide.background#23112414
  • editorInfo.foreground#6ae66f
  • editorLineNumber.activeForeground#231124
  • editorLineNumber.foreground#8b4e7c
  • editorRuler.foreground#23112414
  • editorSuggestWidget.selectedBackground#9e4fa526
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#2311241a
  • editorWidget.background#f7f4f6
  • editorWidget.border#c8afbe
  • focusBorder#9e4fa580
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#8b4e7c
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#8b4e7c
  • input.background#f7f4f6
  • input.border#c8afbe
  • input.foreground#231124
  • input.placeholderForeground#8b4e7c
  • inputOption.activeBorder#9e4fa5
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#6ae66f
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#9e4fa533
  • list.activeSelectionForeground#231124
  • list.focusBackground#9e4fa526
  • list.highlightForeground#9e4fa5
  • list.hoverBackground#9e4fa51a
  • list.inactiveSelectionBackground#9e4fa51a
  • minimap.background#f7f4f6
  • minimap.findMatchHighlight#c5ac7d80
  • minimap.selectionHighlight#9e4fa54d
  • notificationLink.foreground#9e4fa5
  • notifications.background#f7f4f6
  • notifications.foreground#231124
  • panel.background#f0eaed
  • panel.border#c8afbe
  • panelTitle.activeBorder#9e4fa5
  • panelTitle.activeForeground#231124
  • panelTitle.inactiveForeground#8b4e7c
  • peekView.border#9e4fa5
  • peekViewEditor.background#f0eaed
  • peekViewResult.background#e8dfe4
  • peekViewTitle.background#f0eaed
  • progressBar.background#9e4fa5
  • scrollbar.shadow#10081014
  • scrollbarSlider.activeBackground#2311244d
  • scrollbarSlider.background#2311241a
  • scrollbarSlider.hoverBackground#23112433
  • selection.background#9e4fa533
  • sideBar.background#f0eaed
  • sideBar.border#c8afbe
  • sideBar.foreground#231124
  • sideBarSectionHeader.background#9e4fa51a
  • sideBarSectionHeader.foreground#231124
  • sideBarTitle.foreground#231124
  • statusBar.background#9e4fa5
  • statusBar.border#c8afbe
  • statusBar.debuggingBackground#6ae66f
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e8dfe4
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#86438c
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f7f4f6
  • tab.activeBorder#9e4fa5
  • tab.activeBorderTop#9e4fa500
  • tab.activeForeground#231124
  • tab.border#c8afbe
  • tab.inactiveBackground#f0eaed
  • tab.inactiveForeground#8b4e7c
  • terminal.ansiBlack#231124
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#8b4e7c
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f7f4f6
  • terminal.ansiYellow#d4a017
  • terminal.background#f0eaed
  • terminal.foreground#231124
  • terminalCursor.foreground#9e4fa5
  • textLink.activeForeground#5ecc62
  • textLink.foreground#6ae66f
  • titleBar.activeBackground#f0eaed
  • titleBar.activeForeground#231124
  • titleBar.border#c8afbe
  • titleBar.inactiveBackground#f0eaed
  • titleBar.inactiveForeground#8b4e7c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#8b4e7citalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#9e4fa5bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#9e4fa5bold
storage.type, storage.modifier#9e4fa5bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#38793a
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#9e4fa5
string.regexp#38793a
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#79674c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7e4d61bold
variable.other.constant, variable.other.enummember#7e4d61bold
constant.character.escape#925998
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.type.builtin#96548aitalic
entity.name.type.parameter#96548aitalic
entity.name.function, meta.function entity.name.function#5a6f73bold
meta.function-call entity.name.function, support.function#5a6f73
meta.method-call entity.name.function, entity.name.function.member#5a6f73
variable, variable.other, variable.other.readwrite#231124
variable.parameter#231124italic
variable.language, variable.language.this, variable.language.self, variable.language.super#9e4fa5italic
variable.other.property, variable.other.object.property, meta.object-literal.key#231124
entity.name.class, entity.name.type.class, support.class#a8512cbold italic
entity.other.inherited-class#a8512citalic
entity.name.tag, punctuation.definition.tag#9e4fa5bold
entity.other.attribute-name#5a6f73italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#925998
punctuation, punctuation.separator, punctuation.terminator, meta.brace#8b4e7c
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#96548aitalic
support.type.property-name.css, support.type.vendored.property-name.css#96548a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#a8512cbold
support.constant.property-value.css, support.constant.color.css#7e4d61
keyword.other.unit.css#79674c
support.type.property-name.json#96548a
markup.heading, markup.heading entity.name, entity.name.section.markdown#9e4fa5bold
markup.bold#7e4d61bold
markup.italic#96548aitalic
markup.inline.raw, markup.raw#38793a
markup.underline.link#5a6f73
markup.quote#8b4e7citalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme