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#1e152b
  • activityBar.border#312246
  • activityBar.foreground#9063cd
  • activityBar.inactiveForeground#62587b
  • activityBarBadge.background#78be20
  • activityBarBadge.foreground#f1f1f2
  • badge.background#9063cd
  • badge.foreground#160f1f
  • breadcrumb.activeSelectionForeground#d2d0d8
  • breadcrumb.focusForeground#d2d0d8
  • breadcrumb.foreground#62587b
  • button.background#9063cd
  • button.foreground#160f1f
  • button.hoverBackground#9b73d2
  • button.secondaryBackground#251a35
  • button.secondaryForeground#d2d0d8
  • descriptionForeground#62587b
  • dropdown.background#1e152b
  • dropdown.border#312246
  • dropdown.foreground#d2d0d8
  • editor.background#171021
  • editor.findMatchBackground#53b0ae66
  • editor.findMatchHighlightBackground#53b0ae33
  • editor.foreground#d2d0d8
  • editor.inactiveSelectionBackground#9063cd26
  • editor.lineHighlightBackground#9063cd1a
  • editor.lineHighlightBorder#9063cd00
  • editor.selectionBackground#9063cd4d
  • editor.wordHighlightBackground#9063cd33
  • editorBracketMatch.background#9063cd40
  • editorBracketMatch.border#9063cd99
  • editorCursor.foreground#9063cd
  • editorError.foreground#dd4132
  • editorGroup.border#312246
  • editorGroupHeader.tabsBackground#1e152b
  • editorGroupHeader.tabsBorder#312246
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d2d0d833
  • editorIndentGuide.background#d2d0d814
  • editorInfo.foreground#78be20
  • editorLineNumber.activeForeground#d2d0d8
  • editorLineNumber.foreground#62587b
  • editorRuler.foreground#d2d0d814
  • editorSuggestWidget.selectedBackground#9063cd40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d2d0d81a
  • editorWidget.background#1e152b
  • editorWidget.border#312246
  • focusBorder#9063cd99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#62587b
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#62587b
  • input.background#1e152b
  • input.border#312246
  • input.foreground#d2d0d8
  • input.placeholderForeground#62587b
  • inputOption.activeBorder#9063cd
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#78be20
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#9063cd4d
  • list.activeSelectionForeground#d2d0d8
  • list.focusBackground#9063cd33
  • list.highlightForeground#9063cd
  • list.hoverBackground#9063cd26
  • list.inactiveSelectionBackground#9063cd26
  • minimap.background#171021
  • minimap.findMatchHighlight#53b0ae99
  • minimap.selectionHighlight#9063cd66
  • notificationLink.foreground#9063cd
  • notifications.background#251a35
  • notifications.foreground#d2d0d8
  • panel.background#1e152b
  • panel.border#312246
  • panelTitle.activeBorder#9063cd
  • panelTitle.activeForeground#d2d0d8
  • panelTitle.inactiveForeground#62587b
  • peekView.border#9063cd
  • peekViewEditor.background#1e152b
  • peekViewResult.background#251a35
  • peekViewTitle.background#1e152b
  • progressBar.background#9063cd
  • scrollbar.shadow#0e0a1445
  • scrollbarSlider.activeBackground#d2d0d859
  • scrollbarSlider.background#d2d0d81f
  • scrollbarSlider.hoverBackground#d2d0d840
  • selection.background#9063cd4d
  • sideBar.background#251a35
  • sideBar.border#312246
  • sideBar.foreground#d2d0d8
  • sideBarSectionHeader.background#9063cd26
  • sideBarSectionHeader.foreground#d2d0d8
  • sideBarTitle.foreground#d2d0d8
  • statusBar.background#563b7b
  • statusBar.border#312246
  • statusBar.debuggingBackground#78be20
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#bca1e1
  • statusBar.noFolderBackground#1e152b
  • statusBarItem.hoverBackground#9063cd4d
  • statusBarItem.remoteBackground#9063cd
  • statusBarItem.remoteForeground#160f1f
  • tab.activeBackground#171021
  • tab.activeBorder#9063cd
  • tab.activeBorderTop#9063cd00
  • tab.activeForeground#d2d0d8
  • tab.border#312246
  • tab.inactiveBackground#1e152b
  • tab.inactiveForeground#62587b
  • terminal.ansiBlack#171021
  • terminal.ansiBlue#5058a7
  • terminal.ansiBrightBlack#62587b
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f1f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#d2d0d8
  • terminal.ansiYellow#efc050
  • terminal.background#1e152b
  • terminal.foreground#d2d0d8
  • terminalCursor.foreground#9063cd
  • textLink.activeForeground#8cc841
  • textLink.foreground#78be20
  • titleBar.activeBackground#1e152b
  • titleBar.activeForeground#d2d0d8
  • titleBar.border#312246
  • titleBar.inactiveBackground#1e152b
  • titleBar.inactiveForeground#62587b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#62587bitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#996fd1bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#996fd1bold
storage.type, storage.modifier#996fd1bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#78be20
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#996fd1
string.regexp#78be20
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#53b0ae
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#b163a3bold
variable.other.constant, variable.other.enummember#b163a3bold
constant.character.escape#a17ad5
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#7d7eb8italic
entity.name.type.parameter#7d7eb8italic
entity.name.function, meta.function entity.name.function#decdbebold
meta.function-call entity.name.function, support.function#decdbe
meta.method-call entity.name.function, entity.name.function.member#decdbe
variable, variable.other, variable.other.readwrite#d2d0d8
variable.parameter#d2d0d8italic
variable.language, variable.language.this, variable.language.self, variable.language.super#996fd1italic
variable.other.property, variable.other.object.property, meta.object-literal.key#d2d0d8
entity.name.class, entity.name.type.class, support.class#d94f70bold italic
entity.other.inherited-class#d94f70italic
entity.name.tag, punctuation.definition.tag#996fd1bold
entity.other.attribute-name#decdbeitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#a17ad5
punctuation, punctuation.separator, punctuation.terminator, meta.brace#62587b
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#7d7eb8italic
support.type.property-name.css, support.type.vendored.property-name.css#7d7eb8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#d94f70bold
support.constant.property-value.css, support.constant.color.css#b163a3
keyword.other.unit.css#53b0ae
support.type.property-name.json#7d7eb8
markup.heading, markup.heading entity.name, entity.name.section.markdown#996fd1bold
markup.bold#b163a3bold
markup.italic#7d7eb8italic
markup.inline.raw, markup.raw#78be20
markup.underline.link#decdbe
markup.quote#62587bitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050