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#e9e8de
  • activityBar.border#c9caa8
  • activityBar.foreground#79ac00
  • activityBar.inactiveForeground#8c9c2f
  • activityBarBadge.background#56447d
  • activityBarBadge.foreground#f5f4f1
  • badge.background#79ac00
  • badge.foreground#212f00
  • breadcrumb.activeSelectionForeground#212f00
  • breadcrumb.focusForeground#212f00
  • breadcrumb.foreground#8c9c2f
  • button.background#79ac00
  • button.foreground#212f00
  • button.hoverBackground#6d9b00
  • button.secondaryBackground#e9e8de
  • button.secondaryForeground#212f00
  • descriptionForeground#8c9c2f
  • dropdown.background#f8f7f4
  • dropdown.border#c9caa8
  • dropdown.foreground#212f00
  • editor.background#f8f7f4
  • editor.findMatchBackground#86d0bf59
  • editor.findMatchHighlightBackground#86d0bf26
  • editor.foreground#212f00
  • editor.inactiveSelectionBackground#79ac001a
  • editor.lineHighlightBackground#79ac0014
  • editor.lineHighlightBorder#79ac0000
  • editor.selectionBackground#79ac0033
  • editor.wordHighlightBackground#79ac0026
  • editorBracketMatch.background#79ac0033
  • editorBracketMatch.border#79ac0080
  • editorCursor.foreground#79ac00
  • editorError.foreground#bf1932
  • editorGroup.border#c9caa8
  • editorGroupHeader.tabsBackground#f0f0e9
  • editorGroupHeader.tabsBorder#c9caa8
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#212f002e
  • editorIndentGuide.background#212f0014
  • editorInfo.foreground#56447d
  • editorLineNumber.activeForeground#212f00
  • editorLineNumber.foreground#8c9c2f
  • editorRuler.foreground#212f0014
  • editorSuggestWidget.selectedBackground#79ac0026
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#212f001a
  • editorWidget.background#f8f7f4
  • editorWidget.border#c9caa8
  • focusBorder#79ac0080
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#8c9c2f
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#8c9c2f
  • input.background#f8f7f4
  • input.border#c9caa8
  • input.foreground#212f00
  • input.placeholderForeground#8c9c2f
  • inputOption.activeBorder#79ac00
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#56447d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#79ac0033
  • list.activeSelectionForeground#212f00
  • list.focusBackground#79ac0026
  • list.highlightForeground#79ac00
  • list.hoverBackground#79ac001a
  • list.inactiveSelectionBackground#79ac001a
  • minimap.background#f8f7f4
  • minimap.findMatchHighlight#86d0bf80
  • minimap.selectionHighlight#79ac004d
  • notificationLink.foreground#79ac00
  • notifications.background#f8f7f4
  • notifications.foreground#212f00
  • panel.background#f0f0e9
  • panel.border#c9caa8
  • panelTitle.activeBorder#79ac00
  • panelTitle.activeForeground#212f00
  • panelTitle.inactiveForeground#8c9c2f
  • peekView.border#79ac00
  • peekViewEditor.background#f0f0e9
  • peekViewResult.background#e9e8de
  • peekViewTitle.background#f0f0e9
  • progressBar.background#79ac00
  • scrollbar.shadow#0f150014
  • scrollbarSlider.activeBackground#212f004d
  • scrollbarSlider.background#212f001a
  • scrollbarSlider.hoverBackground#212f0033
  • selection.background#79ac0033
  • sideBar.background#f0f0e9
  • sideBar.border#c9caa8
  • sideBar.foreground#212f00
  • sideBarSectionHeader.background#79ac001a
  • sideBarSectionHeader.foreground#212f00
  • sideBarTitle.foreground#212f00
  • statusBar.background#79ac00
  • statusBar.border#c9caa8
  • statusBar.debuggingBackground#56447d
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#212f00
  • statusBar.noFolderBackground#e9e8de
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#679200
  • statusBarItem.remoteForeground#212f00
  • tab.activeBackground#f8f7f4
  • tab.activeBorder#79ac00
  • tab.activeBorderTop#79ac0000
  • tab.activeForeground#212f00
  • tab.border#c9caa8
  • tab.inactiveBackground#f0f0e9
  • tab.inactiveForeground#8c9c2f
  • terminal.ansiBlack#212f00
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#8c9c2f
  • 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#f0f0e9
  • terminal.foreground#212f00
  • terminalCursor.foreground#79ac00
  • textLink.activeForeground#4c3c6f
  • textLink.foreground#56447d
  • titleBar.activeBackground#f0f0e9
  • titleBar.activeForeground#212f00
  • titleBar.border#c9caa8
  • titleBar.inactiveBackground#f0f0e9
  • titleBar.inactiveForeground#8c9c2f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#8c9c2fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#557900bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#557900bold
storage.type, storage.modifier#557900bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#5f4b8b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#557900
string.regexp#5f4b8b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4b746b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8d6930bold
variable.other.constant, variable.other.enummember#8d6930bold
constant.character.escape#5e7a15
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#6c6e1fitalic
entity.name.type.parameter#6c6e1fitalic
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#212f00
variable.parameter#212f00italic
variable.language, variable.language.this, variable.language.self, variable.language.super#557900italic
variable.other.property, variable.other.object.property, meta.object-literal.key#212f00
entity.name.class, entity.name.type.class, support.class#7c2029bold italic
entity.other.inherited-class#7c2029italic
entity.name.tag, punctuation.definition.tag#557900bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#5e7a15
punctuation, punctuation.separator, punctuation.terminator, meta.brace#8c9c2f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#6c6e1fitalic
support.type.property-name.css, support.type.vendored.property-name.css#6c6e1f
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7c2029bold
support.constant.property-value.css, support.constant.color.css#8d6930
keyword.other.unit.css#4b746b
support.type.property-name.json#6c6e1f
markup.heading, markup.heading entity.name, entity.name.section.markdown#557900bold
markup.bold#8d6930bold
markup.italic#6c6e1fitalic
markup.inline.raw, markup.raw#5f4b8b
markup.underline.link#786d74
markup.quote#8c9c2fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme