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#1d1e08
  • activityBar.border#2f300e
  • activityBar.foreground#8a8d28
  • activityBar.inactiveForeground#867c43
  • activityBarBadge.background#6667ab
  • activityBarBadge.foreground#f5f4f1
  • badge.background#8a8d28
  • badge.foreground#151506
  • breadcrumb.activeSelectionForeground#dddacb
  • breadcrumb.focusForeground#dddacb
  • breadcrumb.foreground#867c43
  • button.background#8a8d28
  • button.foreground#151506
  • button.hoverBackground#96983e
  • button.secondaryBackground#24250a
  • button.secondaryForeground#dddacb
  • descriptionForeground#867c43
  • dropdown.background#1d1e08
  • dropdown.border#2f300e
  • dropdown.foreground#dddacb
  • editor.background#161706
  • editor.findMatchBackground#e8d4e266
  • editor.findMatchHighlightBackground#e8d4e233
  • editor.foreground#dddacb
  • editor.inactiveSelectionBackground#8a8d2826
  • editor.lineHighlightBackground#8a8d281a
  • editor.lineHighlightBorder#8a8d2800
  • editor.selectionBackground#8a8d284d
  • editor.wordHighlightBackground#8a8d2833
  • editorBracketMatch.background#8a8d2840
  • editorBracketMatch.border#8a8d2899
  • editorCursor.foreground#8a8d28
  • editorError.foreground#dd4132
  • editorGroup.border#2f300e
  • editorGroupHeader.tabsBackground#1d1e08
  • editorGroupHeader.tabsBorder#2f300e
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dddacb33
  • editorIndentGuide.background#dddacb14
  • editorInfo.foreground#6667ab
  • editorLineNumber.activeForeground#dddacb
  • editorLineNumber.foreground#867c43
  • editorRuler.foreground#dddacb14
  • editorSuggestWidget.selectedBackground#8a8d2840
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dddacb1a
  • editorWidget.background#1d1e08
  • editorWidget.border#2f300e
  • focusBorder#8a8d2899
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#867c43
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#867c43
  • input.background#1d1e08
  • input.border#2f300e
  • input.foreground#dddacb
  • input.placeholderForeground#867c43
  • inputOption.activeBorder#8a8d28
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#6667ab
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#8a8d284d
  • list.activeSelectionForeground#dddacb
  • list.focusBackground#8a8d2833
  • list.highlightForeground#8a8d28
  • list.hoverBackground#8a8d2826
  • list.inactiveSelectionBackground#8a8d2826
  • minimap.background#161706
  • minimap.findMatchHighlight#e8d4e299
  • minimap.selectionHighlight#8a8d2866
  • notificationLink.foreground#8a8d28
  • notifications.background#24250a
  • notifications.foreground#dddacb
  • panel.background#1d1e08
  • panel.border#2f300e
  • panelTitle.activeBorder#8a8d28
  • panelTitle.activeForeground#dddacb
  • panelTitle.inactiveForeground#867c43
  • peekView.border#8a8d28
  • peekViewEditor.background#1d1e08
  • peekViewResult.background#24250a
  • peekViewTitle.background#1d1e08
  • progressBar.background#8a8d28
  • scrollbar.shadow#0e0e0445
  • scrollbarSlider.activeBackground#dddacb59
  • scrollbarSlider.background#dddacb1f
  • scrollbarSlider.hoverBackground#dddacb40
  • selection.background#8a8d284d
  • sideBar.background#24250a
  • sideBar.border#2f300e
  • sideBar.foreground#dddacb
  • sideBarSectionHeader.background#8a8d2826
  • sideBarSectionHeader.foreground#dddacb
  • sideBarTitle.foreground#dddacb
  • statusBar.background#535518
  • statusBar.border#2f300e
  • statusBar.debuggingBackground#6667ab
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#b9bb7e
  • statusBar.noFolderBackground#1d1e08
  • statusBarItem.hoverBackground#8a8d284d
  • statusBarItem.remoteBackground#8a8d28
  • statusBarItem.remoteForeground#151506
  • tab.activeBackground#161706
  • tab.activeBorder#8a8d28
  • tab.activeBorderTop#8a8d2800
  • tab.activeForeground#dddacb
  • tab.border#2f300e
  • tab.inactiveBackground#1d1e08
  • tab.inactiveForeground#867c43
  • terminal.ansiBlack#161706
  • terminal.ansiBlue#4d6d55
  • terminal.ansiBrightBlack#867c43
  • 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#dddacb
  • terminal.ansiYellow#efc050
  • terminal.background#1d1e08
  • terminal.foreground#dddacb
  • terminalCursor.foreground#8a8d28
  • textLink.activeForeground#7d7eb8
  • textLink.foreground#6667ab
  • titleBar.activeBackground#1d1e08
  • titleBar.activeForeground#dddacb
  • titleBar.border#2f300e
  • titleBar.inactiveBackground#1d1e08
  • titleBar.inactiveForeground#867c43

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#867c43italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#8a8d28bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#8a8d28bold
storage.type, storage.modifier#8a8d28bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#7d7eb8
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#8a8d28
string.regexp#7d7eb8
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#e8d4e2
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#4e9a2fbold
variable.other.constant, variable.other.enummember#4e9a2fbold
constant.character.escape#9c9e48
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#a3af86italic
entity.name.type.parameter#a3af86italic
entity.name.function, meta.function entity.name.function#f7cac9bold
meta.function-call entity.name.function, support.function#f7cac9
meta.method-call entity.name.function, entity.name.function.member#f7cac9
variable, variable.other, variable.other.readwrite#dddacb
variable.parameter#dddacbitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#8a8d28italic
variable.other.property, variable.other.object.property, meta.object-literal.key#dddacb
entity.name.class, entity.name.type.class, support.class#dd487ebold italic
entity.other.inherited-class#dd487eitalic
entity.name.tag, punctuation.definition.tag#8a8d28bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#9c9e48
punctuation, punctuation.separator, punctuation.terminator, meta.brace#867c43
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#a3af86italic
support.type.property-name.css, support.type.vendored.property-name.css#a3af86
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#dd487ebold
support.constant.property-value.css, support.constant.color.css#4e9a2f
keyword.other.unit.css#e8d4e2
support.type.property-name.json#a3af86
markup.heading, markup.heading entity.name, entity.name.section.markdown#8a8d28bold
markup.bold#4e9a2fbold
markup.italic#a3af86italic
markup.inline.raw, markup.raw#7d7eb8
markup.underline.link#f7cac9
markup.quote#867c43italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme