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#211d15
  • activityBar.border#3b3426
  • activityBar.foreground#c5ac7d
  • activityBar.inactiveForeground#bda682
  • activityBarBadge.background#92a8d1
  • activityBarBadge.foreground#f9f8f5
  • badge.background#c5ac7d
  • badge.foreground#1e1a13
  • breadcrumb.activeSelectionForeground#ece6dc
  • breadcrumb.focusForeground#ece6dc
  • breadcrumb.foreground#bda682
  • button.background#c5ac7d
  • button.foreground#1e1a13
  • button.hoverBackground#cbb48a
  • button.secondaryBackground#2b261b
  • button.secondaryForeground#ece6dc
  • descriptionForeground#bda682
  • dropdown.background#211d15
  • dropdown.border#3b3426
  • dropdown.foreground#ece6dc
  • editor.background#18150f
  • editor.findMatchBackground#9e4fa566
  • editor.findMatchHighlightBackground#9e4fa533
  • editor.foreground#ece6dc
  • editor.inactiveSelectionBackground#c5ac7d26
  • editor.lineHighlightBackground#c5ac7d1a
  • editor.lineHighlightBorder#c5ac7d00
  • editor.selectionBackground#c5ac7d4d
  • editor.wordHighlightBackground#c5ac7d33
  • editorBracketMatch.background#c5ac7d40
  • editorBracketMatch.border#c5ac7d99
  • editorCursor.foreground#c5ac7d
  • editorError.foreground#dd4132
  • editorGroup.border#3b3426
  • editorGroupHeader.tabsBackground#211d15
  • editorGroupHeader.tabsBorder#3b3426
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#ece6dc33
  • editorIndentGuide.background#ece6dc14
  • editorInfo.foreground#92a8d1
  • editorLineNumber.activeForeground#ece6dc
  • editorLineNumber.foreground#bda682
  • editorRuler.foreground#ece6dc14
  • editorSuggestWidget.selectedBackground#c5ac7d40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#ece6dc1a
  • editorWidget.background#211d15
  • editorWidget.border#3b3426
  • focusBorder#c5ac7d99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#bda682
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#bda682
  • input.background#211d15
  • input.border#3b3426
  • input.foreground#ece6dc
  • input.placeholderForeground#bda682
  • inputOption.activeBorder#c5ac7d
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#92a8d1
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#c5ac7d4d
  • list.activeSelectionForeground#ece6dc
  • list.focusBackground#c5ac7d33
  • list.highlightForeground#c5ac7d
  • list.hoverBackground#c5ac7d26
  • list.inactiveSelectionBackground#c5ac7d26
  • minimap.background#18150f
  • minimap.findMatchHighlight#9e4fa599
  • minimap.selectionHighlight#c5ac7d66
  • notificationLink.foreground#c5ac7d
  • notifications.background#2b261b
  • notifications.foreground#ece6dc
  • panel.background#211d15
  • panel.border#3b3426
  • panelTitle.activeBorder#c5ac7d
  • panelTitle.activeForeground#ece6dc
  • panelTitle.inactiveForeground#bda682
  • peekView.border#c5ac7d
  • peekViewEditor.background#211d15
  • peekViewResult.background#2b261b
  • peekViewTitle.background#211d15
  • progressBar.background#c5ac7d
  • scrollbar.shadow#14110c45
  • scrollbarSlider.activeBackground#ece6dc59
  • scrollbarSlider.background#ece6dc1f
  • scrollbarSlider.hoverBackground#ece6dc40
  • selection.background#c5ac7d4d
  • sideBar.background#2b261b
  • sideBar.border#3b3426
  • sideBar.foreground#ece6dc
  • sideBarSectionHeader.background#c5ac7d26
  • sideBarSectionHeader.foreground#ece6dc
  • sideBarTitle.foreground#ece6dc
  • statusBar.background#76674b
  • statusBar.border#3b3426
  • statusBar.debuggingBackground#92a8d1
  • statusBar.debuggingForeground#f9f8f5
  • statusBar.foreground#dccdb1
  • statusBar.noFolderBackground#211d15
  • statusBarItem.hoverBackground#c5ac7d4d
  • statusBarItem.remoteBackground#c5ac7d
  • statusBarItem.remoteForeground#1e1a13
  • tab.activeBackground#18150f
  • tab.activeBorder#c5ac7d
  • tab.activeBorderTop#c5ac7d00
  • tab.activeForeground#ece6dc
  • tab.border#3b3426
  • tab.inactiveBackground#211d15
  • tab.inactiveForeground#bda682
  • terminal.ansiBlack#18150f
  • terminal.ansiBlue#6a7c7f
  • terminal.ansiBrightBlack#bda682
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f9f8f5
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#ece6dc
  • terminal.ansiYellow#efc050
  • terminal.background#211d15
  • terminal.foreground#ece6dc
  • terminalCursor.foreground#c5ac7d
  • textLink.activeForeground#a2b5d8
  • textLink.foreground#92a8d1
  • titleBar.activeBackground#211d15
  • titleBar.activeForeground#ece6dc
  • titleBar.border#3b3426
  • titleBar.inactiveBackground#211d15
  • titleBar.inactiveForeground#bda682

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#bda682italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#c5ac7dbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#c5ac7dbold
storage.type, storage.modifier#c5ac7dbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#92a8d1
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#c5ac7d
string.regexp#92a8d1
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#ad6ab3
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#f3aeb0bold
variable.other.constant, variable.other.enummember#f3aeb0bold
constant.character.escape#ceb891
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#f5a26fitalic
entity.name.type.parameter#f5a26fitalic
entity.name.function, meta.function entity.name.function#76ff7bbold
meta.function-call entity.name.function, support.function#76ff7b
meta.method-call entity.name.function, entity.name.function.member#76ff7b
variable, variable.other, variable.other.readwrite#ece6dc
variable.parameter#ece6dcitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#c5ac7ditalic
variable.other.property, variable.other.object.property, meta.object-literal.key#ece6dc
entity.name.class, entity.name.type.class, support.class#9d7e93bold italic
entity.other.inherited-class#9d7e93italic
entity.name.tag, punctuation.definition.tag#c5ac7dbold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ceb891
punctuation, punctuation.separator, punctuation.terminator, meta.brace#bda682
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#f5a26fitalic
support.type.property-name.css, support.type.vendored.property-name.css#f5a26f
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9d7e93bold
support.constant.property-value.css, support.constant.color.css#f3aeb0
keyword.other.unit.css#ad6ab3
support.type.property-name.json#f5a26f
markup.heading, markup.heading entity.name, entity.name.section.markdown#c5ac7dbold
markup.bold#f3aeb0bold
markup.italic#f5a26fitalic
markup.inline.raw, markup.raw#92a8d1
markup.underline.link#76ff7b
markup.quote#bda682italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme