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#002c23
  • activityBar.border#004031
  • activityBar.foreground#009473
  • activityBar.inactiveForeground#6c9b90
  • activityBarBadge.background#7c1c32
  • activityBarBadge.foreground#f7f7f7
  • badge.background#009473
  • badge.foreground#001611
  • breadcrumb.activeSelectionForeground#d8e3e1
  • breadcrumb.focusForeground#d8e3e1
  • breadcrumb.foreground#6c9b90
  • button.background#009473
  • button.foreground#001611
  • button.hoverBackground#1a9f81
  • button.secondaryBackground#003428
  • button.secondaryForeground#d8e3e1
  • descriptionForeground#6c9b90
  • dropdown.background#002c23
  • dropdown.border#004031
  • dropdown.foreground#d8e3e1
  • editor.background#00251d
  • editor.findMatchBackground#5f4b8b66
  • editor.findMatchHighlightBackground#5f4b8b33
  • editor.foreground#d8e3e1
  • editor.inactiveSelectionBackground#00947326
  • editor.lineHighlightBackground#0094731a
  • editor.lineHighlightBorder#00947300
  • editor.selectionBackground#0094734d
  • editor.wordHighlightBackground#00947333
  • editorBracketMatch.background#00947340
  • editorBracketMatch.border#00947399
  • editorCursor.foreground#009473
  • editorError.foreground#dd4132
  • editorGroup.border#004031
  • editorGroupHeader.tabsBackground#002c23
  • editorGroupHeader.tabsBorder#004031
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d8e3e133
  • editorIndentGuide.background#d8e3e114
  • editorInfo.foreground#7c1c32
  • editorLineNumber.activeForeground#d8e3e1
  • editorLineNumber.foreground#6c9b90
  • editorRuler.foreground#d8e3e114
  • editorSuggestWidget.selectedBackground#00947340
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d8e3e11a
  • editorWidget.background#002c23
  • editorWidget.border#004031
  • focusBorder#00947399
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#6c9b90
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#6c9b90
  • input.background#002c23
  • input.border#004031
  • input.foreground#d8e3e1
  • input.placeholderForeground#6c9b90
  • inputOption.activeBorder#009473
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#7c1c32
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#0094734d
  • list.activeSelectionForeground#d8e3e1
  • list.focusBackground#00947333
  • list.highlightForeground#009473
  • list.hoverBackground#00947326
  • list.inactiveSelectionBackground#00947326
  • minimap.background#00251d
  • minimap.findMatchHighlight#5f4b8b99
  • minimap.selectionHighlight#00947366
  • notificationLink.foreground#009473
  • notifications.background#003428
  • notifications.foreground#d8e3e1
  • panel.background#002c23
  • panel.border#004031
  • panelTitle.activeBorder#009473
  • panelTitle.activeForeground#d8e3e1
  • panelTitle.inactiveForeground#6c9b90
  • peekView.border#009473
  • peekViewEditor.background#002c23
  • peekViewResult.background#003428
  • peekViewTitle.background#002c23
  • progressBar.background#009473
  • scrollbar.shadow#000f0b45
  • scrollbarSlider.activeBackground#d8e3e159
  • scrollbarSlider.background#d8e3e11f
  • scrollbarSlider.hoverBackground#d8e3e140
  • selection.background#0094734d
  • sideBar.background#003428
  • sideBar.border#004031
  • sideBar.foreground#d8e3e1
  • sideBarSectionHeader.background#00947326
  • sideBarSectionHeader.foreground#d8e3e1
  • sideBarTitle.foreground#d8e3e1
  • statusBar.background#005945
  • statusBar.border#004031
  • statusBar.debuggingBackground#7c1c32
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#66bfab
  • statusBar.noFolderBackground#002c23
  • statusBarItem.hoverBackground#0094734d
  • statusBarItem.remoteBackground#009473
  • statusBarItem.remoteForeground#001611
  • tab.activeBackground#00251d
  • tab.activeBorder#009473
  • tab.activeBorderTop#00947300
  • tab.activeForeground#d8e3e1
  • tab.border#004031
  • tab.inactiveBackground#002c23
  • tab.inactiveForeground#6c9b90
  • terminal.ansiBlack#00251d
  • terminal.ansiBlue#08707a
  • terminal.ansiBrightBlack#6c9b90
  • 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#d8e3e1
  • terminal.ansiYellow#efc050
  • terminal.background#002c23
  • terminal.foreground#d8e3e1
  • terminalCursor.foreground#009473
  • textLink.activeForeground#903e51
  • textLink.foreground#7c1c32
  • titleBar.activeBackground#002c23
  • titleBar.activeForeground#d8e3e1
  • titleBar.border#004031
  • titleBar.inactiveBackground#002c23
  • titleBar.inactiveForeground#6c9b90

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#6c9b90italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#149d7ebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#149d7ebold
storage.type, storage.modifier#149d7ebold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#b6808d
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#149d7e
string.regexp#b6808d
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9687b3
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#6e92b3bold
variable.other.constant, variable.other.enummember#6e92b3bold
constant.character.escape#26a488
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#00b5ccitalic
entity.name.type.parameter#00b5ccitalic
entity.name.function, meta.function entity.name.function#decdbebold
meta.function-call entity.name.function, support.function#decdbe
meta.method-call entity.name.function, entity.name.function.member#decdbe
variable, variable.other, variable.other.readwrite#d8e3e1
variable.parameter#d8e3e1italic
variable.language, variable.language.this, variable.language.self, variable.language.super#149d7eitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#d8e3e1
entity.name.class, entity.name.type.class, support.class#78be20bold italic
entity.other.inherited-class#78be20italic
entity.name.tag, punctuation.definition.tag#149d7ebold
entity.other.attribute-name#decdbeitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#26a488
punctuation, punctuation.separator, punctuation.terminator, meta.brace#6c9b90
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#00b5ccitalic
support.type.property-name.css, support.type.vendored.property-name.css#00b5cc
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#78be20bold
support.constant.property-value.css, support.constant.color.css#6e92b3
keyword.other.unit.css#9687b3
support.type.property-name.json#00b5cc
markup.heading, markup.heading entity.name, entity.name.section.markdown#149d7ebold
markup.bold#6e92b3bold
markup.italic#00b5ccitalic
markup.inline.raw, markup.raw#b6808d
markup.underline.link#decdbe
markup.quote#6c9b90italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme