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#e9dfe3
  • activityBar.border#ccaeba
  • activityBar.foreground#c74375
  • activityBar.inactiveForeground#9b4969
  • activityBarBadge.background#79bbac
  • activityBarBadge.foreground#f5f1f2
  • badge.background#c74375
  • badge.foreground#1e0a12
  • breadcrumb.activeSelectionForeground#1e0a12
  • breadcrumb.focusForeground#1e0a12
  • breadcrumb.foreground#9b4969
  • button.background#c74375
  • button.foreground#1e0a12
  • button.hoverBackground#b33c69
  • button.secondaryBackground#e9dfe3
  • button.secondaryForeground#1e0a12
  • descriptionForeground#9b4969
  • dropdown.background#f8f4f6
  • dropdown.border#ccaeba
  • dropdown.foreground#1e0a12
  • editor.background#f8f4f6
  • editor.findMatchBackground#6667ab59
  • editor.findMatchHighlightBackground#6667ab26
  • editor.foreground#1e0a12
  • editor.inactiveSelectionBackground#c743751a
  • editor.lineHighlightBackground#c7437514
  • editor.lineHighlightBorder#c7437500
  • editor.selectionBackground#c7437533
  • editor.wordHighlightBackground#c7437526
  • editorBracketMatch.background#c7437533
  • editorBracketMatch.border#c7437580
  • editorCursor.foreground#c74375
  • editorError.foreground#bf1932
  • editorGroup.border#ccaeba
  • editorGroupHeader.tabsBackground#f0eaec
  • editorGroupHeader.tabsBorder#ccaeba
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1e0a122e
  • editorIndentGuide.background#1e0a1214
  • editorInfo.foreground#79bbac
  • editorLineNumber.activeForeground#1e0a12
  • editorLineNumber.foreground#9b4969
  • editorRuler.foreground#1e0a1214
  • editorSuggestWidget.selectedBackground#c7437526
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1e0a121a
  • editorWidget.background#f8f4f6
  • editorWidget.border#ccaeba
  • focusBorder#c7437580
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#9b4969
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#9b4969
  • input.background#f8f4f6
  • input.border#ccaeba
  • input.foreground#1e0a12
  • input.placeholderForeground#9b4969
  • inputOption.activeBorder#c74375
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#79bbac
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#c7437533
  • list.activeSelectionForeground#1e0a12
  • list.focusBackground#c7437526
  • list.highlightForeground#c74375
  • list.hoverBackground#c743751a
  • list.inactiveSelectionBackground#c743751a
  • minimap.background#f8f4f6
  • minimap.findMatchHighlight#6667ab80
  • minimap.selectionHighlight#c743754d
  • notificationLink.foreground#c74375
  • notifications.background#f8f4f6
  • notifications.foreground#1e0a12
  • panel.background#f0eaec
  • panel.border#ccaeba
  • panelTitle.activeBorder#c74375
  • panelTitle.activeForeground#1e0a12
  • panelTitle.inactiveForeground#9b4969
  • peekView.border#c74375
  • peekViewEditor.background#f0eaec
  • peekViewResult.background#e9dfe3
  • peekViewTitle.background#f0eaec
  • progressBar.background#c74375
  • scrollbar.shadow#14070c14
  • scrollbarSlider.activeBackground#1e0a124d
  • scrollbarSlider.background#1e0a121a
  • scrollbarSlider.hoverBackground#1e0a1233
  • selection.background#c7437533
  • sideBar.background#f0eaec
  • sideBar.border#ccaeba
  • sideBar.foreground#1e0a12
  • sideBarSectionHeader.background#c743751a
  • sideBarSectionHeader.foreground#1e0a12
  • sideBarTitle.foreground#1e0a12
  • statusBar.background#c74375
  • statusBar.border#ccaeba
  • statusBar.debuggingBackground#79bbac
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#1e0a12
  • statusBar.noFolderBackground#e9dfe3
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#a93963
  • statusBarItem.remoteForeground#1e0a12
  • tab.activeBackground#f8f4f6
  • tab.activeBorder#c74375
  • tab.activeBorderTop#c7437500
  • tab.activeForeground#1e0a12
  • tab.border#ccaeba
  • tab.inactiveBackground#f0eaec
  • tab.inactiveForeground#9b4969
  • terminal.ansiBlack#1e0a12
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#9b4969
  • 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#f8f4f6
  • terminal.ansiYellow#d4a017
  • terminal.background#f0eaec
  • terminal.foreground#1e0a12
  • terminalCursor.foreground#c74375
  • textLink.activeForeground#6ba699
  • textLink.foreground#79bbac
  • titleBar.activeBackground#f0eaec
  • titleBar.activeForeground#1e0a12
  • titleBar.border#ccaeba
  • titleBar.inactiveBackground#f0eaec
  • titleBar.inactiveForeground#9b4969

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#9b4969italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#b73e6cbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#b73e6cbold
storage.type, storage.modifier#b73e6cbold
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#b73e6c
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#a8512cbold
variable.other.constant, variable.other.enummember#a8512cbold
constant.character.escape#af5075
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#1e0a12
variable.parameter#1e0a12italic
variable.language, variable.language.this, variable.language.self, variable.language.super#b73e6citalic
variable.other.property, variable.other.object.property, meta.object-literal.key#1e0a12
entity.name.class, entity.name.type.class, support.class#6e6e19bold italic
entity.other.inherited-class#6e6e19italic
entity.name.tag, punctuation.definition.tag#b73e6cbold
entity.other.attribute-name#5a6f73italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#af5075
punctuation, punctuation.separator, punctuation.terminator, meta.brace#9b4969
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#a8512c
keyword.other.unit.css#6667ab
support.type.property-name.json#7c2029
markup.heading, markup.heading entity.name, entity.name.section.markdown#b73e6cbold
markup.bold#a8512cbold
markup.italic#7c2029italic
markup.inline.raw, markup.raw#4b746b
markup.underline.link#5a6f73
markup.quote#9b4969italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050