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#caabb6
  • activityBar.foreground#bb2649
  • activityBar.inactiveForeground#963d57
  • activityBarBadge.background#79bbac
  • activityBarBadge.foreground#f5f1f2
  • badge.background#bb2649
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#290810
  • breadcrumb.focusForeground#290810
  • breadcrumb.foreground#963d57
  • button.background#bb2649
  • button.foreground#f5f1f2
  • button.hoverBackground#a82242
  • button.secondaryBackground#e9dee2
  • button.secondaryForeground#290810
  • descriptionForeground#963d57
  • dropdown.background#f8f4f5
  • dropdown.border#caabb6
  • dropdown.foreground#290810
  • editor.background#f8f4f5
  • editor.findMatchBackground#a3af8659
  • editor.findMatchHighlightBackground#a3af8626
  • editor.foreground#290810
  • editor.inactiveSelectionBackground#bb26491a
  • editor.lineHighlightBackground#bb264914
  • editor.lineHighlightBorder#bb264900
  • editor.selectionBackground#bb264933
  • editor.wordHighlightBackground#bb264926
  • editorBracketMatch.background#bb264933
  • editorBracketMatch.border#bb264980
  • editorCursor.foreground#bb2649
  • editorError.foreground#bf1932
  • editorGroup.border#caabb6
  • editorGroupHeader.tabsBackground#f0e9ec
  • editorGroupHeader.tabsBorder#caabb6
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#2908102e
  • editorIndentGuide.background#29081014
  • editorInfo.foreground#79bbac
  • editorLineNumber.activeForeground#290810
  • editorLineNumber.foreground#963d57
  • editorRuler.foreground#29081014
  • editorSuggestWidget.selectedBackground#bb264926
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#2908101a
  • editorWidget.background#f8f4f5
  • editorWidget.border#caabb6
  • focusBorder#bb264980
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#963d57
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#963d57
  • input.background#f8f4f5
  • input.border#caabb6
  • input.foreground#290810
  • input.placeholderForeground#963d57
  • inputOption.activeBorder#bb2649
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#79bbac
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#bb264933
  • list.activeSelectionForeground#290810
  • list.focusBackground#bb264926
  • list.highlightForeground#bb2649
  • list.hoverBackground#bb26491a
  • list.inactiveSelectionBackground#bb26491a
  • minimap.background#f8f4f5
  • minimap.findMatchHighlight#a3af8680
  • minimap.selectionHighlight#bb26494d
  • notificationLink.foreground#bb2649
  • notifications.background#f8f4f5
  • notifications.foreground#290810
  • panel.background#f0e9ec
  • panel.border#caabb6
  • panelTitle.activeBorder#bb2649
  • panelTitle.activeForeground#290810
  • panelTitle.inactiveForeground#963d57
  • peekView.border#bb2649
  • peekViewEditor.background#f0e9ec
  • peekViewResult.background#e9dee2
  • peekViewTitle.background#f0e9ec
  • progressBar.background#bb2649
  • scrollbar.shadow#13040714
  • scrollbarSlider.activeBackground#2908104d
  • scrollbarSlider.background#2908101a
  • scrollbarSlider.hoverBackground#29081033
  • selection.background#bb264933
  • sideBar.background#f0e9ec
  • sideBar.border#caabb6
  • sideBar.foreground#290810
  • sideBarSectionHeader.background#bb26491a
  • sideBarSectionHeader.foreground#290810
  • sideBarTitle.foreground#290810
  • statusBar.background#bb2649
  • statusBar.border#caabb6
  • statusBar.debuggingBackground#79bbac
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e9dee2
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#9f203e
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f8f4f5
  • tab.activeBorder#bb2649
  • tab.activeBorderTop#bb264900
  • tab.activeForeground#290810
  • tab.border#caabb6
  • tab.inactiveBackground#f0e9ec
  • tab.inactiveForeground#963d57
  • terminal.ansiBlack#290810
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#963d57
  • 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#f0e9ec
  • terminal.foreground#290810
  • terminalCursor.foreground#bb2649
  • textLink.activeForeground#6ba699
  • textLink.foreground#79bbac
  • titleBar.activeBackground#f0e9ec
  • titleBar.activeForeground#290810
  • titleBar.border#caabb6
  • titleBar.inactiveBackground#f0e9ec
  • titleBar.inactiveForeground#963d57

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#963d57italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#bb2649bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#bb2649bold
storage.type, storage.modifier#bb2649bold
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#bb2649
string.regexp#4b746b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#6c7358
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#716962bold
variable.other.constant, variable.other.enummember#716962bold
constant.character.escape#b5415c
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#7f6666italic
entity.name.type.parameter#7f6666italic
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#290810
variable.parameter#290810italic
variable.language, variable.language.this, variable.language.self, variable.language.super#bb2649italic
variable.other.property, variable.other.object.property, meta.object-literal.key#290810
entity.name.class, entity.name.type.class, support.class#845bbdbold italic
entity.other.inherited-class#845bbditalic
entity.name.tag, punctuation.definition.tag#bb2649bold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#b5415c
punctuation, punctuation.separator, punctuation.terminator, meta.brace#963d57
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#7f6666italic
support.type.property-name.css, support.type.vendored.property-name.css#7f6666
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#845bbdbold
support.constant.property-value.css, support.constant.color.css#716962
keyword.other.unit.css#6c7358
support.type.property-name.json#7f6666
markup.heading, markup.heading entity.name, entity.name.section.markdown#bb2649bold
markup.bold#716962bold
markup.italic#7f6666italic
markup.inline.raw, markup.raw#4b746b
markup.underline.link#38793a
markup.quote#963d57italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050