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#cbaab4
  • activityBar.foreground#bf1932
  • activityBar.inactiveForeground#98384e
  • activityBarBadge.background#3ea399
  • activityBarBadge.foreground#f5f1f2
  • badge.background#bf1932
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#2a050b
  • breadcrumb.focusForeground#2a050b
  • breadcrumb.foreground#98384e
  • button.background#bf1932
  • button.foreground#f5f1f2
  • button.hoverBackground#ac172d
  • button.secondaryBackground#e9dee2
  • button.secondaryForeground#2a050b
  • descriptionForeground#98384e
  • dropdown.background#f8f4f5
  • dropdown.border#cbaab4
  • dropdown.foreground#2a050b
  • editor.background#f8f4f5
  • editor.findMatchBackground#a3af8659
  • editor.findMatchHighlightBackground#a3af8626
  • editor.foreground#2a050b
  • editor.inactiveSelectionBackground#bf19321a
  • editor.lineHighlightBackground#bf193214
  • editor.lineHighlightBorder#bf193200
  • editor.selectionBackground#bf193233
  • editor.wordHighlightBackground#bf193226
  • editorBracketMatch.background#bf193233
  • editorBracketMatch.border#bf193280
  • editorCursor.foreground#bf1932
  • editorError.foreground#bf1932
  • editorGroup.border#cbaab4
  • editorGroupHeader.tabsBackground#f0e9eb
  • editorGroupHeader.tabsBorder#cbaab4
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#2a050b2e
  • editorIndentGuide.background#2a050b14
  • editorInfo.foreground#3ea399
  • editorLineNumber.activeForeground#2a050b
  • editorLineNumber.foreground#98384e
  • editorRuler.foreground#2a050b14
  • editorSuggestWidget.selectedBackground#bf193226
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#2a050b1a
  • editorWidget.background#f8f4f5
  • editorWidget.border#cbaab4
  • focusBorder#bf193280
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#98384e
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#98384e
  • input.background#f8f4f5
  • input.border#cbaab4
  • input.foreground#2a050b
  • input.placeholderForeground#98384e
  • inputOption.activeBorder#bf1932
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#3ea399
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#bf193233
  • list.activeSelectionForeground#2a050b
  • list.focusBackground#bf193226
  • list.highlightForeground#bf1932
  • list.hoverBackground#bf19321a
  • list.inactiveSelectionBackground#bf19321a
  • minimap.background#f8f4f5
  • minimap.findMatchHighlight#a3af8680
  • minimap.selectionHighlight#bf19324d
  • notificationLink.foreground#bf1932
  • notifications.background#f8f4f5
  • notifications.foreground#2a050b
  • panel.background#f0e9eb
  • panel.border#cbaab4
  • panelTitle.activeBorder#bf1932
  • panelTitle.activeForeground#2a050b
  • panelTitle.inactiveForeground#98384e
  • peekView.border#bf1932
  • peekViewEditor.background#f0e9eb
  • peekViewResult.background#e9dee2
  • peekViewTitle.background#f0e9eb
  • progressBar.background#bf1932
  • scrollbar.shadow#13020514
  • scrollbarSlider.activeBackground#2a050b4d
  • scrollbarSlider.background#2a050b1a
  • scrollbarSlider.hoverBackground#2a050b33
  • selection.background#bf193233
  • sideBar.background#f0e9eb
  • sideBar.border#cbaab4
  • sideBar.foreground#2a050b
  • sideBarSectionHeader.background#bf19321a
  • sideBarSectionHeader.foreground#2a050b
  • sideBarTitle.foreground#2a050b
  • statusBar.background#bf1932
  • statusBar.border#cbaab4
  • statusBar.debuggingBackground#3ea399
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e9dee2
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#a2152b
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f8f4f5
  • tab.activeBorder#bf1932
  • tab.activeBorderTop#bf193200
  • tab.activeForeground#2a050b
  • tab.border#cbaab4
  • tab.inactiveBackground#f0e9eb
  • tab.inactiveForeground#98384e
  • terminal.ansiBlack#2a050b
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#98384e
  • 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#f0e9eb
  • terminal.foreground#2a050b
  • terminalCursor.foreground#bf1932
  • textLink.activeForeground#379188
  • textLink.foreground#3ea399
  • titleBar.activeBackground#f0e9eb
  • titleBar.activeForeground#2a050b
  • titleBar.border#cbaab4
  • titleBar.inactiveBackground#f0e9eb
  • titleBar.inactiveForeground#98384e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#98384eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#bf1932bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#bf1932bold
storage.type, storage.modifier#bf1932bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#2d796f
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#bf1932
string.regexp#2d796f
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#6c7358
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#96548abold
variable.other.constant, variable.other.enummember#96548abold
constant.character.escape#c93c51
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#7e4d61italic
entity.name.type.parameter#7e4d61italic
entity.name.function, meta.function entity.name.function#716962bold
meta.function-call entity.name.function, support.function#716962
meta.method-call entity.name.function, entity.name.function.member#716962
variable, variable.other, variable.other.readwrite#2a050b
variable.parameter#2a050bitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#bf1932italic
variable.other.property, variable.other.object.property, meta.object-literal.key#2a050b
entity.name.class, entity.name.type.class, support.class#845bbdbold italic
entity.other.inherited-class#845bbditalic
entity.name.tag, punctuation.definition.tag#bf1932bold
entity.other.attribute-name#716962italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#c93c51
punctuation, punctuation.separator, punctuation.terminator, meta.brace#98384e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#7e4d61italic
support.type.property-name.css, support.type.vendored.property-name.css#7e4d61
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#845bbdbold
support.constant.property-value.css, support.constant.color.css#96548a
keyword.other.unit.css#6c7358
support.type.property-name.json#7e4d61
markup.heading, markup.heading entity.name, entity.name.section.markdown#bf1932bold
markup.bold#96548abold
markup.italic#7e4d61italic
markup.inline.raw, markup.raw#2d796f
markup.underline.link#716962
markup.quote#98384eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050