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#142b15
  • activityBar.border#234d25
  • activityBar.foreground#76ff7b
  • activityBar.inactiveForeground#8fbb93
  • activityBarBadge.background#9e4fa5
  • activityBarBadge.foreground#f7f7f7
  • badge.background#76ff7b
  • badge.foreground#122612
  • breadcrumb.activeSelectionForeground#e0ebe1
  • breadcrumb.focusForeground#e0ebe1
  • breadcrumb.foreground#8fbb93
  • button.background#76ff7b
  • button.foreground#122612
  • button.hoverBackground#84ff88
  • button.secondaryBackground#1a381b
  • button.secondaryForeground#e0ebe1
  • descriptionForeground#8fbb93
  • dropdown.background#142b15
  • dropdown.border#234d25
  • dropdown.foreground#e0ebe1
  • editor.background#0e1f0f
  • editor.findMatchBackground#1464a066
  • editor.findMatchHighlightBackground#1464a033
  • editor.foreground#e0ebe1
  • editor.inactiveSelectionBackground#76ff7b26
  • editor.lineHighlightBackground#76ff7b1a
  • editor.lineHighlightBorder#76ff7b00
  • editor.selectionBackground#76ff7b4d
  • editor.wordHighlightBackground#76ff7b33
  • editorBracketMatch.background#76ff7b40
  • editorBracketMatch.border#76ff7b99
  • editorCursor.foreground#76ff7b
  • editorError.foreground#dd4132
  • editorGroup.border#234d25
  • editorGroupHeader.tabsBackground#142b15
  • editorGroupHeader.tabsBorder#234d25
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e0ebe133
  • editorIndentGuide.background#e0ebe114
  • editorInfo.foreground#9e4fa5
  • editorLineNumber.activeForeground#e0ebe1
  • editorLineNumber.foreground#8fbb93
  • editorRuler.foreground#e0ebe114
  • editorSuggestWidget.selectedBackground#76ff7b40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e0ebe11a
  • editorWidget.background#142b15
  • editorWidget.border#234d25
  • focusBorder#76ff7b99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#8fbb93
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#8fbb93
  • input.background#142b15
  • input.border#234d25
  • input.foreground#e0ebe1
  • input.placeholderForeground#8fbb93
  • inputOption.activeBorder#76ff7b
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#9e4fa5
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#76ff7b4d
  • list.activeSelectionForeground#e0ebe1
  • list.focusBackground#76ff7b33
  • list.highlightForeground#76ff7b
  • list.hoverBackground#76ff7b26
  • list.inactiveSelectionBackground#76ff7b26
  • minimap.background#0e1f0f
  • minimap.findMatchHighlight#1464a099
  • minimap.selectionHighlight#76ff7b66
  • notificationLink.foreground#76ff7b
  • notifications.background#1a381b
  • notifications.foreground#e0ebe1
  • panel.background#142b15
  • panel.border#234d25
  • panelTitle.activeBorder#76ff7b
  • panelTitle.activeForeground#e0ebe1
  • panelTitle.inactiveForeground#8fbb93
  • peekView.border#76ff7b
  • peekViewEditor.background#142b15
  • peekViewResult.background#1a381b
  • peekViewTitle.background#142b15
  • progressBar.background#76ff7b
  • scrollbar.shadow#0c190c45
  • scrollbarSlider.activeBackground#e0ebe159
  • scrollbarSlider.background#e0ebe11f
  • scrollbarSlider.hoverBackground#e0ebe140
  • selection.background#76ff7b4d
  • sideBar.background#1a381b
  • sideBar.border#234d25
  • sideBar.foreground#e0ebe1
  • sideBarSectionHeader.background#76ff7b26
  • sideBarSectionHeader.foreground#e0ebe1
  • sideBarTitle.foreground#e0ebe1
  • statusBar.background#47994a
  • statusBar.border#234d25
  • statusBar.debuggingBackground#9e4fa5
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#adffb0
  • statusBar.noFolderBackground#142b15
  • statusBarItem.hoverBackground#76ff7b4d
  • statusBarItem.remoteBackground#76ff7b
  • statusBarItem.remoteForeground#122612
  • tab.activeBackground#0e1f0f
  • tab.activeBorder#76ff7b
  • tab.activeBorderTop#76ff7b00
  • tab.activeForeground#e0ebe1
  • tab.border#234d25
  • tab.inactiveBackground#142b15
  • tab.inactiveForeground#8fbb93
  • terminal.ansiBlack#0e1f0f
  • terminal.ansiBlue#43a67e
  • terminal.ansiBrightBlack#8fbb93
  • 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#e0ebe1
  • terminal.ansiYellow#efc050
  • terminal.background#142b15
  • terminal.foreground#e0ebe1
  • terminalCursor.foreground#76ff7b
  • textLink.activeForeground#ad69b3
  • textLink.foreground#9e4fa5
  • titleBar.activeBackground#142b15
  • titleBar.activeForeground#e0ebe1
  • titleBar.border#234d25
  • titleBar.inactiveBackground#142b15
  • titleBar.inactiveForeground#8fbb93

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#8fbb93italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#76ff7bbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#76ff7bbold
storage.type, storage.modifier#76ff7bbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#b476b9
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#76ff7b
string.regexp#b476b9
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5790bb
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#86d0bfbold
variable.other.constant, variable.other.enummember#86d0bfbold
constant.character.escape#8bff8f
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#00b140italic
entity.name.type.parameter#00b140italic
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#e0ebe1
variable.parameter#e0ebe1italic
variable.language, variable.language.this, variable.language.self, variable.language.super#76ff7bitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#e0ebe1
entity.name.class, entity.name.type.class, support.class#d4c19cbold italic
entity.other.inherited-class#d4c19citalic
entity.name.tag, punctuation.definition.tag#76ff7bbold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#8bff8f
punctuation, punctuation.separator, punctuation.terminator, meta.brace#8fbb93
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#00b140italic
support.type.property-name.css, support.type.vendored.property-name.css#00b140
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#d4c19cbold
support.constant.property-value.css, support.constant.color.css#86d0bf
keyword.other.unit.css#5790bb
support.type.property-name.json#00b140
markup.heading, markup.heading entity.name, entity.name.section.markdown#76ff7bbold
markup.bold#86d0bfbold
markup.italic#00b140italic
markup.inline.raw, markup.raw#b476b9
markup.underline.link#f7cac9
markup.quote#8fbb93italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme