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#310d17
  • activityBar.border#4f1525
  • activityBar.foreground#e83e6c
  • activityBar.inactiveForeground#9e4964
  • activityBarBadge.background#86d0bf
  • activityBarBadge.foreground#f5f1f2
  • badge.background#e83e6c
  • badge.foreground#230910
  • breadcrumb.activeSelectionForeground#e2ccd4
  • breadcrumb.focusForeground#e2ccd4
  • breadcrumb.foreground#9e4964
  • button.background#e83e6c
  • button.foreground#230910
  • button.hoverBackground#ea517b
  • button.secondaryBackground#3c101c
  • button.secondaryForeground#e2ccd4
  • descriptionForeground#9e4964
  • dropdown.background#310d17
  • dropdown.border#4f1525
  • dropdown.foreground#e2ccd4
  • editor.background#250a11
  • editor.findMatchBackground#5f4b8b66
  • editor.findMatchHighlightBackground#5f4b8b33
  • editor.foreground#e2ccd4
  • editor.inactiveSelectionBackground#e83e6c26
  • editor.lineHighlightBackground#e83e6c1a
  • editor.lineHighlightBorder#e83e6c00
  • editor.selectionBackground#e83e6c4d
  • editor.wordHighlightBackground#e83e6c33
  • editorBracketMatch.background#e83e6c40
  • editorBracketMatch.border#e83e6c99
  • editorCursor.foreground#e83e6c
  • editorError.foreground#dd4132
  • editorGroup.border#4f1525
  • editorGroupHeader.tabsBackground#310d17
  • editorGroupHeader.tabsBorder#4f1525
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e2ccd433
  • editorIndentGuide.background#e2ccd414
  • editorInfo.foreground#86d0bf
  • editorLineNumber.activeForeground#e2ccd4
  • editorLineNumber.foreground#9e4964
  • editorRuler.foreground#e2ccd414
  • editorSuggestWidget.selectedBackground#e83e6c40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e2ccd41a
  • editorWidget.background#310d17
  • editorWidget.border#4f1525
  • focusBorder#e83e6c99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#9e4964
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#9e4964
  • input.background#310d17
  • input.border#4f1525
  • input.foreground#e2ccd4
  • input.placeholderForeground#9e4964
  • inputOption.activeBorder#e83e6c
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#86d0bf
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#e83e6c4d
  • list.activeSelectionForeground#e2ccd4
  • list.focusBackground#e83e6c33
  • list.highlightForeground#e83e6c
  • list.hoverBackground#e83e6c26
  • list.inactiveSelectionBackground#e83e6c26
  • minimap.background#250a11
  • minimap.findMatchHighlight#5f4b8b99
  • minimap.selectionHighlight#e83e6c66
  • notificationLink.foreground#e83e6c
  • notifications.background#3c101c
  • notifications.foreground#e2ccd4
  • panel.background#310d17
  • panel.border#4f1525
  • panelTitle.activeBorder#e83e6c
  • panelTitle.activeForeground#e2ccd4
  • panelTitle.inactiveForeground#9e4964
  • peekView.border#e83e6c
  • peekViewEditor.background#310d17
  • peekViewResult.background#3c101c
  • peekViewTitle.background#310d17
  • progressBar.background#e83e6c
  • scrollbar.shadow#17060b45
  • scrollbarSlider.activeBackground#e2ccd459
  • scrollbarSlider.background#e2ccd41f
  • scrollbarSlider.hoverBackground#e2ccd440
  • selection.background#e83e6c4d
  • sideBar.background#3c101c
  • sideBar.border#4f1525
  • sideBar.foreground#e2ccd4
  • sideBarSectionHeader.background#e83e6c26
  • sideBarSectionHeader.foreground#e2ccd4
  • sideBarTitle.foreground#e2ccd4
  • statusBar.background#8b2541
  • statusBar.border#4f1525
  • statusBar.debuggingBackground#86d0bf
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f18ba7
  • statusBar.noFolderBackground#310d17
  • statusBarItem.hoverBackground#e83e6c4d
  • statusBarItem.remoteBackground#e83e6c
  • statusBarItem.remoteForeground#230910
  • tab.activeBackground#250a11
  • tab.activeBorder#e83e6c
  • tab.activeBorderTop#e83e6c00
  • tab.activeForeground#e2ccd4
  • tab.border#4f1525
  • tab.inactiveBackground#310d17
  • tab.inactiveForeground#9e4964
  • terminal.ansiBlack#250a11
  • terminal.ansiBlue#7c4577
  • terminal.ansiBrightBlack#9e4964
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#e2ccd4
  • terminal.ansiYellow#efc050
  • terminal.background#310d17
  • terminal.foreground#e2ccd4
  • terminalCursor.foreground#e83e6c
  • textLink.activeForeground#98d7c9
  • textLink.foreground#86d0bf
  • titleBar.activeBackground#310d17
  • titleBar.activeForeground#e2ccd4
  • titleBar.border#4f1525
  • titleBar.inactiveBackground#310d17
  • titleBar.inactiveForeground#9e4964

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#9e4964italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#e83e6cbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#e83e6cbold
storage.type, storage.modifier#e83e6cbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#86d0bf
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#e83e6c
string.regexp#86d0bf
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#8d7dac
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#937966bold
variable.other.constant, variable.other.enummember#937966bold
constant.character.escape#eb5b82
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#ac7978italic
entity.name.type.parameter#ac7978italic
entity.name.function, meta.function entity.name.function#99d6eabold
meta.function-call entity.name.function, support.function#99d6ea
meta.method-call entity.name.function, entity.name.function.member#99d6ea
variable, variable.other, variable.other.readwrite#e2ccd4
variable.parameter#e2ccd4italic
variable.language, variable.language.this, variable.language.self, variable.language.super#e83e6citalic
variable.other.property, variable.other.object.property, meta.object-literal.key#e2ccd4
entity.name.class, entity.name.type.class, support.class#c8d800bold italic
entity.other.inherited-class#c8d800italic
entity.name.tag, punctuation.definition.tag#e83e6cbold
entity.other.attribute-name#99d6eaitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#eb5b82
punctuation, punctuation.separator, punctuation.terminator, meta.brace#9e4964
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ac7978italic
support.type.property-name.css, support.type.vendored.property-name.css#ac7978
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c8d800bold
support.constant.property-value.css, support.constant.color.css#937966
keyword.other.unit.css#8d7dac
support.type.property-name.json#ac7978
markup.heading, markup.heading entity.name, entity.name.section.markdown#e83e6cbold
markup.bold#937966bold
markup.italic#ac7978italic
markup.inline.raw, markup.raw#86d0bf
markup.underline.link#99d6ea
markup.quote#9e4964italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050