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#e8dfe3
  • activityBar.border#c5afb8
  • activityBar.foreground#7e4d61
  • activityBar.inactiveForeground#7e4d61
  • activityBarBadge.background#79bbac
  • activityBarBadge.foreground#f5f1f2
  • badge.background#7e4d61
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#1c1115
  • breadcrumb.focusForeground#1c1115
  • breadcrumb.foreground#7e4d61
  • button.background#7e4d61
  • button.foreground#f5f1f2
  • button.hoverBackground#714557
  • button.secondaryBackground#e8dfe3
  • button.secondaryForeground#1c1115
  • descriptionForeground#7e4d61
  • dropdown.background#f7f4f6
  • dropdown.border#c5afb8
  • dropdown.foreground#1c1115
  • editor.background#f7f4f6
  • editor.findMatchBackground#6667ab59
  • editor.findMatchHighlightBackground#6667ab26
  • editor.foreground#1c1115
  • editor.inactiveSelectionBackground#7e4d611a
  • editor.lineHighlightBackground#7e4d6114
  • editor.lineHighlightBorder#7e4d6100
  • editor.selectionBackground#7e4d6133
  • editor.wordHighlightBackground#7e4d6126
  • editorBracketMatch.background#7e4d6133
  • editorBracketMatch.border#7e4d6180
  • editorCursor.foreground#7e4d61
  • editorError.foreground#bf1932
  • editorGroup.border#c5afb8
  • editorGroupHeader.tabsBackground#f0eaec
  • editorGroupHeader.tabsBorder#c5afb8
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1c11152e
  • editorIndentGuide.background#1c111514
  • editorInfo.foreground#79bbac
  • editorLineNumber.activeForeground#1c1115
  • editorLineNumber.foreground#7e4d61
  • editorRuler.foreground#1c111514
  • editorSuggestWidget.selectedBackground#7e4d6126
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1c11151a
  • editorWidget.background#f7f4f6
  • editorWidget.border#c5afb8
  • focusBorder#7e4d6180
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#7e4d61
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#7e4d61
  • input.background#f7f4f6
  • input.border#c5afb8
  • input.foreground#1c1115
  • input.placeholderForeground#7e4d61
  • inputOption.activeBorder#7e4d61
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#79bbac
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#7e4d6133
  • list.activeSelectionForeground#1c1115
  • list.focusBackground#7e4d6126
  • list.highlightForeground#7e4d61
  • list.hoverBackground#7e4d611a
  • list.inactiveSelectionBackground#7e4d611a
  • minimap.background#f7f4f6
  • minimap.findMatchHighlight#6667ab80
  • minimap.selectionHighlight#7e4d614d
  • notificationLink.foreground#7e4d61
  • notifications.background#f7f4f6
  • notifications.foreground#1c1115
  • panel.background#f0eaec
  • panel.border#c5afb8
  • panelTitle.activeBorder#7e4d61
  • panelTitle.activeForeground#1c1115
  • panelTitle.inactiveForeground#7e4d61
  • peekView.border#7e4d61
  • peekViewEditor.background#f0eaec
  • peekViewResult.background#e8dfe3
  • peekViewTitle.background#f0eaec
  • progressBar.background#7e4d61
  • scrollbar.shadow#0d080a14
  • scrollbarSlider.activeBackground#1c11154d
  • scrollbarSlider.background#1c11151a
  • scrollbarSlider.hoverBackground#1c111533
  • selection.background#7e4d6133
  • sideBar.background#f0eaec
  • sideBar.border#c5afb8
  • sideBar.foreground#1c1115
  • sideBarSectionHeader.background#7e4d611a
  • sideBarSectionHeader.foreground#1c1115
  • sideBarTitle.foreground#1c1115
  • statusBar.background#7e4d61
  • statusBar.border#c5afb8
  • statusBar.debuggingBackground#79bbac
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e8dfe3
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#6b4152
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f7f4f6
  • tab.activeBorder#7e4d61
  • tab.activeBorderTop#7e4d6100
  • tab.activeForeground#1c1115
  • tab.border#c5afb8
  • tab.inactiveBackground#f0eaec
  • tab.inactiveForeground#7e4d61
  • terminal.ansiBlack#1c1115
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#7e4d61
  • 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#f7f4f6
  • terminal.ansiYellow#d4a017
  • terminal.background#f0eaec
  • terminal.foreground#1c1115
  • terminalCursor.foreground#7e4d61
  • textLink.activeForeground#6ba699
  • textLink.foreground#79bbac
  • titleBar.activeBackground#f0eaec
  • titleBar.activeForeground#1c1115
  • titleBar.border#c5afb8
  • titleBar.inactiveBackground#f0eaec
  • titleBar.inactiveForeground#7e4d61

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#7e4d61italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#7e4d61bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#7e4d61bold
storage.type, storage.modifier#7e4d61bold
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#7e4d61
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#9e4fa5bold
variable.other.constant, variable.other.enummember#9e4fa5bold
constant.character.escape#85606f
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#bf1932italic
entity.name.type.parameter#bf1932italic
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#1c1115
variable.parameter#1c1115italic
variable.language, variable.language.this, variable.language.self, variable.language.super#7e4d61italic
variable.other.property, variable.other.object.property, meta.object-literal.key#1c1115
entity.name.class, entity.name.type.class, support.class#6e6e19bold italic
entity.other.inherited-class#6e6e19italic
entity.name.tag, punctuation.definition.tag#7e4d61bold
entity.other.attribute-name#716962italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#85606f
punctuation, punctuation.separator, punctuation.terminator, meta.brace#7e4d61
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#bf1932italic
support.type.property-name.css, support.type.vendored.property-name.css#bf1932
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6e6e19bold
support.constant.property-value.css, support.constant.color.css#9e4fa5
keyword.other.unit.css#6667ab
support.type.property-name.json#bf1932
markup.heading, markup.heading entity.name, entity.name.section.markdown#7e4d61bold
markup.bold#9e4fa5bold
markup.italic#bf1932italic
markup.inline.raw, markup.raw#4b746b
markup.underline.link#716962
markup.quote#7e4d61italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050