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#2d2205
  • activityBar.border#483608
  • activityBar.foreground#d4a017
  • activityBar.inactiveForeground#9c823d
  • activityBarBadge.background#1b368c
  • activityBarBadge.foreground#f5f4f1
  • badge.background#d4a017
  • badge.foreground#201803
  • breadcrumb.activeSelectionForeground#e2dbca
  • breadcrumb.focusForeground#e2dbca
  • breadcrumb.foreground#9c823d
  • button.background#d4a017
  • button.foreground#201803
  • button.hoverBackground#d8aa2e
  • button.secondaryBackground#372a06
  • button.secondaryForeground#e2dbca
  • descriptionForeground#9c823d
  • dropdown.background#2d2205
  • dropdown.border#483608
  • dropdown.foreground#e2dbca
  • editor.background#221a04
  • editor.findMatchBackground#00b14066
  • editor.findMatchHighlightBackground#00b14033
  • editor.foreground#e2dbca
  • editor.inactiveSelectionBackground#d4a01726
  • editor.lineHighlightBackground#d4a0171a
  • editor.lineHighlightBorder#d4a01700
  • editor.selectionBackground#d4a0174d
  • editor.wordHighlightBackground#d4a01733
  • editorBracketMatch.background#d4a01740
  • editorBracketMatch.border#d4a01799
  • editorCursor.foreground#d4a017
  • editorError.foreground#dd4132
  • editorGroup.border#483608
  • editorGroupHeader.tabsBackground#2d2205
  • editorGroupHeader.tabsBorder#483608
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e2dbca33
  • editorIndentGuide.background#e2dbca14
  • editorInfo.foreground#1b368c
  • editorLineNumber.activeForeground#e2dbca
  • editorLineNumber.foreground#9c823d
  • editorRuler.foreground#e2dbca14
  • editorSuggestWidget.selectedBackground#d4a01740
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e2dbca1a
  • editorWidget.background#2d2205
  • editorWidget.border#483608
  • focusBorder#d4a01799
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#9c823d
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#9c823d
  • input.background#2d2205
  • input.border#483608
  • input.foreground#e2dbca
  • input.placeholderForeground#9c823d
  • inputOption.activeBorder#d4a017
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#1b368c
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#d4a0174d
  • list.activeSelectionForeground#e2dbca
  • list.focusBackground#d4a01733
  • list.highlightForeground#d4a017
  • list.hoverBackground#d4a01726
  • list.inactiveSelectionBackground#d4a01726
  • minimap.background#221a04
  • minimap.findMatchHighlight#00b14099
  • minimap.selectionHighlight#d4a01766
  • notificationLink.foreground#d4a017
  • notifications.background#372a06
  • notifications.foreground#e2dbca
  • panel.background#2d2205
  • panel.border#483608
  • panelTitle.activeBorder#d4a017
  • panelTitle.activeForeground#e2dbca
  • panelTitle.inactiveForeground#9c823d
  • peekView.border#d4a017
  • peekViewEditor.background#2d2205
  • peekViewResult.background#372a06
  • peekViewTitle.background#2d2205
  • progressBar.background#d4a017
  • scrollbar.shadow#15100245
  • scrollbarSlider.activeBackground#e2dbca59
  • scrollbarSlider.background#e2dbca1f
  • scrollbarSlider.hoverBackground#e2dbca40
  • selection.background#d4a0174d
  • sideBar.background#372a06
  • sideBar.border#483608
  • sideBar.foreground#e2dbca
  • sideBarSectionHeader.background#d4a01726
  • sideBarSectionHeader.foreground#e2dbca
  • sideBarTitle.foreground#e2dbca
  • statusBar.background#7f600e
  • statusBar.border#483608
  • statusBar.debuggingBackground#1b368c
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#e5c674
  • statusBar.noFolderBackground#2d2205
  • statusBarItem.hoverBackground#d4a0174d
  • statusBarItem.remoteBackground#d4a017
  • statusBarItem.remoteForeground#201803
  • tab.activeBackground#221a04
  • tab.activeBorder#d4a017
  • tab.activeBorderTop#d4a01700
  • tab.activeForeground#e2dbca
  • tab.border#483608
  • tab.inactiveBackground#2d2205
  • tab.inactiveForeground#9c823d
  • terminal.ansiBlack#221a04
  • terminal.ansiBlue#72764c
  • terminal.ansiBrightBlack#9c823d
  • 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#e2dbca
  • terminal.ansiYellow#efc050
  • terminal.background#2d2205
  • terminal.foreground#e2dbca
  • terminalCursor.foreground#d4a017
  • textLink.activeForeground#3d549d
  • textLink.foreground#1b368c
  • titleBar.activeBackground#2d2205
  • titleBar.activeForeground#e2dbca
  • titleBar.border#483608
  • titleBar.inactiveBackground#2d2205
  • titleBar.inactiveForeground#9c823d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#9c823ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#d4a017bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#d4a017bold
storage.type, storage.modifier#d4a017bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#7486b9
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#d4a017
string.regexp#7486b9
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#00b140
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#88b04bbold
variable.other.constant, variable.other.enummember#88b04bbold
constant.character.escape#daae3a
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#decdbeitalic
entity.name.type.parameter#decdbeitalic
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#e2dbca
variable.parameter#e2dbcaitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#d4a017italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e2dbca
entity.name.class, entity.name.type.class, support.class#9d7e93bold italic
entity.other.inherited-class#9d7e93italic
entity.name.tag, punctuation.definition.tag#d4a017bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#daae3a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#9c823d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#decdbeitalic
support.type.property-name.css, support.type.vendored.property-name.css#decdbe
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9d7e93bold
support.constant.property-value.css, support.constant.color.css#88b04b
keyword.other.unit.css#00b140
support.type.property-name.json#decdbe
markup.heading, markup.heading entity.name, entity.name.section.markdown#d4a017bold
markup.bold#88b04bbold
markup.italic#decdbeitalic
markup.inline.raw, markup.raw#7486b9
markup.underline.link#f7cac9
markup.quote#9c823ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme