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#220b09
  • activityBar.border#36120f
  • activityBar.foreground#a0342b
  • activityBar.inactiveForeground#cb9f92
  • activityBarBadge.background#00b5cc
  • activityBarBadge.foreground#fcfbfa
  • badge.background#a0342b
  • badge.foreground#fcfbfa
  • breadcrumb.activeSelectionForeground#f2e6e2
  • breadcrumb.focusForeground#f2e6e2
  • breadcrumb.foreground#cb9f92
  • button.background#a0342b
  • button.foreground#fcfbfa
  • button.hoverBackground#aa4840
  • button.secondaryBackground#2a0e0b
  • button.secondaryForeground#f2e6e2
  • descriptionForeground#cb9f92
  • dropdown.background#220b09
  • dropdown.border#36120f
  • dropdown.foreground#f2e6e2
  • editor.background#1a0807
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#f2e6e2
  • editor.inactiveSelectionBackground#a0342b26
  • editor.lineHighlightBackground#a0342b1a
  • editor.lineHighlightBorder#a0342b00
  • editor.selectionBackground#a0342b4d
  • editor.wordHighlightBackground#a0342b33
  • editorBracketMatch.background#a0342b40
  • editorBracketMatch.border#a0342b99
  • editorCursor.foreground#a0342b
  • editorError.foreground#dd4132
  • editorGroup.border#36120f
  • editorGroupHeader.tabsBackground#220b09
  • editorGroupHeader.tabsBorder#36120f
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f2e6e233
  • editorIndentGuide.background#f2e6e214
  • editorInfo.foreground#00b5cc
  • editorLineNumber.activeForeground#f2e6e2
  • editorLineNumber.foreground#cb9f92
  • editorRuler.foreground#f2e6e214
  • editorSuggestWidget.selectedBackground#a0342b40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f2e6e21a
  • editorWidget.background#220b09
  • editorWidget.border#36120f
  • focusBorder#a0342b99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#cb9f92
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#cb9f92
  • input.background#220b09
  • input.border#36120f
  • input.foreground#f2e6e2
  • input.placeholderForeground#cb9f92
  • inputOption.activeBorder#a0342b
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#00b5cc
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#a0342b4d
  • list.activeSelectionForeground#f2e6e2
  • list.focusBackground#a0342b33
  • list.highlightForeground#a0342b
  • list.hoverBackground#a0342b26
  • list.inactiveSelectionBackground#a0342b26
  • minimap.background#1a0807
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#a0342b66
  • notificationLink.foreground#a0342b
  • notifications.background#2a0e0b
  • notifications.foreground#f2e6e2
  • panel.background#220b09
  • panel.border#36120f
  • panelTitle.activeBorder#a0342b
  • panelTitle.activeForeground#f2e6e2
  • panelTitle.inactiveForeground#cb9f92
  • peekView.border#a0342b
  • peekViewEditor.background#220b09
  • peekViewResult.background#2a0e0b
  • peekViewTitle.background#220b09
  • progressBar.background#a0342b
  • scrollbar.shadow#10050445
  • scrollbarSlider.activeBackground#f2e6e259
  • scrollbarSlider.background#f2e6e21f
  • scrollbarSlider.hoverBackground#f2e6e240
  • selection.background#a0342b4d
  • sideBar.background#2a0e0b
  • sideBar.border#36120f
  • sideBar.foreground#f2e6e2
  • sideBarSectionHeader.background#a0342b26
  • sideBarSectionHeader.foreground#f2e6e2
  • sideBarTitle.foreground#f2e6e2
  • statusBar.background#601f1a
  • statusBar.border#36120f
  • statusBar.debuggingBackground#00b5cc
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#c68580
  • statusBar.noFolderBackground#220b09
  • statusBarItem.hoverBackground#a0342b4d
  • statusBarItem.remoteBackground#a0342b
  • statusBarItem.remoteForeground#fcfbfa
  • tab.activeBackground#1a0807
  • tab.activeBorder#a0342b
  • tab.activeBorderTop#a0342b00
  • tab.activeForeground#f2e6e2
  • tab.border#36120f
  • tab.inactiveBackground#220b09
  • tab.inactiveForeground#cb9f92
  • terminal.ansiBlack#1a0807
  • terminal.ansiBlue#584056
  • terminal.ansiBrightBlack#cb9f92
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#f2e6e2
  • terminal.ansiYellow#efc050
  • terminal.background#220b09
  • terminal.foreground#f2e6e2
  • terminalCursor.foreground#a0342b
  • textLink.activeForeground#26c0d4
  • textLink.foreground#00b5cc
  • titleBar.activeBackground#220b09
  • titleBar.activeForeground#f2e6e2
  • titleBar.border#36120f
  • titleBar.inactiveBackground#220b09
  • titleBar.inactiveForeground#cb9f92

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#cb9f92italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#bb6e67bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#bb6e67bold
storage.type, storage.modifier#bb6e67bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#00b5cc
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#bb6e67
string.regexp#00b5cc
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9c68b9
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#95738abold
variable.other.constant, variable.other.enummember#95738abold
constant.character.escape#ba6d66
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#c06878italic
entity.name.type.parameter#c06878italic
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#f2e6e2
variable.parameter#f2e6e2italic
variable.language, variable.language.this, variable.language.self, variable.language.super#bb6e67italic
variable.other.property, variable.other.object.property, meta.object-literal.key#f2e6e2
entity.name.class, entity.name.type.class, support.class#78be20bold italic
entity.other.inherited-class#78be20italic
entity.name.tag, punctuation.definition.tag#bb6e67bold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ba6d66
punctuation, punctuation.separator, punctuation.terminator, meta.brace#cb9f92
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#c06878italic
support.type.property-name.css, support.type.vendored.property-name.css#c06878
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#78be20bold
support.constant.property-value.css, support.constant.color.css#95738a
keyword.other.unit.css#9c68b9
support.type.property-name.json#c06878
markup.heading, markup.heading entity.name, entity.name.section.markdown#bb6e67bold
markup.bold#95738abold
markup.italic#c06878italic
markup.inline.raw, markup.raw#00b5cc
markup.underline.link#76ff7b
markup.quote#cb9f92italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme