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#1d2510
  • activityBar.border#2e3c19
  • activityBar.foreground#88b04b
  • activityBar.inactiveForeground#85874d
  • activityBarBadge.background#9063cd
  • activityBarBadge.foreground#f5f4f1
  • badge.background#88b04b
  • badge.foreground#141a0b
  • breadcrumb.activeSelectionForeground#ddddcd
  • breadcrumb.focusForeground#ddddcd
  • breadcrumb.foreground#85874d
  • button.background#88b04b
  • button.foreground#141a0b
  • button.hoverBackground#94b85d
  • button.secondaryBackground#232e14
  • button.secondaryForeground#ddddcd
  • descriptionForeground#85874d
  • dropdown.background#1d2510
  • dropdown.border#2e3c19
  • dropdown.foreground#ddddcd
  • editor.background#161c0c
  • editor.findMatchBackground#86d0bf66
  • editor.findMatchHighlightBackground#86d0bf33
  • editor.foreground#ddddcd
  • editor.inactiveSelectionBackground#88b04b26
  • editor.lineHighlightBackground#88b04b1a
  • editor.lineHighlightBorder#88b04b00
  • editor.selectionBackground#88b04b4d
  • editor.wordHighlightBackground#88b04b33
  • editorBracketMatch.background#88b04b40
  • editorBracketMatch.border#88b04b99
  • editorCursor.foreground#88b04b
  • editorError.foreground#dd4132
  • editorGroup.border#2e3c19
  • editorGroupHeader.tabsBackground#1d2510
  • editorGroupHeader.tabsBorder#2e3c19
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#ddddcd33
  • editorIndentGuide.background#ddddcd14
  • editorInfo.foreground#9063cd
  • editorLineNumber.activeForeground#ddddcd
  • editorLineNumber.foreground#85874d
  • editorRuler.foreground#ddddcd14
  • editorSuggestWidget.selectedBackground#88b04b40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#ddddcd1a
  • editorWidget.background#1d2510
  • editorWidget.border#2e3c19
  • focusBorder#88b04b99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#85874d
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#85874d
  • input.background#1d2510
  • input.border#2e3c19
  • input.foreground#ddddcd
  • input.placeholderForeground#85874d
  • inputOption.activeBorder#88b04b
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#9063cd
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#88b04b4d
  • list.activeSelectionForeground#ddddcd
  • list.focusBackground#88b04b33
  • list.highlightForeground#88b04b
  • list.hoverBackground#88b04b26
  • list.inactiveSelectionBackground#88b04b26
  • minimap.background#161c0c
  • minimap.findMatchHighlight#86d0bf99
  • minimap.selectionHighlight#88b04b66
  • notificationLink.foreground#88b04b
  • notifications.background#232e14
  • notifications.foreground#ddddcd
  • panel.background#1d2510
  • panel.border#2e3c19
  • panelTitle.activeBorder#88b04b
  • panelTitle.activeForeground#ddddcd
  • panelTitle.inactiveForeground#85874d
  • peekView.border#88b04b
  • peekViewEditor.background#1d2510
  • peekViewResult.background#232e14
  • peekViewTitle.background#1d2510
  • progressBar.background#88b04b
  • scrollbar.shadow#0e120745
  • scrollbarSlider.activeBackground#ddddcd59
  • scrollbarSlider.background#ddddcd1f
  • scrollbarSlider.hoverBackground#ddddcd40
  • selection.background#88b04b4d
  • sideBar.background#232e14
  • sideBar.border#2e3c19
  • sideBar.foreground#ddddcd
  • sideBarSectionHeader.background#88b04b26
  • sideBarSectionHeader.foreground#ddddcd
  • sideBarTitle.foreground#ddddcd
  • statusBar.background#526a2d
  • statusBar.border#2e3c19
  • statusBar.debuggingBackground#9063cd
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#b8d093
  • statusBar.noFolderBackground#1d2510
  • statusBarItem.hoverBackground#88b04b4d
  • statusBarItem.remoteBackground#88b04b
  • statusBarItem.remoteForeground#141a0b
  • tab.activeBackground#161c0c
  • tab.activeBorder#88b04b
  • tab.activeBorderTop#88b04b00
  • tab.activeForeground#ddddcd
  • tab.border#2e3c19
  • tab.inactiveBackground#1d2510
  • tab.inactiveForeground#85874d
  • terminal.ansiBlack#161c0c
  • terminal.ansiBlue#4c7e66
  • terminal.ansiBrightBlack#85874d
  • 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#ddddcd
  • terminal.ansiYellow#efc050
  • terminal.background#1d2510
  • terminal.foreground#ddddcd
  • terminalCursor.foreground#88b04b
  • textLink.activeForeground#a17ad5
  • textLink.foreground#9063cd
  • titleBar.activeBackground#1d2510
  • titleBar.activeForeground#ddddcd
  • titleBar.border#2e3c19
  • titleBar.inactiveBackground#1d2510
  • titleBar.inactiveForeground#85874d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#85874ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#88b04bbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#88b04bbold
storage.type, storage.modifier#88b04bbold
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#88b04b
string.regexp#996fd1
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#86d0bf
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#d4a017bold
variable.other.constant, variable.other.enummember#d4a017bold
constant.character.escape#9abc66
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#e8d4e2bold
meta.function-call entity.name.function, support.function#e8d4e2
meta.method-call entity.name.function, entity.name.function.member#e8d4e2
variable, variable.other, variable.other.readwrite#ddddcd
variable.parameter#ddddcditalic
variable.language, variable.language.this, variable.language.self, variable.language.super#88b04bitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#ddddcd
entity.name.class, entity.name.type.class, support.class#f9423abold italic
entity.other.inherited-class#f9423aitalic
entity.name.tag, punctuation.definition.tag#88b04bbold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#9abc66
punctuation, punctuation.separator, punctuation.terminator, meta.brace#85874d
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#f9423abold
support.constant.property-value.css, support.constant.color.css#d4a017
keyword.other.unit.css#86d0bf
support.type.property-name.json#4e9a2f
markup.heading, markup.heading entity.name, entity.name.section.markdown#88b04bbold
markup.bold#d4a017bold
markup.italic#4e9a2fitalic
markup.inline.raw, markup.raw#996fd1
markup.underline.link#e8d4e2
markup.quote#85874ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme