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#00250d
  • activityBar.border#003c16
  • activityBar.foreground#00b140
  • activityBar.inactiveForeground#6ca481
  • activityBarBadge.background#5e2b4e
  • activityBarBadge.foreground#f7f7f7
  • badge.background#00b140
  • badge.foreground#001b0a
  • breadcrumb.activeSelectionForeground#d8e5dd
  • breadcrumb.focusForeground#d8e5dd
  • breadcrumb.foreground#6ca481
  • button.background#00b140
  • button.foreground#001b0a
  • button.hoverBackground#1ab953
  • button.secondaryBackground#002e11
  • button.secondaryForeground#d8e5dd
  • descriptionForeground#6ca481
  • dropdown.background#00250d
  • dropdown.border#003c16
  • dropdown.foreground#d8e5dd
  • editor.background#001c0a
  • editor.findMatchBackground#1b368c66
  • editor.findMatchHighlightBackground#1b368c33
  • editor.foreground#d8e5dd
  • editor.inactiveSelectionBackground#00b14026
  • editor.lineHighlightBackground#00b1401a
  • editor.lineHighlightBorder#00b14000
  • editor.selectionBackground#00b1404d
  • editor.wordHighlightBackground#00b14033
  • editorBracketMatch.background#00b14040
  • editorBracketMatch.border#00b14099
  • editorCursor.foreground#00b140
  • editorError.foreground#dd4132
  • editorGroup.border#003c16
  • editorGroupHeader.tabsBackground#00250d
  • editorGroupHeader.tabsBorder#003c16
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d8e5dd33
  • editorIndentGuide.background#d8e5dd14
  • editorInfo.foreground#5e2b4e
  • editorLineNumber.activeForeground#d8e5dd
  • editorLineNumber.foreground#6ca481
  • editorRuler.foreground#d8e5dd14
  • editorSuggestWidget.selectedBackground#00b14040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d8e5dd1a
  • editorWidget.background#00250d
  • editorWidget.border#003c16
  • focusBorder#00b14099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#6ca481
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#6ca481
  • input.background#00250d
  • input.border#003c16
  • input.foreground#d8e5dd
  • input.placeholderForeground#6ca481
  • inputOption.activeBorder#00b140
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#5e2b4e
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#00b1404d
  • list.activeSelectionForeground#d8e5dd
  • list.focusBackground#00b14033
  • list.highlightForeground#00b140
  • list.hoverBackground#00b14026
  • list.inactiveSelectionBackground#00b14026
  • minimap.background#001c0a
  • minimap.findMatchHighlight#1b368c99
  • minimap.selectionHighlight#00b14066
  • notificationLink.foreground#00b140
  • notifications.background#002e11
  • notifications.foreground#d8e5dd
  • panel.background#00250d
  • panel.border#003c16
  • panelTitle.activeBorder#00b140
  • panelTitle.activeForeground#d8e5dd
  • panelTitle.inactiveForeground#6ca481
  • peekView.border#00b140
  • peekViewEditor.background#00250d
  • peekViewResult.background#002e11
  • peekViewTitle.background#00250d
  • progressBar.background#00b140
  • scrollbar.shadow#00120645
  • scrollbarSlider.activeBackground#d8e5dd59
  • scrollbarSlider.background#d8e5dd1f
  • scrollbarSlider.hoverBackground#d8e5dd40
  • selection.background#00b1404d
  • sideBar.background#002e11
  • sideBar.border#003c16
  • sideBar.foreground#d8e5dd
  • sideBarSectionHeader.background#00b14026
  • sideBarSectionHeader.foreground#d8e5dd
  • sideBarTitle.foreground#d8e5dd
  • statusBar.background#006a26
  • statusBar.border#003c16
  • statusBar.debuggingBackground#5e2b4e
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#66d08c
  • statusBar.noFolderBackground#00250d
  • statusBarItem.hoverBackground#00b1404d
  • statusBarItem.remoteBackground#00b140
  • statusBarItem.remoteForeground#001b0a
  • tab.activeBackground#001c0a
  • tab.activeBorder#00b140
  • tab.activeBorderTop#00b14000
  • tab.activeForeground#d8e5dd
  • tab.border#003c16
  • tab.inactiveBackground#00250d
  • tab.inactiveForeground#6ca481
  • terminal.ansiBlack#001c0a
  • terminal.ansiBlue#087f61
  • terminal.ansiBrightBlack#6ca481
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#d8e5dd
  • terminal.ansiYellow#efc050
  • terminal.background#00250d
  • terminal.foreground#d8e5dd
  • terminalCursor.foreground#00b140
  • textLink.activeForeground#764b69
  • textLink.foreground#5e2b4e
  • titleBar.activeBackground#00250d
  • titleBar.activeForeground#d8e5dd
  • titleBar.border#003c16
  • titleBar.inactiveBackground#00250d
  • titleBar.inactiveForeground#6ca481

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#6ca481italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#00b140bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#00b140bold
storage.type, storage.modifier#00b140bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#9d7e93
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#00b140
string.regexp#9d7e93
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#7486b9
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#00b5ccbold
variable.other.constant, variable.other.enummember#00b5ccbold
constant.character.escape#26bd5d
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#76ff7bitalic
entity.name.type.parameter#76ff7bitalic
entity.name.function, meta.function entity.name.function#f7cac9bold
meta.function-call entity.name.function, support.function#f7cac9
meta.method-call entity.name.function, entity.name.function.member#f7cac9
variable, variable.other, variable.other.readwrite#d8e5dd
variable.parameter#d8e5dditalic
variable.language, variable.language.this, variable.language.self, variable.language.super#00b140italic
variable.other.property, variable.other.object.property, meta.object-literal.key#d8e5dd
entity.name.class, entity.name.type.class, support.class#e8e835bold italic
entity.other.inherited-class#e8e835italic
entity.name.tag, punctuation.definition.tag#00b140bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#26bd5d
punctuation, punctuation.separator, punctuation.terminator, meta.brace#6ca481
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#76ff7bitalic
support.type.property-name.css, support.type.vendored.property-name.css#76ff7b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e8e835bold
support.constant.property-value.css, support.constant.color.css#00b5cc
keyword.other.unit.css#7486b9
support.type.property-name.json#76ff7b
markup.heading, markup.heading entity.name, entity.name.section.markdown#00b140bold
markup.bold#00b5ccbold
markup.italic#76ff7bitalic
markup.inline.raw, markup.raw#9d7e93
markup.underline.link#f7cac9
markup.quote#6ca481italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme