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#272426
  • activityBar.border#464044
  • activityBar.foreground#e8d4e2
  • activityBar.inactiveForeground#9e7688
  • activityBarBadge.background#00b140
  • activityBarBadge.foreground#f5f1f2
  • badge.background#e8d4e2
  • badge.foreground#232022
  • breadcrumb.activeSelectionForeground#e2d7dc
  • breadcrumb.focusForeground#e2d7dc
  • breadcrumb.foreground#9e7688
  • button.background#e8d4e2
  • button.foreground#232022
  • button.hoverBackground#ead8e5
  • button.secondaryBackground#332f32
  • button.secondaryForeground#e2d7dc
  • descriptionForeground#9e7688
  • dropdown.background#272426
  • dropdown.border#464044
  • dropdown.foreground#e2d7dc
  • editor.background#1c191b
  • editor.findMatchBackground#1b2a6b66
  • editor.findMatchHighlightBackground#1b2a6b33
  • editor.foreground#e2d7dc
  • editor.inactiveSelectionBackground#e8d4e226
  • editor.lineHighlightBackground#e8d4e21a
  • editor.lineHighlightBorder#e8d4e200
  • editor.selectionBackground#e8d4e24d
  • editor.wordHighlightBackground#e8d4e233
  • editorBracketMatch.background#e8d4e240
  • editorBracketMatch.border#e8d4e299
  • editorCursor.foreground#e8d4e2
  • editorError.foreground#dd4132
  • editorGroup.border#464044
  • editorGroupHeader.tabsBackground#272426
  • editorGroupHeader.tabsBorder#464044
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e2d7dc33
  • editorIndentGuide.background#e2d7dc14
  • editorInfo.foreground#00b140
  • editorLineNumber.activeForeground#e2d7dc
  • editorLineNumber.foreground#9e7688
  • editorRuler.foreground#e2d7dc14
  • editorSuggestWidget.selectedBackground#e8d4e240
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e2d7dc1a
  • editorWidget.background#272426
  • editorWidget.border#464044
  • focusBorder#e8d4e299
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#9e7688
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#9e7688
  • input.background#272426
  • input.border#464044
  • input.foreground#e2d7dc
  • input.placeholderForeground#9e7688
  • inputOption.activeBorder#e8d4e2
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#00b140
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#e8d4e24d
  • list.activeSelectionForeground#e2d7dc
  • list.focusBackground#e8d4e233
  • list.highlightForeground#e8d4e2
  • list.hoverBackground#e8d4e226
  • list.inactiveSelectionBackground#e8d4e226
  • minimap.background#1c191b
  • minimap.findMatchHighlight#1b2a6b99
  • minimap.selectionHighlight#e8d4e266
  • notificationLink.foreground#e8d4e2
  • notifications.background#332f32
  • notifications.foreground#e2d7dc
  • panel.background#272426
  • panel.border#464044
  • panelTitle.activeBorder#e8d4e2
  • panelTitle.activeForeground#e2d7dc
  • panelTitle.inactiveForeground#9e7688
  • peekView.border#e8d4e2
  • peekViewEditor.background#272426
  • peekViewResult.background#332f32
  • peekViewTitle.background#272426
  • progressBar.background#e8d4e2
  • scrollbar.shadow#17151745
  • scrollbarSlider.activeBackground#e2d7dc59
  • scrollbarSlider.background#e2d7dc1f
  • scrollbarSlider.hoverBackground#e2d7dc40
  • selection.background#e8d4e24d
  • sideBar.background#332f32
  • sideBar.border#464044
  • sideBar.foreground#e2d7dc
  • sideBarSectionHeader.background#e8d4e226
  • sideBarSectionHeader.foreground#e2d7dc
  • sideBarTitle.foreground#e2d7dc
  • statusBar.background#8b7f88
  • statusBar.border#464044
  • statusBar.debuggingBackground#00b140
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f1e5ee
  • statusBar.noFolderBackground#272426
  • statusBarItem.hoverBackground#e8d4e24d
  • statusBarItem.remoteBackground#e8d4e2
  • statusBarItem.remoteForeground#232022
  • tab.activeBackground#1c191b
  • tab.activeBorder#e8d4e2
  • tab.activeBorderTop#e8d4e200
  • tab.activeForeground#e2d7dc
  • tab.border#464044
  • tab.inactiveBackground#272426
  • tab.inactiveForeground#9e7688
  • terminal.ansiBlack#1c191b
  • terminal.ansiBlue#7c90b2
  • terminal.ansiBrightBlack#9e7688
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#e2d7dc
  • terminal.ansiYellow#efc050
  • terminal.background#272426
  • terminal.foreground#e2d7dc
  • terminalCursor.foreground#e8d4e2
  • textLink.activeForeground#26bd5d
  • textLink.foreground#00b140
  • titleBar.activeBackground#272426
  • titleBar.activeForeground#e2d7dc
  • titleBar.border#464044
  • titleBar.inactiveBackground#272426
  • titleBar.inactiveForeground#9e7688

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#9e7688italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#e8d4e2bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#e8d4e2bold
storage.type, storage.modifier#e8d4e2bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#00b140
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#e8d4e2
string.regexp#00b140
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#7f87ac
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#927d7ebold
variable.other.constant, variable.other.enummember#927d7ebold
constant.character.escape#ebdae6
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#b37991italic
entity.name.type.parameter#b37991italic
entity.name.function, meta.function entity.name.function#b0d7e1bold
meta.function-call entity.name.function, support.function#b0d7e1
meta.method-call entity.name.function, entity.name.function.member#b0d7e1
variable, variable.other, variable.other.readwrite#e2d7dc
variable.parameter#e2d7dcitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#e8d4e2italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e2d7dc
entity.name.class, entity.name.type.class, support.class#c5ac7dbold italic
entity.other.inherited-class#c5ac7ditalic
entity.name.tag, punctuation.definition.tag#e8d4e2bold
entity.other.attribute-name#b0d7e1italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ebdae6
punctuation, punctuation.separator, punctuation.terminator, meta.brace#9e7688
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b37991italic
support.type.property-name.css, support.type.vendored.property-name.css#b37991
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c5ac7dbold
support.constant.property-value.css, support.constant.color.css#927d7e
keyword.other.unit.css#7f87ac
support.type.property-name.json#b37991
markup.heading, markup.heading entity.name, entity.name.section.markdown#e8d4e2bold
markup.bold#927d7ebold
markup.italic#b37991italic
markup.inline.raw, markup.raw#00b140
markup.underline.link#b0d7e1
markup.quote#9e7688italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050