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#faf4f0
  • activityBar.border#f3ddd1
  • activityBar.foreground#fe5000
  • activityBar.inactiveForeground#eb9b72
  • activityBarBadge.background#288fc3
  • activityBarBadge.foreground#fcfbfa
  • badge.background#fe5000
  • badge.foreground#381200
  • breadcrumb.activeSelectionForeground#381200
  • breadcrumb.focusForeground#381200
  • breadcrumb.foreground#eb9b72
  • button.background#fe5000
  • button.foreground#381200
  • button.hoverBackground#e54800
  • button.secondaryBackground#faf4f0
  • button.secondaryForeground#381200
  • descriptionForeground#eb9b72
  • dropdown.background#fdfbfa
  • dropdown.border#f3ddd1
  • dropdown.foreground#381200
  • editor.background#fdfbfa
  • editor.findMatchBackground#9e4fa559
  • editor.findMatchHighlightBackground#9e4fa526
  • editor.foreground#381200
  • editor.inactiveSelectionBackground#fe50001a
  • editor.lineHighlightBackground#fe500014
  • editor.lineHighlightBorder#fe500000
  • editor.selectionBackground#fe500033
  • editor.wordHighlightBackground#fe500026
  • editorBracketMatch.background#fe500033
  • editorBracketMatch.border#fe500080
  • editorCursor.foreground#fe5000
  • editorError.foreground#bf1932
  • editorGroup.border#f3ddd1
  • editorGroupHeader.tabsBackground#fbf8f5
  • editorGroupHeader.tabsBorder#f3ddd1
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#3812002e
  • editorIndentGuide.background#38120014
  • editorInfo.foreground#288fc3
  • editorLineNumber.activeForeground#381200
  • editorLineNumber.foreground#eb9b72
  • editorRuler.foreground#38120014
  • editorSuggestWidget.selectedBackground#fe500026
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#3812001a
  • editorWidget.background#fdfbfa
  • editorWidget.border#f3ddd1
  • focusBorder#fe500080
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#eb9b72
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#eb9b72
  • input.background#fdfbfa
  • input.border#f3ddd1
  • input.foreground#381200
  • input.placeholderForeground#eb9b72
  • inputOption.activeBorder#fe5000
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#288fc3
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#fe500033
  • list.activeSelectionForeground#381200
  • list.focusBackground#fe500026
  • list.highlightForeground#fe5000
  • list.hoverBackground#fe50001a
  • list.inactiveSelectionBackground#fe50001a
  • minimap.background#fdfbfa
  • minimap.findMatchHighlight#9e4fa580
  • minimap.selectionHighlight#fe50004d
  • notificationLink.foreground#fe5000
  • notifications.background#fdfbfa
  • notifications.foreground#381200
  • panel.background#fbf8f5
  • panel.border#f3ddd1
  • panelTitle.activeBorder#fe5000
  • panelTitle.activeForeground#381200
  • panelTitle.inactiveForeground#eb9b72
  • peekView.border#fe5000
  • peekViewEditor.background#fbf8f5
  • peekViewResult.background#faf4f0
  • peekViewTitle.background#fbf8f5
  • progressBar.background#fe5000
  • scrollbar.shadow#19080014
  • scrollbarSlider.activeBackground#3812004d
  • scrollbarSlider.background#3812001a
  • scrollbarSlider.hoverBackground#38120033
  • selection.background#fe500033
  • sideBar.background#fbf8f5
  • sideBar.border#f3ddd1
  • sideBar.foreground#381200
  • sideBarSectionHeader.background#fe50001a
  • sideBarSectionHeader.foreground#381200
  • sideBarTitle.foreground#381200
  • statusBar.background#fe5000
  • statusBar.border#f3ddd1
  • statusBar.debuggingBackground#288fc3
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#381200
  • statusBar.noFolderBackground#faf4f0
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#d84400
  • statusBarItem.remoteForeground#381200
  • tab.activeBackground#fdfbfa
  • tab.activeBorder#fe5000
  • tab.activeBorderTop#fe500000
  • tab.activeForeground#381200
  • tab.border#f3ddd1
  • tab.inactiveBackground#fbf8f5
  • tab.inactiveForeground#eb9b72
  • terminal.ansiBlack#381200
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#eb9b72
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#fdfbfa
  • terminal.ansiYellow#d4a017
  • terminal.background#fbf8f5
  • terminal.foreground#381200
  • terminalCursor.foreground#fe5000
  • textLink.activeForeground#237fae
  • textLink.foreground#288fc3
  • titleBar.activeBackground#fbf8f5
  • titleBar.activeForeground#381200
  • titleBar.border#f3ddd1
  • titleBar.inactiveBackground#fbf8f5
  • titleBar.inactiveForeground#eb9b72

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#eb9b72italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#c63f00bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#c63f00bold
storage.type, storage.modifier#c63f00bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#227ba9
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#c63f00
string.regexp#227ba9
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9e4fa5
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#d4145abold
variable.other.constant, variable.other.enummember#d4145abold
constant.character.escape#b64c1b
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#796c56italic
entity.name.type.parameter#796c56italic
entity.name.function, meta.function entity.name.function#786d74bold
meta.function-call entity.name.function, support.function#786d74
meta.method-call entity.name.function, entity.name.function.member#786d74
variable, variable.other, variable.other.readwrite#381200
variable.parameter#381200italic
variable.language, variable.language.this, variable.language.self, variable.language.super#c63f00italic
variable.other.property, variable.other.object.property, meta.object-literal.key#381200
entity.name.class, entity.name.type.class, support.class#428328bold italic
entity.other.inherited-class#428328italic
entity.name.tag, punctuation.definition.tag#c63f00bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#b64c1b
punctuation, punctuation.separator, punctuation.terminator, meta.brace#eb9b72
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#796c56italic
support.type.property-name.css, support.type.vendored.property-name.css#796c56
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#428328bold
support.constant.property-value.css, support.constant.color.css#d4145a
keyword.other.unit.css#9e4fa5
support.type.property-name.json#796c56
markup.heading, markup.heading entity.name, entity.name.section.markdown#c63f00bold
markup.bold#d4145abold
markup.italic#796c56italic
markup.inline.raw, markup.raw#227ba9
markup.underline.link#786d74
markup.quote#eb9b72italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme