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#e9dee2
  • activityBar.border#cdaab7
  • activityBar.foreground#d4145a
  • activityBar.inactiveForeground#a0365e
  • activityBarBadge.background#79bbac
  • activityBarBadge.foreground#f5f1f2
  • badge.background#d4145a
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#2f0414
  • breadcrumb.focusForeground#2f0414
  • breadcrumb.foreground#a0365e
  • button.background#d4145a
  • button.foreground#f5f1f2
  • button.hoverBackground#bf1251
  • button.secondaryBackground#e9dee2
  • button.secondaryForeground#2f0414
  • descriptionForeground#a0365e
  • dropdown.background#f8f4f5
  • dropdown.border#cdaab7
  • dropdown.foreground#2f0414
  • editor.background#f8f4f5
  • editor.findMatchBackground#6667ab59
  • editor.findMatchHighlightBackground#6667ab26
  • editor.foreground#2f0414
  • editor.inactiveSelectionBackground#d4145a1a
  • editor.lineHighlightBackground#d4145a14
  • editor.lineHighlightBorder#d4145a00
  • editor.selectionBackground#d4145a33
  • editor.wordHighlightBackground#d4145a26
  • editorBracketMatch.background#d4145a33
  • editorBracketMatch.border#d4145a80
  • editorCursor.foreground#d4145a
  • editorError.foreground#bf1932
  • editorGroup.border#cdaab7
  • editorGroupHeader.tabsBackground#f1e9ec
  • editorGroupHeader.tabsBorder#cdaab7
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#2f04142e
  • editorIndentGuide.background#2f041414
  • editorInfo.foreground#79bbac
  • editorLineNumber.activeForeground#2f0414
  • editorLineNumber.foreground#a0365e
  • editorRuler.foreground#2f041414
  • editorSuggestWidget.selectedBackground#d4145a26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#2f04141a
  • editorWidget.background#f8f4f5
  • editorWidget.border#cdaab7
  • focusBorder#d4145a80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#a0365e
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#a0365e
  • input.background#f8f4f5
  • input.border#cdaab7
  • input.foreground#2f0414
  • input.placeholderForeground#a0365e
  • inputOption.activeBorder#d4145a
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#79bbac
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#d4145a33
  • list.activeSelectionForeground#2f0414
  • list.focusBackground#d4145a26
  • list.highlightForeground#d4145a
  • list.hoverBackground#d4145a1a
  • list.inactiveSelectionBackground#d4145a1a
  • minimap.background#f8f4f5
  • minimap.findMatchHighlight#6667ab80
  • minimap.selectionHighlight#d4145a4d
  • notificationLink.foreground#d4145a
  • notifications.background#f8f4f5
  • notifications.foreground#2f0414
  • panel.background#f1e9ec
  • panel.border#cdaab7
  • panelTitle.activeBorder#d4145a
  • panelTitle.activeForeground#2f0414
  • panelTitle.inactiveForeground#a0365e
  • peekView.border#d4145a
  • peekViewEditor.background#f1e9ec
  • peekViewResult.background#e9dee2
  • peekViewTitle.background#f1e9ec
  • progressBar.background#d4145a
  • scrollbar.shadow#15020914
  • scrollbarSlider.activeBackground#2f04144d
  • scrollbarSlider.background#2f04141a
  • scrollbarSlider.hoverBackground#2f041433
  • selection.background#d4145a33
  • sideBar.background#f1e9ec
  • sideBar.border#cdaab7
  • sideBar.foreground#2f0414
  • sideBarSectionHeader.background#d4145a1a
  • sideBarSectionHeader.foreground#2f0414
  • sideBarTitle.foreground#2f0414
  • statusBar.background#d4145a
  • statusBar.border#cdaab7
  • statusBar.debuggingBackground#79bbac
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e9dee2
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#b4114d
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f8f4f5
  • tab.activeBorder#d4145a
  • tab.activeBorderTop#d4145a00
  • tab.activeForeground#2f0414
  • tab.border#cdaab7
  • tab.inactiveBackground#f1e9ec
  • tab.inactiveForeground#a0365e
  • terminal.ansiBlack#2f0414
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#a0365e
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f8f4f5
  • terminal.ansiYellow#d4a017
  • terminal.background#f1e9ec
  • terminal.foreground#2f0414
  • terminalCursor.foreground#d4145a
  • textLink.activeForeground#6ba699
  • textLink.foreground#79bbac
  • titleBar.activeBackground#f1e9ec
  • titleBar.activeForeground#2f0414
  • titleBar.border#cdaab7
  • titleBar.inactiveBackground#f1e9ec
  • titleBar.inactiveForeground#a0365e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a0365eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#d4145abold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#d4145abold
storage.type, storage.modifier#d4145abold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#4b746b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#d4145a
string.regexp#4b746b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#6667ab
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8b6555bold
variable.other.constant, variable.other.enummember#8b6555bold
constant.character.escape#c9336a
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#7c2029italic
entity.name.type.parameter#7c2029italic
entity.name.function, meta.function entity.name.function#5a6f73bold
meta.function-call entity.name.function, support.function#5a6f73
meta.method-call entity.name.function, entity.name.function.member#5a6f73
variable, variable.other, variable.other.readwrite#2f0414
variable.parameter#2f0414italic
variable.language, variable.language.this, variable.language.self, variable.language.super#d4145aitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#2f0414
entity.name.class, entity.name.type.class, support.class#6e6e19bold italic
entity.other.inherited-class#6e6e19italic
entity.name.tag, punctuation.definition.tag#d4145abold
entity.other.attribute-name#5a6f73italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#c9336a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a0365e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#7c2029italic
support.type.property-name.css, support.type.vendored.property-name.css#7c2029
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6e6e19bold
support.constant.property-value.css, support.constant.color.css#8b6555
keyword.other.unit.css#6667ab
support.type.property-name.json#7c2029
markup.heading, markup.heading entity.name, entity.name.section.markdown#d4145abold
markup.bold#8b6555bold
markup.italic#7c2029italic
markup.inline.raw, markup.raw#4b746b
markup.underline.link#5a6f73
markup.quote#a0365eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050