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#dfe0e2
  • activityBar.border#b0b3ba
  • activityBar.foreground#5a5b9f
  • activityBar.inactiveForeground#535674
  • activityBarBadge.background#d1d130
  • activityBarBadge.foreground#f1f1f2
  • badge.background#5a5b9f
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#141423
  • breadcrumb.focusForeground#141423
  • breadcrumb.foreground#535674
  • button.background#5a5b9f
  • button.foreground#f1f1f2
  • button.hoverBackground#51528f
  • button.secondaryBackground#dfe0e2
  • button.secondaryForeground#141423
  • descriptionForeground#535674
  • dropdown.background#f4f5f5
  • dropdown.border#b0b3ba
  • dropdown.foreground#141423
  • editor.background#f4f5f5
  • editor.findMatchBackground#00b14059
  • editor.findMatchHighlightBackground#00b14026
  • editor.foreground#141423
  • editor.inactiveSelectionBackground#5a5b9f1a
  • editor.lineHighlightBackground#5a5b9f14
  • editor.lineHighlightBorder#5a5b9f00
  • editor.selectionBackground#5a5b9f33
  • editor.wordHighlightBackground#5a5b9f26
  • editorBracketMatch.background#5a5b9f33
  • editorBracketMatch.border#5a5b9f80
  • editorCursor.foreground#5a5b9f
  • editorError.foreground#bf1932
  • editorGroup.border#b0b3ba
  • editorGroupHeader.tabsBackground#eaeaec
  • editorGroupHeader.tabsBorder#b0b3ba
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1414232e
  • editorIndentGuide.background#14142314
  • editorInfo.foreground#d1d130
  • editorLineNumber.activeForeground#141423
  • editorLineNumber.foreground#535674
  • editorRuler.foreground#14142314
  • editorSuggestWidget.selectedBackground#5a5b9f26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1414231a
  • editorWidget.background#f4f5f5
  • editorWidget.border#b0b3ba
  • focusBorder#5a5b9f80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#535674
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#535674
  • input.background#f4f5f5
  • input.border#b0b3ba
  • input.foreground#141423
  • input.placeholderForeground#535674
  • inputOption.activeBorder#5a5b9f
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#d1d130
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#5a5b9f33
  • list.activeSelectionForeground#141423
  • list.focusBackground#5a5b9f26
  • list.highlightForeground#5a5b9f
  • list.hoverBackground#5a5b9f1a
  • list.inactiveSelectionBackground#5a5b9f1a
  • minimap.background#f4f5f5
  • minimap.findMatchHighlight#00b14080
  • minimap.selectionHighlight#5a5b9f4d
  • notificationLink.foreground#5a5b9f
  • notifications.background#f4f5f5
  • notifications.foreground#141423
  • panel.background#eaeaec
  • panel.border#b0b3ba
  • panelTitle.activeBorder#5a5b9f
  • panelTitle.activeForeground#141423
  • panelTitle.inactiveForeground#535674
  • peekView.border#5a5b9f
  • peekViewEditor.background#eaeaec
  • peekViewResult.background#dfe0e2
  • peekViewTitle.background#eaeaec
  • progressBar.background#5a5b9f
  • scrollbar.shadow#09091014
  • scrollbarSlider.activeBackground#1414234d
  • scrollbarSlider.background#1414231a
  • scrollbarSlider.hoverBackground#14142333
  • selection.background#5a5b9f33
  • sideBar.background#eaeaec
  • sideBar.border#b0b3ba
  • sideBar.foreground#141423
  • sideBarSectionHeader.background#5a5b9f1a
  • sideBarSectionHeader.foreground#141423
  • sideBarTitle.foreground#141423
  • statusBar.background#5a5b9f
  • statusBar.border#b0b3ba
  • statusBar.debuggingBackground#d1d130
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#f1f1f2
  • statusBar.noFolderBackground#dfe0e2
  • statusBarItem.hoverBackground#f1f1f233
  • statusBarItem.remoteBackground#4d4d87
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#f4f5f5
  • tab.activeBorder#5a5b9f
  • tab.activeBorderTop#5a5b9f00
  • tab.activeForeground#141423
  • tab.border#b0b3ba
  • tab.inactiveBackground#eaeaec
  • tab.inactiveForeground#535674
  • terminal.ansiBlack#141423
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#535674
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f1f1f2
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f4f5f5
  • terminal.ansiYellow#d4a017
  • terminal.background#eaeaec
  • terminal.foreground#141423
  • terminalCursor.foreground#5a5b9f
  • textLink.activeForeground#baba2a
  • textLink.foreground#d1d130
  • titleBar.activeBackground#eaeaec
  • titleBar.activeForeground#141423
  • titleBar.border#b0b3ba
  • titleBar.inactiveBackground#eaeaec
  • titleBar.inactiveForeground#535674

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#535674italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#5a5b9fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#5a5b9fbold
storage.type, storage.modifier#5a5b9fbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#6e6e19
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#5a5b9f
string.regexp#6e6e19
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#007f2e
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#456e7ebold
variable.other.constant, variable.other.enummember#456e7ebold
constant.character.escape#6a6b9f
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#5f4b8bitalic
entity.name.type.parameter#5f4b8bitalic
entity.name.function, meta.function entity.name.function#7f6666bold
meta.function-call entity.name.function, support.function#7f6666
meta.method-call entity.name.function, entity.name.function.member#7f6666
variable, variable.other, variable.other.readwrite#141423
variable.parameter#141423italic
variable.language, variable.language.this, variable.language.self, variable.language.super#5a5b9fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#141423
entity.name.class, entity.name.type.class, support.class#c72f7cbold italic
entity.other.inherited-class#c72f7citalic
entity.name.tag, punctuation.definition.tag#5a5b9fbold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#6a6b9f
punctuation, punctuation.separator, punctuation.terminator, meta.brace#535674
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#5f4b8bitalic
support.type.property-name.css, support.type.vendored.property-name.css#5f4b8b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c72f7cbold
support.constant.property-value.css, support.constant.color.css#456e7e
keyword.other.unit.css#007f2e
support.type.property-name.json#5f4b8b
markup.heading, markup.heading entity.name, entity.name.section.markdown#5a5b9fbold
markup.bold#456e7ebold
markup.italic#5f4b8bitalic
markup.inline.raw, markup.raw#6e6e19
markup.underline.link#7f6666
markup.quote#535674italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme