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#e9dfe4
  • activityBar.border#c9b1be
  • activityBar.foreground#b163a3
  • activityBar.inactiveForeground#92567b
  • activityBarBadge.background#6ae66f
  • activityBarBadge.foreground#f5f1f2
  • badge.background#b163a3
  • badge.foreground#1b0f18
  • breadcrumb.activeSelectionForeground#1b0f18
  • breadcrumb.focusForeground#1b0f18
  • breadcrumb.foreground#92567b
  • button.background#b163a3
  • button.foreground#1b0f18
  • button.hoverBackground#9f5993
  • button.secondaryBackground#e9dfe4
  • button.secondaryForeground#1b0f18
  • descriptionForeground#92567b
  • dropdown.background#f8f4f6
  • dropdown.border#c9b1be
  • dropdown.foreground#1b0f18
  • editor.background#f8f4f6
  • editor.findMatchBackground#1b2a6b59
  • editor.findMatchHighlightBackground#1b2a6b26
  • editor.foreground#1b0f18
  • editor.inactiveSelectionBackground#b163a31a
  • editor.lineHighlightBackground#b163a314
  • editor.lineHighlightBorder#b163a300
  • editor.selectionBackground#b163a333
  • editor.wordHighlightBackground#b163a326
  • editorBracketMatch.background#b163a333
  • editorBracketMatch.border#b163a380
  • editorCursor.foreground#b163a3
  • editorError.foreground#bf1932
  • editorGroup.border#c9b1be
  • editorGroupHeader.tabsBackground#f0eaed
  • editorGroupHeader.tabsBorder#c9b1be
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1b0f182e
  • editorIndentGuide.background#1b0f1814
  • editorInfo.foreground#6ae66f
  • editorLineNumber.activeForeground#1b0f18
  • editorLineNumber.foreground#92567b
  • editorRuler.foreground#1b0f1814
  • editorSuggestWidget.selectedBackground#b163a326
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1b0f181a
  • editorWidget.background#f8f4f6
  • editorWidget.border#c9b1be
  • focusBorder#b163a380
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#92567b
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#92567b
  • input.background#f8f4f6
  • input.border#c9b1be
  • input.foreground#1b0f18
  • input.placeholderForeground#92567b
  • inputOption.activeBorder#b163a3
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#6ae66f
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#b163a333
  • list.activeSelectionForeground#1b0f18
  • list.focusBackground#b163a326
  • list.highlightForeground#b163a3
  • list.hoverBackground#b163a31a
  • list.inactiveSelectionBackground#b163a31a
  • minimap.background#f8f4f6
  • minimap.findMatchHighlight#1b2a6b80
  • minimap.selectionHighlight#b163a34d
  • notificationLink.foreground#b163a3
  • notifications.background#f8f4f6
  • notifications.foreground#1b0f18
  • panel.background#f0eaed
  • panel.border#c9b1be
  • panelTitle.activeBorder#b163a3
  • panelTitle.activeForeground#1b0f18
  • panelTitle.inactiveForeground#92567b
  • peekView.border#b163a3
  • peekViewEditor.background#f0eaed
  • peekViewResult.background#e9dfe4
  • peekViewTitle.background#f0eaed
  • progressBar.background#b163a3
  • scrollbar.shadow#120a1014
  • scrollbarSlider.activeBackground#1b0f184d
  • scrollbarSlider.background#1b0f181a
  • scrollbarSlider.hoverBackground#1b0f1833
  • selection.background#b163a333
  • sideBar.background#f0eaed
  • sideBar.border#c9b1be
  • sideBar.foreground#1b0f18
  • sideBarSectionHeader.background#b163a31a
  • sideBarSectionHeader.foreground#1b0f18
  • sideBarTitle.foreground#1b0f18
  • statusBar.background#b163a3
  • statusBar.border#c9b1be
  • statusBar.debuggingBackground#6ae66f
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#1b0f18
  • statusBar.noFolderBackground#e9dfe4
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#96548b
  • statusBarItem.remoteForeground#1b0f18
  • tab.activeBackground#f8f4f6
  • tab.activeBorder#b163a3
  • tab.activeBorderTop#b163a300
  • tab.activeForeground#1b0f18
  • tab.border#c9b1be
  • tab.inactiveBackground#f0eaed
  • tab.inactiveForeground#92567b
  • terminal.ansiBlack#1b0f18
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#92567b
  • 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#f0eaed
  • terminal.foreground#1b0f18
  • terminalCursor.foreground#b163a3
  • textLink.activeForeground#5ecc62
  • textLink.foreground#6ae66f
  • titleBar.activeBackground#f0eaed
  • titleBar.activeForeground#1b0f18
  • titleBar.border#c9b1be
  • titleBar.inactiveBackground#f0eaed
  • titleBar.inactiveForeground#92567b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#92567bitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#96548abold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#96548abold
storage.type, storage.modifier#96548abold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#38793a
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#96548a
string.regexp#38793a
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#1b2a6b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#bf1932bold
variable.other.constant, variable.other.enummember#bf1932bold
constant.character.escape#935f8a
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#9e4fa5italic
entity.name.type.parameter#9e4fa5italic
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#1b0f18
variable.parameter#1b0f18italic
variable.language, variable.language.this, variable.language.self, variable.language.super#96548aitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#1b0f18
entity.name.class, entity.name.type.class, support.class#8f5e2bbold italic
entity.other.inherited-class#8f5e2bitalic
entity.name.tag, punctuation.definition.tag#96548abold
entity.other.attribute-name#5a6f73italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#935f8a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#92567b
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#9e4fa5italic
support.type.property-name.css, support.type.vendored.property-name.css#9e4fa5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8f5e2bbold
support.constant.property-value.css, support.constant.color.css#bf1932
keyword.other.unit.css#1b2a6b
support.type.property-name.json#9e4fa5
markup.heading, markup.heading entity.name, entity.name.section.markdown#96548abold
markup.bold#bf1932bold
markup.italic#9e4fa5italic
markup.inline.raw, markup.raw#38793a
markup.underline.link#5a6f73
markup.quote#92567bitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050