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#e8dee2
  • activityBar.border#c8aab4
  • activityBar.foreground#9e1b32
  • activityBar.inactiveForeground#8b394e
  • activityBarBadge.background#008568
  • activityBarBadge.foreground#f5f1f2
  • badge.background#9e1b32
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#23060b
  • breadcrumb.focusForeground#23060b
  • breadcrumb.foreground#8b394e
  • button.background#9e1b32
  • button.foreground#f5f1f2
  • button.hoverBackground#8e182d
  • button.secondaryBackground#e8dee2
  • button.secondaryForeground#23060b
  • descriptionForeground#8b394e
  • dropdown.background#f7f4f5
  • dropdown.border#c8aab4
  • dropdown.foreground#23060b
  • editor.background#f7f4f5
  • editor.findMatchBackground#a3af8659
  • editor.findMatchHighlightBackground#a3af8626
  • editor.foreground#23060b
  • editor.inactiveSelectionBackground#9e1b321a
  • editor.lineHighlightBackground#9e1b3214
  • editor.lineHighlightBorder#9e1b3200
  • editor.selectionBackground#9e1b3233
  • editor.wordHighlightBackground#9e1b3226
  • editorBracketMatch.background#9e1b3233
  • editorBracketMatch.border#9e1b3280
  • editorCursor.foreground#9e1b32
  • editorError.foreground#bf1932
  • editorGroup.border#c8aab4
  • editorGroupHeader.tabsBackground#f0e9eb
  • editorGroupHeader.tabsBorder#c8aab4
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#23060b2e
  • editorIndentGuide.background#23060b14
  • editorInfo.foreground#008568
  • editorLineNumber.activeForeground#23060b
  • editorLineNumber.foreground#8b394e
  • editorRuler.foreground#23060b14
  • editorSuggestWidget.selectedBackground#9e1b3226
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#23060b1a
  • editorWidget.background#f7f4f5
  • editorWidget.border#c8aab4
  • focusBorder#9e1b3280
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#8b394e
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#8b394e
  • input.background#f7f4f5
  • input.border#c8aab4
  • input.foreground#23060b
  • input.placeholderForeground#8b394e
  • inputOption.activeBorder#9e1b32
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#008568
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#9e1b3233
  • list.activeSelectionForeground#23060b
  • list.focusBackground#9e1b3226
  • list.highlightForeground#9e1b32
  • list.hoverBackground#9e1b321a
  • list.inactiveSelectionBackground#9e1b321a
  • minimap.background#f7f4f5
  • minimap.findMatchHighlight#a3af8680
  • minimap.selectionHighlight#9e1b324d
  • notificationLink.foreground#9e1b32
  • notifications.background#f7f4f5
  • notifications.foreground#23060b
  • panel.background#f0e9eb
  • panel.border#c8aab4
  • panelTitle.activeBorder#9e1b32
  • panelTitle.activeForeground#23060b
  • panelTitle.inactiveForeground#8b394e
  • peekView.border#9e1b32
  • peekViewEditor.background#f0e9eb
  • peekViewResult.background#e8dee2
  • peekViewTitle.background#f0e9eb
  • progressBar.background#9e1b32
  • scrollbar.shadow#10030514
  • scrollbarSlider.activeBackground#23060b4d
  • scrollbarSlider.background#23060b1a
  • scrollbarSlider.hoverBackground#23060b33
  • selection.background#9e1b3233
  • sideBar.background#f0e9eb
  • sideBar.border#c8aab4
  • sideBar.foreground#23060b
  • sideBarSectionHeader.background#9e1b321a
  • sideBarSectionHeader.foreground#23060b
  • sideBarTitle.foreground#23060b
  • statusBar.background#9e1b32
  • statusBar.border#c8aab4
  • statusBar.debuggingBackground#008568
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e8dee2
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#86172b
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f7f4f5
  • tab.activeBorder#9e1b32
  • tab.activeBorderTop#9e1b3200
  • tab.activeForeground#23060b
  • tab.border#c8aab4
  • tab.inactiveBackground#f0e9eb
  • tab.inactiveForeground#8b394e
  • terminal.ansiBlack#23060b
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#8b394e
  • 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#f7f4f5
  • terminal.ansiYellow#d4a017
  • terminal.background#f0e9eb
  • terminal.foreground#23060b
  • terminalCursor.foreground#9e1b32
  • textLink.activeForeground#00765c
  • textLink.foreground#008568
  • titleBar.activeBackground#f0e9eb
  • titleBar.activeForeground#23060b
  • titleBar.border#c8aab4
  • titleBar.inactiveBackground#f0e9eb
  • titleBar.inactiveForeground#8b394e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#8b394eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#9e1b32bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#9e1b32bold
storage.type, storage.modifier#9e1b32bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#007d62
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#9e1b32
string.regexp#007d62
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#6c7358
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8f5e2bbold
variable.other.constant, variable.other.enummember#8f5e2bbold
constant.character.escape#ad3d51
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#8c3359italic
entity.name.type.parameter#8c3359italic
entity.name.function, meta.function entity.name.function#38793abold
meta.function-call entity.name.function, support.function#38793a
meta.method-call entity.name.function, entity.name.function.member#38793a
variable, variable.other, variable.other.readwrite#23060b
variable.parameter#23060bitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#9e1b32italic
variable.other.property, variable.other.object.property, meta.object-literal.key#23060b
entity.name.class, entity.name.type.class, support.class#845bbdbold italic
entity.other.inherited-class#845bbditalic
entity.name.tag, punctuation.definition.tag#9e1b32bold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ad3d51
punctuation, punctuation.separator, punctuation.terminator, meta.brace#8b394e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#8c3359italic
support.type.property-name.css, support.type.vendored.property-name.css#8c3359
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#845bbdbold
support.constant.property-value.css, support.constant.color.css#8f5e2b
keyword.other.unit.css#6c7358
support.type.property-name.json#8c3359
markup.heading, markup.heading entity.name, entity.name.section.markdown#9e1b32bold
markup.bold#8f5e2bbold
markup.italic#8c3359italic
markup.inline.raw, markup.raw#007d62
markup.underline.link#38793a
markup.quote#8b394eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050
Pantone Theme by Andlz Engineering - VS Code Theme