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#e8dee1
  • activityBar.border#c5abb3
  • activityBar.foreground#7c2029
  • activityBar.inactiveForeground#7d3b4b
  • activityBarBadge.background#3ea399
  • activityBarBadge.foreground#f5f1f2
  • badge.background#7c2029
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#1b0709
  • breadcrumb.focusForeground#1b0709
  • breadcrumb.foreground#7d3b4b
  • button.background#7c2029
  • button.foreground#f5f1f2
  • button.hoverBackground#701d25
  • button.secondaryBackground#e8dee1
  • button.secondaryForeground#1b0709
  • descriptionForeground#7d3b4b
  • dropdown.background#f7f4f5
  • dropdown.border#c5abb3
  • dropdown.foreground#1b0709
  • editor.background#f7f4f5
  • editor.findMatchBackground#9063cd59
  • editor.findMatchHighlightBackground#9063cd26
  • editor.foreground#1b0709
  • editor.inactiveSelectionBackground#7c20291a
  • editor.lineHighlightBackground#7c202914
  • editor.lineHighlightBorder#7c202900
  • editor.selectionBackground#7c202933
  • editor.wordHighlightBackground#7c202926
  • editorBracketMatch.background#7c202933
  • editorBracketMatch.border#7c202980
  • editorCursor.foreground#7c2029
  • editorError.foreground#bf1932
  • editorGroup.border#c5abb3
  • editorGroupHeader.tabsBackground#f0e9eb
  • editorGroupHeader.tabsBorder#c5abb3
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1b07092e
  • editorIndentGuide.background#1b070914
  • editorInfo.foreground#3ea399
  • editorLineNumber.activeForeground#1b0709
  • editorLineNumber.foreground#7d3b4b
  • editorRuler.foreground#1b070914
  • editorSuggestWidget.selectedBackground#7c202926
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1b07091a
  • editorWidget.background#f7f4f5
  • editorWidget.border#c5abb3
  • focusBorder#7c202980
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#7d3b4b
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#7d3b4b
  • input.background#f7f4f5
  • input.border#c5abb3
  • input.foreground#1b0709
  • input.placeholderForeground#7d3b4b
  • inputOption.activeBorder#7c2029
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#3ea399
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#7c202933
  • list.activeSelectionForeground#1b0709
  • list.focusBackground#7c202926
  • list.highlightForeground#7c2029
  • list.hoverBackground#7c20291a
  • list.inactiveSelectionBackground#7c20291a
  • minimap.background#f7f4f5
  • minimap.findMatchHighlight#9063cd80
  • minimap.selectionHighlight#7c20294d
  • notificationLink.foreground#7c2029
  • notifications.background#f7f4f5
  • notifications.foreground#1b0709
  • panel.background#f0e9eb
  • panel.border#c5abb3
  • panelTitle.activeBorder#7c2029
  • panelTitle.activeForeground#1b0709
  • panelTitle.inactiveForeground#7d3b4b
  • peekView.border#7c2029
  • peekViewEditor.background#f0e9eb
  • peekViewResult.background#e8dee1
  • peekViewTitle.background#f0e9eb
  • progressBar.background#7c2029
  • scrollbar.shadow#0c030414
  • scrollbarSlider.activeBackground#1b07094d
  • scrollbarSlider.background#1b07091a
  • scrollbarSlider.hoverBackground#1b070933
  • selection.background#7c202933
  • sideBar.background#f0e9eb
  • sideBar.border#c5abb3
  • sideBar.foreground#1b0709
  • sideBarSectionHeader.background#7c20291a
  • sideBarSectionHeader.foreground#1b0709
  • sideBarTitle.foreground#1b0709
  • statusBar.background#7c2029
  • statusBar.border#c5abb3
  • statusBar.debuggingBackground#3ea399
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e8dee1
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#691b23
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f7f4f5
  • tab.activeBorder#7c2029
  • tab.activeBorderTop#7c202900
  • tab.activeForeground#1b0709
  • tab.border#c5abb3
  • tab.inactiveBackground#f0e9eb
  • tab.inactiveForeground#7d3b4b
  • terminal.ansiBlack#1b0709
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#7d3b4b
  • 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#f7f4f5
  • terminal.ansiYellow#d4a017
  • terminal.background#f0e9eb
  • terminal.foreground#1b0709
  • terminalCursor.foreground#7c2029
  • textLink.activeForeground#379188
  • textLink.foreground#3ea399
  • titleBar.activeBackground#f0e9eb
  • titleBar.activeForeground#1b0709
  • titleBar.border#c5abb3
  • titleBar.inactiveBackground#f0e9eb
  • titleBar.inactiveForeground#7d3b4b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#7d3b4bitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#7c2029bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#7c2029bold
storage.type, storage.modifier#7c2029bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#2d796f
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#7c2029
string.regexp#2d796f
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#845bbd
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#796c56bold
variable.other.constant, variable.other.enummember#796c56bold
constant.character.escape#904149
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#b04530italic
entity.name.type.parameter#b04530italic
entity.name.function, meta.function entity.name.function#786d74bold
meta.function-call entity.name.function, support.function#786d74
meta.method-call entity.name.function, entity.name.function.member#786d74
variable, variable.other, variable.other.readwrite#1b0709
variable.parameter#1b0709italic
variable.language, variable.language.this, variable.language.self, variable.language.super#7c2029italic
variable.other.property, variable.other.object.property, meta.object-literal.key#1b0709
entity.name.class, entity.name.type.class, support.class#6c7358bold italic
entity.other.inherited-class#6c7358italic
entity.name.tag, punctuation.definition.tag#7c2029bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#904149
punctuation, punctuation.separator, punctuation.terminator, meta.brace#7d3b4b
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b04530italic
support.type.property-name.css, support.type.vendored.property-name.css#b04530
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6c7358bold
support.constant.property-value.css, support.constant.color.css#796c56
keyword.other.unit.css#845bbd
support.type.property-name.json#b04530
markup.heading, markup.heading entity.name, entity.name.section.markdown#7c2029bold
markup.bold#796c56bold
markup.italic#b04530italic
markup.inline.raw, markup.raw#2d796f
markup.underline.link#786d74
markup.quote#7d3b4bitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme