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#1c1e17
  • activityBar.border#313528
  • activityBar.foreground#a3af86
  • activityBar.inactiveForeground#8d865f
  • activityBarBadge.background#5f4b8b
  • activityBarBadge.foreground#f5f4f1
  • badge.background#a3af86
  • badge.foreground#181a14
  • breadcrumb.activeSelectionForeground#dfddd1
  • breadcrumb.focusForeground#dfddd1
  • breadcrumb.foreground#8d865f
  • button.background#a3af86
  • button.foreground#181a14
  • button.hoverBackground#acb792
  • button.secondaryBackground#24261d
  • button.secondaryForeground#dfddd1
  • descriptionForeground#8d865f
  • dropdown.background#1c1e17
  • dropdown.border#313528
  • dropdown.foreground#dfddd1
  • editor.background#141510
  • editor.findMatchBackground#86d0bf66
  • editor.findMatchHighlightBackground#86d0bf33
  • editor.foreground#dfddd1
  • editor.inactiveSelectionBackground#a3af8626
  • editor.lineHighlightBackground#a3af861a
  • editor.lineHighlightBorder#a3af8600
  • editor.selectionBackground#a3af864d
  • editor.wordHighlightBackground#a3af8633
  • editorBracketMatch.background#a3af8640
  • editorBracketMatch.border#a3af8699
  • editorCursor.foreground#a3af86
  • editorError.foreground#dd4132
  • editorGroup.border#313528
  • editorGroupHeader.tabsBackground#1c1e17
  • editorGroupHeader.tabsBorder#313528
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dfddd133
  • editorIndentGuide.background#dfddd114
  • editorInfo.foreground#5f4b8b
  • editorLineNumber.activeForeground#dfddd1
  • editorLineNumber.foreground#8d865f
  • editorRuler.foreground#dfddd114
  • editorSuggestWidget.selectedBackground#a3af8640
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dfddd11a
  • editorWidget.background#1c1e17
  • editorWidget.border#313528
  • focusBorder#a3af8699
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#8d865f
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#8d865f
  • input.background#1c1e17
  • input.border#313528
  • input.foreground#dfddd1
  • input.placeholderForeground#8d865f
  • inputOption.activeBorder#a3af86
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#5f4b8b
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#a3af864d
  • list.activeSelectionForeground#dfddd1
  • list.focusBackground#a3af8633
  • list.highlightForeground#a3af86
  • list.hoverBackground#a3af8626
  • list.inactiveSelectionBackground#a3af8626
  • minimap.background#141510
  • minimap.findMatchHighlight#86d0bf99
  • minimap.selectionHighlight#a3af8666
  • notificationLink.foreground#a3af86
  • notifications.background#24261d
  • notifications.foreground#dfddd1
  • panel.background#1c1e17
  • panel.border#313528
  • panelTitle.activeBorder#a3af86
  • panelTitle.activeForeground#dfddd1
  • panelTitle.inactiveForeground#8d865f
  • peekView.border#a3af86
  • peekViewEditor.background#1c1e17
  • peekViewResult.background#24261d
  • peekViewTitle.background#1c1e17
  • progressBar.background#a3af86
  • scrollbar.shadow#10110d45
  • scrollbarSlider.activeBackground#dfddd159
  • scrollbarSlider.background#dfddd11f
  • scrollbarSlider.hoverBackground#dfddd140
  • selection.background#a3af864d
  • sideBar.background#24261d
  • sideBar.border#313528
  • sideBar.foreground#dfddd1
  • sideBarSectionHeader.background#a3af8626
  • sideBarSectionHeader.foreground#dfddd1
  • sideBarTitle.foreground#dfddd1
  • statusBar.background#626950
  • statusBar.border#313528
  • statusBar.debuggingBackground#5f4b8b
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#c8cfb6
  • statusBar.noFolderBackground#1c1e17
  • statusBarItem.hoverBackground#a3af864d
  • statusBarItem.remoteBackground#a3af86
  • statusBarItem.remoteForeground#181a14
  • tab.activeBackground#141510
  • tab.activeBorder#a3af86
  • tab.activeBorderTop#a3af8600
  • tab.activeForeground#dfddd1
  • tab.border#313528
  • tab.inactiveBackground#1c1e17
  • tab.inactiveForeground#8d865f
  • terminal.ansiBlack#141510
  • terminal.ansiBlue#597e84
  • terminal.ansiBrightBlack#8d865f
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f4f1
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#dfddd1
  • terminal.ansiYellow#efc050
  • terminal.background#1c1e17
  • terminal.foreground#dfddd1
  • terminalCursor.foreground#a3af86
  • textLink.activeForeground#77669c
  • textLink.foreground#5f4b8b
  • titleBar.activeBackground#1c1e17
  • titleBar.activeForeground#dfddd1
  • titleBar.border#313528
  • titleBar.inactiveBackground#1c1e17
  • titleBar.inactiveForeground#8d865f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#8d865fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#a3af86bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#a3af86bold
storage.type, storage.modifier#a3af86bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#8d7dac
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#a3af86
string.regexp#8d7dac
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#86d0bf
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#e8ae4ebold
variable.other.constant, variable.other.enummember#e8ae4ebold
constant.character.escape#b1bb98
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#8a8d28italic
entity.name.type.parameter#8a8d28italic
entity.name.function, meta.function entity.name.function#e8d4e2bold
meta.function-call entity.name.function, support.function#e8d4e2
meta.method-call entity.name.function, entity.name.function.member#e8d4e2
variable, variable.other, variable.other.readwrite#dfddd1
variable.parameter#dfddd1italic
variable.language, variable.language.this, variable.language.self, variable.language.super#a3af86italic
variable.other.property, variable.other.object.property, meta.object-literal.key#dfddd1
entity.name.class, entity.name.type.class, support.class#b0787cbold italic
entity.other.inherited-class#b0787citalic
entity.name.tag, punctuation.definition.tag#a3af86bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#b1bb98
punctuation, punctuation.separator, punctuation.terminator, meta.brace#8d865f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#8a8d28italic
support.type.property-name.css, support.type.vendored.property-name.css#8a8d28
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b0787cbold
support.constant.property-value.css, support.constant.color.css#e8ae4e
keyword.other.unit.css#86d0bf
support.type.property-name.json#8a8d28
markup.heading, markup.heading entity.name, entity.name.section.markdown#a3af86bold
markup.bold#e8ae4ebold
markup.italic#8a8d28italic
markup.inline.raw, markup.raw#8d7dac
markup.underline.link#e8d4e2
markup.quote#8d865fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme