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#e9e7df
  • activityBar.border#c8c6af
  • activityBar.foreground#6d8d3c
  • activityBar.inactiveForeground#868d4d
  • activityBarBadge.background#8259b9
  • activityBarBadge.foreground#f5f4f1
  • badge.background#6d8d3c
  • badge.foreground#1e2710
  • breadcrumb.activeSelectionForeground#1e2710
  • breadcrumb.focusForeground#1e2710
  • breadcrumb.foreground#868d4d
  • button.background#6d8d3c
  • button.foreground#1e2710
  • button.hoverBackground#627f36
  • button.secondaryBackground#e9e7df
  • button.secondaryForeground#1e2710
  • descriptionForeground#868d4d
  • dropdown.background#f8f7f4
  • dropdown.border#c8c6af
  • dropdown.foreground#1e2710
  • editor.background#f8f7f4
  • editor.findMatchBackground#86d0bf59
  • editor.findMatchHighlightBackground#86d0bf26
  • editor.foreground#1e2710
  • editor.inactiveSelectionBackground#6d8d3c1a
  • editor.lineHighlightBackground#6d8d3c14
  • editor.lineHighlightBorder#6d8d3c00
  • editor.selectionBackground#6d8d3c33
  • editor.wordHighlightBackground#6d8d3c26
  • editorBracketMatch.background#6d8d3c33
  • editorBracketMatch.border#6d8d3c80
  • editorCursor.foreground#6d8d3c
  • editorError.foreground#bf1932
  • editorGroup.border#c8c6af
  • editorGroupHeader.tabsBackground#f0efea
  • editorGroupHeader.tabsBorder#c8c6af
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1e27102e
  • editorIndentGuide.background#1e271014
  • editorInfo.foreground#8259b9
  • editorLineNumber.activeForeground#1e2710
  • editorLineNumber.foreground#868d4d
  • editorRuler.foreground#1e271014
  • editorSuggestWidget.selectedBackground#6d8d3c26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1e27101a
  • editorWidget.background#f8f7f4
  • editorWidget.border#c8c6af
  • focusBorder#6d8d3c80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#868d4d
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#868d4d
  • input.background#f8f7f4
  • input.border#c8c6af
  • input.foreground#1e2710
  • input.placeholderForeground#868d4d
  • inputOption.activeBorder#6d8d3c
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#8259b9
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#6d8d3c33
  • list.activeSelectionForeground#1e2710
  • list.focusBackground#6d8d3c26
  • list.highlightForeground#6d8d3c
  • list.hoverBackground#6d8d3c1a
  • list.inactiveSelectionBackground#6d8d3c1a
  • minimap.background#f8f7f4
  • minimap.findMatchHighlight#86d0bf80
  • minimap.selectionHighlight#6d8d3c4d
  • notificationLink.foreground#6d8d3c
  • notifications.background#f8f7f4
  • notifications.foreground#1e2710
  • panel.background#f0efea
  • panel.border#c8c6af
  • panelTitle.activeBorder#6d8d3c
  • panelTitle.activeForeground#1e2710
  • panelTitle.inactiveForeground#868d4d
  • peekView.border#6d8d3c
  • peekViewEditor.background#f0efea
  • peekViewResult.background#e9e7df
  • peekViewTitle.background#f0efea
  • progressBar.background#6d8d3c
  • scrollbar.shadow#0e120714
  • scrollbarSlider.activeBackground#1e27104d
  • scrollbarSlider.background#1e27101a
  • scrollbarSlider.hoverBackground#1e271033
  • selection.background#6d8d3c33
  • sideBar.background#f0efea
  • sideBar.border#c8c6af
  • sideBar.foreground#1e2710
  • sideBarSectionHeader.background#6d8d3c1a
  • sideBarSectionHeader.foreground#1e2710
  • sideBarTitle.foreground#1e2710
  • statusBar.background#6d8d3c
  • statusBar.border#c8c6af
  • statusBar.debuggingBackground#8259b9
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#1e2710
  • statusBar.noFolderBackground#e9e7df
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#5d7833
  • statusBarItem.remoteForeground#1e2710
  • tab.activeBackground#f8f7f4
  • tab.activeBorder#6d8d3c
  • tab.activeBorderTop#6d8d3c00
  • tab.activeForeground#1e2710
  • tab.border#c8c6af
  • tab.inactiveBackground#f0efea
  • tab.inactiveForeground#868d4d
  • terminal.ansiBlack#1e2710
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#868d4d
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f4f1
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f8f7f4
  • terminal.ansiYellow#d4a017
  • terminal.background#f0efea
  • terminal.foreground#1e2710
  • terminalCursor.foreground#6d8d3c
  • textLink.activeForeground#734fa4
  • textLink.foreground#8259b9
  • titleBar.activeBackground#f0efea
  • titleBar.activeForeground#1e2710
  • titleBar.border#c8c6af
  • titleBar.inactiveBackground#f0efea
  • titleBar.inactiveForeground#868d4d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#868d4ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#5a7431bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#5a7431bold
storage.type, storage.modifier#5a7431bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#845bbd
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#5a7431
string.regexp#845bbd
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4b746b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8c690fbold
variable.other.constant, variable.other.enummember#8c690fbold
constant.character.escape#5e713e
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#3d7925italic
entity.name.type.parameter#3d7925italic
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#1e2710
variable.parameter#1e2710italic
variable.language, variable.language.this, variable.language.self, variable.language.super#5a7431italic
variable.other.property, variable.other.object.property, meta.object-literal.key#1e2710
entity.name.class, entity.name.type.class, support.class#c2342dbold italic
entity.other.inherited-class#c2342ditalic
entity.name.tag, punctuation.definition.tag#5a7431bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#5e713e
punctuation, punctuation.separator, punctuation.terminator, meta.brace#868d4d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#3d7925italic
support.type.property-name.css, support.type.vendored.property-name.css#3d7925
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c2342dbold
support.constant.property-value.css, support.constant.color.css#8c690f
keyword.other.unit.css#4b746b
support.type.property-name.json#3d7925
markup.heading, markup.heading entity.name, entity.name.section.markdown#5a7431bold
markup.bold#8c690fbold
markup.italic#3d7925italic
markup.inline.raw, markup.raw#845bbd
markup.underline.link#786d74
markup.quote#868d4ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme