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#2b1d0d
  • activityBar.border#4d3317
  • activityBar.foreground#ffaa4d
  • activityBar.inactiveForeground#e8c39c
  • activityBarBadge.background#9bb7d4
  • activityBarBadge.foreground#fcfbfa
  • badge.background#ffaa4d
  • badge.foreground#261a0c
  • breadcrumb.activeSelectionForeground#f8eee5
  • breadcrumb.focusForeground#f8eee5
  • breadcrumb.foreground#e8c39c
  • button.background#ffaa4d
  • button.foreground#261a0c
  • button.hoverBackground#ffb35f
  • button.secondaryBackground#382511
  • button.secondaryForeground#f8eee5
  • descriptionForeground#e8c39c
  • dropdown.background#2b1d0d
  • dropdown.border#4d3317
  • dropdown.foreground#f8eee5
  • editor.background#1f1409
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#f8eee5
  • editor.inactiveSelectionBackground#ffaa4d26
  • editor.lineHighlightBackground#ffaa4d1a
  • editor.lineHighlightBorder#ffaa4d00
  • editor.selectionBackground#ffaa4d4d
  • editor.wordHighlightBackground#ffaa4d33
  • editorBracketMatch.background#ffaa4d40
  • editorBracketMatch.border#ffaa4d99
  • editorCursor.foreground#ffaa4d
  • editorError.foreground#dd4132
  • editorGroup.border#4d3317
  • editorGroupHeader.tabsBackground#2b1d0d
  • editorGroupHeader.tabsBorder#4d3317
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f8eee533
  • editorIndentGuide.background#f8eee514
  • editorInfo.foreground#9bb7d4
  • editorLineNumber.activeForeground#f8eee5
  • editorLineNumber.foreground#e8c39c
  • editorRuler.foreground#f8eee514
  • editorSuggestWidget.selectedBackground#ffaa4d40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f8eee51a
  • editorWidget.background#2b1d0d
  • editorWidget.border#4d3317
  • focusBorder#ffaa4d99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#e8c39c
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#e8c39c
  • input.background#2b1d0d
  • input.border#4d3317
  • input.foreground#f8eee5
  • input.placeholderForeground#e8c39c
  • inputOption.activeBorder#ffaa4d
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#9bb7d4
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#ffaa4d4d
  • list.activeSelectionForeground#f8eee5
  • list.focusBackground#ffaa4d33
  • list.highlightForeground#ffaa4d
  • list.hoverBackground#ffaa4d26
  • list.inactiveSelectionBackground#ffaa4d26
  • minimap.background#1f1409
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#ffaa4d66
  • notificationLink.foreground#ffaa4d
  • notifications.background#382511
  • notifications.foreground#f8eee5
  • panel.background#2b1d0d
  • panel.border#4d3317
  • panelTitle.activeBorder#ffaa4d
  • panelTitle.activeForeground#f8eee5
  • panelTitle.inactiveForeground#e8c39c
  • peekView.border#ffaa4d
  • peekViewEditor.background#2b1d0d
  • peekViewResult.background#382511
  • peekViewTitle.background#2b1d0d
  • progressBar.background#ffaa4d
  • scrollbar.shadow#19110845
  • scrollbarSlider.activeBackground#f8eee559
  • scrollbarSlider.background#f8eee51f
  • scrollbarSlider.hoverBackground#f8eee540
  • selection.background#ffaa4d4d
  • sideBar.background#382511
  • sideBar.border#4d3317
  • sideBar.foreground#f8eee5
  • sideBarSectionHeader.background#ffaa4d26
  • sideBarSectionHeader.foreground#f8eee5
  • sideBarTitle.foreground#f8eee5
  • statusBar.background#99662e
  • statusBar.border#4d3317
  • statusBar.debuggingBackground#9bb7d4
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#ffcc94
  • statusBar.noFolderBackground#2b1d0d
  • statusBarItem.hoverBackground#ffaa4d4d
  • statusBarItem.remoteBackground#ffaa4d
  • statusBarItem.remoteForeground#261a0c
  • tab.activeBackground#1f1409
  • tab.activeBorder#ffaa4d
  • tab.activeBorderTop#ffaa4d00
  • tab.activeForeground#f8eee5
  • tab.border#4d3317
  • tab.inactiveBackground#2b1d0d
  • tab.inactiveForeground#e8c39c
  • terminal.ansiBlack#1f1409
  • terminal.ansiBlue#877b67
  • terminal.ansiBrightBlack#e8c39c
  • 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#f8eee5
  • terminal.ansiYellow#efc050
  • terminal.background#2b1d0d
  • terminal.foreground#f8eee5
  • terminalCursor.foreground#ffaa4d
  • textLink.activeForeground#aac2da
  • textLink.foreground#9bb7d4
  • titleBar.activeBackground#2b1d0d
  • titleBar.activeForeground#f8eee5
  • titleBar.border#4d3317
  • titleBar.inactiveBackground#2b1d0d
  • titleBar.inactiveForeground#e8c39c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e8c39citalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ffaa4dbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ffaa4dbold
storage.type, storage.modifier#ffaa4dbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#9bb7d4
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ffaa4d
string.regexp#9bb7d4
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a474bf
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#c06875bold
variable.other.constant, variable.other.enummember#c06875bold
constant.character.escape#ffb768
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#f7a08bitalic
entity.name.type.parameter#f7a08bitalic
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#f8eee5
variable.parameter#f8eee5italic
variable.language, variable.language.this, variable.language.self, variable.language.super#ffaa4ditalic
variable.other.property, variable.other.object.property, meta.object-literal.key#f8eee5
entity.name.class, entity.name.type.class, support.class#b76faabold italic
entity.other.inherited-class#b76faaitalic
entity.name.tag, punctuation.definition.tag#ffaa4dbold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ffb768
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e8c39c
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#f7a08bitalic
support.type.property-name.css, support.type.vendored.property-name.css#f7a08b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b76faabold
support.constant.property-value.css, support.constant.color.css#c06875
keyword.other.unit.css#a474bf
support.type.property-name.json#f7a08b
markup.heading, markup.heading entity.name, entity.name.section.markdown#ffaa4dbold
markup.bold#c06875bold
markup.italic#f7a08bitalic
markup.inline.raw, markup.raw#9bb7d4
markup.underline.link#76ff7b
markup.quote#e8c39citalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme