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#1a1014
  • activityBar.border#2b1a21
  • activityBar.foreground#7e4d61
  • activityBar.inactiveForeground#7e4d61
  • activityBarBadge.background#86d0bf
  • activityBarBadge.foreground#f5f1f2
  • badge.background#7e4d61
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#dbcdd3
  • breadcrumb.focusForeground#dbcdd3
  • breadcrumb.foreground#7e4d61
  • button.background#7e4d61
  • button.foreground#f5f1f2
  • button.hoverBackground#8b5f71
  • button.secondaryBackground#211419
  • button.secondaryForeground#dbcdd3
  • descriptionForeground#7e4d61
  • dropdown.background#1a1014
  • dropdown.border#2b1a21
  • dropdown.foreground#dbcdd3
  • editor.background#140c10
  • editor.findMatchBackground#6667ab66
  • editor.findMatchHighlightBackground#6667ab33
  • editor.foreground#dbcdd3
  • editor.inactiveSelectionBackground#7e4d6126
  • editor.lineHighlightBackground#7e4d611a
  • editor.lineHighlightBorder#7e4d6100
  • editor.selectionBackground#7e4d614d
  • editor.wordHighlightBackground#7e4d6133
  • editorBracketMatch.background#7e4d6140
  • editorBracketMatch.border#7e4d6199
  • editorCursor.foreground#7e4d61
  • editorError.foreground#dd4132
  • editorGroup.border#2b1a21
  • editorGroupHeader.tabsBackground#1a1014
  • editorGroupHeader.tabsBorder#2b1a21
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dbcdd333
  • editorIndentGuide.background#dbcdd314
  • editorInfo.foreground#86d0bf
  • editorLineNumber.activeForeground#dbcdd3
  • editorLineNumber.foreground#7e4d61
  • editorRuler.foreground#dbcdd314
  • editorSuggestWidget.selectedBackground#7e4d6140
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dbcdd31a
  • editorWidget.background#1a1014
  • editorWidget.border#2b1a21
  • focusBorder#7e4d6199
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#7e4d61
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#7e4d61
  • input.background#1a1014
  • input.border#2b1a21
  • input.foreground#dbcdd3
  • input.placeholderForeground#7e4d61
  • inputOption.activeBorder#7e4d61
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#86d0bf
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#7e4d614d
  • list.activeSelectionForeground#dbcdd3
  • list.focusBackground#7e4d6133
  • list.highlightForeground#7e4d61
  • list.hoverBackground#7e4d6126
  • list.inactiveSelectionBackground#7e4d6126
  • minimap.background#140c10
  • minimap.findMatchHighlight#6667ab99
  • minimap.selectionHighlight#7e4d6166
  • notificationLink.foreground#7e4d61
  • notifications.background#211419
  • notifications.foreground#dbcdd3
  • panel.background#1a1014
  • panel.border#2b1a21
  • panelTitle.activeBorder#7e4d61
  • panelTitle.activeForeground#dbcdd3
  • panelTitle.inactiveForeground#7e4d61
  • peekView.border#7e4d61
  • peekViewEditor.background#1a1014
  • peekViewResult.background#211419
  • peekViewTitle.background#1a1014
  • progressBar.background#7e4d61
  • scrollbar.shadow#0d080a45
  • scrollbarSlider.activeBackground#dbcdd359
  • scrollbarSlider.background#dbcdd31f
  • scrollbarSlider.hoverBackground#dbcdd340
  • selection.background#7e4d614d
  • sideBar.background#211419
  • sideBar.border#2b1a21
  • sideBar.foreground#dbcdd3
  • sideBarSectionHeader.background#7e4d6126
  • sideBarSectionHeader.foreground#dbcdd3
  • sideBarTitle.foreground#dbcdd3
  • statusBar.background#4c2e3a
  • statusBar.border#2b1a21
  • statusBar.debuggingBackground#86d0bf
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#b294a0
  • statusBar.noFolderBackground#1a1014
  • statusBarItem.hoverBackground#7e4d614d
  • statusBarItem.remoteBackground#7e4d61
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#140c10
  • tab.activeBorder#7e4d61
  • tab.activeBorderTop#7e4d6100
  • tab.activeForeground#dbcdd3
  • tab.border#2b1a21
  • tab.inactiveBackground#1a1014
  • tab.inactiveForeground#7e4d61
  • terminal.ansiBlack#140c10
  • terminal.ansiBlue#474d71
  • terminal.ansiBrightBlack#7e4d61
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#dbcdd3
  • terminal.ansiYellow#efc050
  • terminal.background#1a1014
  • terminal.foreground#dbcdd3
  • terminalCursor.foreground#7e4d61
  • textLink.activeForeground#98d7c9
  • textLink.foreground#86d0bf
  • titleBar.activeBackground#1a1014
  • titleBar.activeForeground#dbcdd3
  • titleBar.border#2b1a21
  • titleBar.inactiveBackground#1a1014
  • titleBar.inactiveForeground#7e4d61

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#7e4d61italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#9b7485bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#9b7485bold
storage.type, storage.modifier#9b7485bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#86d0bf
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#9b7485
string.regexp#86d0bf
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#7d7eb8
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#ad6ab3bold
variable.other.constant, variable.other.enummember#ad6ab3bold
constant.character.escape#9a7484
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#d15a6citalic
entity.name.type.parameter#d15a6citalic
entity.name.function, meta.function entity.name.function#decdbebold
meta.function-call entity.name.function, support.function#decdbe
meta.method-call entity.name.function, entity.name.function.member#decdbe
variable, variable.other, variable.other.readwrite#dbcdd3
variable.parameter#dbcdd3italic
variable.language, variable.language.this, variable.language.self, variable.language.super#9b7485italic
variable.other.property, variable.other.object.property, meta.object-literal.key#dbcdd3
entity.name.class, entity.name.type.class, support.class#e8e835bold italic
entity.other.inherited-class#e8e835italic
entity.name.tag, punctuation.definition.tag#9b7485bold
entity.other.attribute-name#decdbeitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#9a7484
punctuation, punctuation.separator, punctuation.terminator, meta.brace#7e4d61
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#d15a6citalic
support.type.property-name.css, support.type.vendored.property-name.css#d15a6c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e8e835bold
support.constant.property-value.css, support.constant.color.css#ad6ab3
keyword.other.unit.css#7d7eb8
support.type.property-name.json#d15a6c
markup.heading, markup.heading entity.name, entity.name.section.markdown#9b7485bold
markup.bold#ad6ab3bold
markup.italic#d15a6citalic
markup.inline.raw, markup.raw#86d0bf
markup.underline.link#decdbe
markup.quote#7e4d61italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme