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#192807
  • activityBar.border#29410b
  • activityBar.foreground#78be20
  • activityBar.inactiveForeground#808b40
  • activityBarBadge.background#9063cd
  • activityBarBadge.foreground#f5f4f1
  • badge.background#78be20
  • badge.foreground#121d05
  • breadcrumb.activeSelectionForeground#dcddca
  • breadcrumb.focusForeground#dcddca
  • breadcrumb.foreground#808b40
  • button.background#78be20
  • button.foreground#121d05
  • button.hoverBackground#86c536
  • button.secondaryBackground#1f3108
  • button.secondaryForeground#dcddca
  • descriptionForeground#808b40
  • dropdown.background#192807
  • dropdown.border#29410b
  • dropdown.foreground#dcddca
  • editor.background#131e05
  • editor.findMatchBackground#00b5cc66
  • editor.findMatchHighlightBackground#00b5cc33
  • editor.foreground#dcddca
  • editor.inactiveSelectionBackground#78be2026
  • editor.lineHighlightBackground#78be201a
  • editor.lineHighlightBorder#78be2000
  • editor.selectionBackground#78be204d
  • editor.wordHighlightBackground#78be2033
  • editorBracketMatch.background#78be2040
  • editorBracketMatch.border#78be2099
  • editorCursor.foreground#78be20
  • editorError.foreground#dd4132
  • editorGroup.border#29410b
  • editorGroupHeader.tabsBackground#192807
  • editorGroupHeader.tabsBorder#29410b
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dcddca33
  • editorIndentGuide.background#dcddca14
  • editorInfo.foreground#9063cd
  • editorLineNumber.activeForeground#dcddca
  • editorLineNumber.foreground#808b40
  • editorRuler.foreground#dcddca14
  • editorSuggestWidget.selectedBackground#78be2040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dcddca1a
  • editorWidget.background#192807
  • editorWidget.border#29410b
  • focusBorder#78be2099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#808b40
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#808b40
  • input.background#192807
  • input.border#29410b
  • input.foreground#dcddca
  • input.placeholderForeground#808b40
  • inputOption.activeBorder#78be20
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#9063cd
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#78be204d
  • list.activeSelectionForeground#dcddca
  • list.focusBackground#78be2033
  • list.highlightForeground#78be20
  • list.hoverBackground#78be2026
  • list.inactiveSelectionBackground#78be2026
  • minimap.background#131e05
  • minimap.findMatchHighlight#00b5cc99
  • minimap.selectionHighlight#78be2066
  • notificationLink.foreground#78be20
  • notifications.background#1f3108
  • notifications.foreground#dcddca
  • panel.background#192807
  • panel.border#29410b
  • panelTitle.activeBorder#78be20
  • panelTitle.activeForeground#dcddca
  • panelTitle.inactiveForeground#808b40
  • peekView.border#78be20
  • peekViewEditor.background#192807
  • peekViewResult.background#1f3108
  • peekViewTitle.background#192807
  • progressBar.background#78be20
  • scrollbar.shadow#0c130345
  • scrollbarSlider.activeBackground#dcddca59
  • scrollbarSlider.background#dcddca1f
  • scrollbarSlider.hoverBackground#dcddca40
  • selection.background#78be204d
  • sideBar.background#1f3108
  • sideBar.border#29410b
  • sideBar.foreground#dcddca
  • sideBarSectionHeader.background#78be2026
  • sideBarSectionHeader.foreground#dcddca
  • sideBarTitle.foreground#dcddca
  • statusBar.background#487213
  • statusBar.border#29410b
  • statusBar.debuggingBackground#9063cd
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#aed879
  • statusBar.noFolderBackground#192807
  • statusBarItem.hoverBackground#78be204d
  • statusBarItem.remoteBackground#78be20
  • statusBarItem.remoteForeground#121d05
  • tab.activeBackground#131e05
  • tab.activeBorder#78be20
  • tab.activeBorderTop#78be2000
  • tab.activeForeground#dcddca
  • tab.border#29410b
  • tab.inactiveBackground#192807
  • tab.inactiveForeground#808b40
  • terminal.ansiBlack#131e05
  • terminal.ansiBlue#448551
  • terminal.ansiBrightBlack#808b40
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f4f1
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#dcddca
  • terminal.ansiYellow#efc050
  • terminal.background#192807
  • terminal.foreground#dcddca
  • terminalCursor.foreground#78be20
  • textLink.activeForeground#a17ad5
  • textLink.foreground#9063cd
  • titleBar.activeBackground#192807
  • titleBar.activeForeground#dcddca
  • titleBar.border#29410b
  • titleBar.inactiveBackground#192807
  • titleBar.inactiveForeground#808b40

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#808b40italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#78be20bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#78be20bold
storage.type, storage.modifier#78be20bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#996fd1
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#78be20
string.regexp#996fd1
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#00b5cc
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#ffc72cbold
variable.other.constant, variable.other.enummember#ffc72cbold
constant.character.escape#8cc841
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#4e9a2fitalic
entity.name.type.parameter#4e9a2fitalic
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#dcddca
variable.parameter#dcddcaitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#78be20italic
variable.other.property, variable.other.object.property, meta.object-literal.key#dcddca
entity.name.class, entity.name.type.class, support.class#009473bold italic
entity.other.inherited-class#009473italic
entity.name.tag, punctuation.definition.tag#78be20bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#8cc841
punctuation, punctuation.separator, punctuation.terminator, meta.brace#808b40
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#4e9a2fitalic
support.type.property-name.css, support.type.vendored.property-name.css#4e9a2f
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#009473bold
support.constant.property-value.css, support.constant.color.css#ffc72c
keyword.other.unit.css#00b5cc
support.type.property-name.json#4e9a2f
markup.heading, markup.heading entity.name, entity.name.section.markdown#78be20bold
markup.bold#ffc72cbold
markup.italic#4e9a2fitalic
markup.inline.raw, markup.raw#996fd1
markup.underline.link#f7cac9
markup.quote#808b40italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme