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#eadfe4
  • activityBar.border#d1aebe
  • activityBar.foreground#ff3ca0
  • activityBar.inactiveForeground#b2467a
  • activityBarBadge.background#009f3a
  • activityBarBadge.foreground#f5f1f2
  • badge.background#ff3ca0
  • badge.foreground#260918
  • breadcrumb.activeSelectionForeground#260918
  • breadcrumb.focusForeground#260918
  • breadcrumb.foreground#b2467a
  • button.background#ff3ca0
  • button.foreground#260918
  • button.hoverBackground#e63690
  • button.secondaryBackground#eadfe4
  • button.secondaryForeground#260918
  • descriptionForeground#b2467a
  • dropdown.background#f8f4f6
  • dropdown.border#d1aebe
  • dropdown.foreground#260918
  • editor.background#f8f4f6
  • editor.findMatchBackground#6667ab59
  • editor.findMatchHighlightBackground#6667ab26
  • editor.foreground#260918
  • editor.inactiveSelectionBackground#ff3ca01a
  • editor.lineHighlightBackground#ff3ca014
  • editor.lineHighlightBorder#ff3ca000
  • editor.selectionBackground#ff3ca033
  • editor.wordHighlightBackground#ff3ca026
  • editorBracketMatch.background#ff3ca033
  • editorBracketMatch.border#ff3ca080
  • editorCursor.foreground#ff3ca0
  • editorError.foreground#bf1932
  • editorGroup.border#d1aebe
  • editorGroupHeader.tabsBackground#f1e9ed
  • editorGroupHeader.tabsBorder#d1aebe
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#2609182e
  • editorIndentGuide.background#26091814
  • editorInfo.foreground#009f3a
  • editorLineNumber.activeForeground#260918
  • editorLineNumber.foreground#b2467a
  • editorRuler.foreground#26091814
  • editorSuggestWidget.selectedBackground#ff3ca026
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#2609181a
  • editorWidget.background#f8f4f6
  • editorWidget.border#d1aebe
  • focusBorder#ff3ca080
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#b2467a
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#b2467a
  • input.background#f8f4f6
  • input.border#d1aebe
  • input.foreground#260918
  • input.placeholderForeground#b2467a
  • inputOption.activeBorder#ff3ca0
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#009f3a
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#ff3ca033
  • list.activeSelectionForeground#260918
  • list.focusBackground#ff3ca026
  • list.highlightForeground#ff3ca0
  • list.hoverBackground#ff3ca01a
  • list.inactiveSelectionBackground#ff3ca01a
  • minimap.background#f8f4f6
  • minimap.findMatchHighlight#6667ab80
  • minimap.selectionHighlight#ff3ca04d
  • notificationLink.foreground#ff3ca0
  • notifications.background#f8f4f6
  • notifications.foreground#260918
  • panel.background#f1e9ed
  • panel.border#d1aebe
  • panelTitle.activeBorder#ff3ca0
  • panelTitle.activeForeground#260918
  • panelTitle.inactiveForeground#b2467a
  • peekView.border#ff3ca0
  • peekViewEditor.background#f1e9ed
  • peekViewResult.background#eadfe4
  • peekViewTitle.background#f1e9ed
  • progressBar.background#ff3ca0
  • scrollbar.shadow#19061014
  • scrollbarSlider.activeBackground#2609184d
  • scrollbarSlider.background#2609181a
  • scrollbarSlider.hoverBackground#26091833
  • selection.background#ff3ca033
  • sideBar.background#f1e9ed
  • sideBar.border#d1aebe
  • sideBar.foreground#260918
  • sideBarSectionHeader.background#ff3ca01a
  • sideBarSectionHeader.foreground#260918
  • sideBarTitle.foreground#260918
  • statusBar.background#ff3ca0
  • statusBar.border#d1aebe
  • statusBar.debuggingBackground#009f3a
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#260918
  • statusBar.noFolderBackground#eadfe4
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#d93388
  • statusBarItem.remoteForeground#260918
  • tab.activeBackground#f8f4f6
  • tab.activeBorder#ff3ca0
  • tab.activeBorderTop#ff3ca000
  • tab.activeForeground#260918
  • tab.border#d1aebe
  • tab.inactiveBackground#f1e9ed
  • tab.inactiveForeground#b2467a
  • terminal.ansiBlack#260918
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#b2467a
  • 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#f8f4f6
  • terminal.ansiYellow#d4a017
  • terminal.background#f1e9ed
  • terminal.foreground#260918
  • terminalCursor.foreground#ff3ca0
  • textLink.activeForeground#008e33
  • textLink.foreground#009f3a
  • titleBar.activeBackground#f1e9ed
  • titleBar.activeForeground#260918
  • titleBar.border#d1aebe
  • titleBar.inactiveBackground#f1e9ed
  • titleBar.inactiveForeground#b2467a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#b2467aitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#c72f7cbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#c72f7cbold
storage.type, storage.modifier#c72f7cbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#007f2e
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#c72f7c
string.regexp#007f2e
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#6667ab
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#bf4b34bold
variable.other.constant, variable.other.enummember#bf4b34bold
constant.character.escape#b73f7c
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#b8435fitalic
entity.name.type.parameter#b8435fitalic
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#260918
variable.parameter#260918italic
variable.language, variable.language.this, variable.language.self, variable.language.super#c72f7citalic
variable.other.property, variable.other.object.property, meta.object-literal.key#260918
entity.name.class, entity.name.type.class, support.class#736925bold italic
entity.other.inherited-class#736925italic
entity.name.tag, punctuation.definition.tag#c72f7cbold
entity.other.attribute-name#5a6f73italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#b73f7c
punctuation, punctuation.separator, punctuation.terminator, meta.brace#b2467a
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b8435fitalic
support.type.property-name.css, support.type.vendored.property-name.css#b8435f
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#736925bold
support.constant.property-value.css, support.constant.color.css#bf4b34
keyword.other.unit.css#6667ab
support.type.property-name.json#b8435f
markup.heading, markup.heading entity.name, entity.name.section.markdown#c72f7cbold
markup.bold#bf4b34bold
markup.italic#b8435fitalic
markup.inline.raw, markup.raw#007f2e
markup.underline.link#5a6f73
markup.quote#b2467aitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme