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#211123
  • activityBar.border#361b38
  • activityBar.foreground#9e4fa5
  • activityBar.inactiveForeground#884e75
  • activityBarBadge.background#76ff7b
  • activityBarBadge.foreground#f5f1f2
  • badge.background#9e4fa5
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#ddcdd8
  • breadcrumb.focusForeground#ddcdd8
  • breadcrumb.foreground#884e75
  • button.background#9e4fa5
  • button.foreground#f5f1f2
  • button.hoverBackground#a861ae
  • button.secondaryBackground#29152b
  • button.secondaryForeground#ddcdd8
  • descriptionForeground#884e75
  • dropdown.background#211123
  • dropdown.border#361b38
  • dropdown.foreground#ddcdd8
  • editor.background#190d1a
  • editor.findMatchBackground#c5ac7d66
  • editor.findMatchHighlightBackground#c5ac7d33
  • editor.foreground#ddcdd8
  • editor.inactiveSelectionBackground#9e4fa526
  • editor.lineHighlightBackground#9e4fa51a
  • editor.lineHighlightBorder#9e4fa500
  • editor.selectionBackground#9e4fa54d
  • editor.wordHighlightBackground#9e4fa533
  • editorBracketMatch.background#9e4fa540
  • editorBracketMatch.border#9e4fa599
  • editorCursor.foreground#9e4fa5
  • editorError.foreground#dd4132
  • editorGroup.border#361b38
  • editorGroupHeader.tabsBackground#211123
  • editorGroupHeader.tabsBorder#361b38
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#ddcdd833
  • editorIndentGuide.background#ddcdd814
  • editorInfo.foreground#76ff7b
  • editorLineNumber.activeForeground#ddcdd8
  • editorLineNumber.foreground#884e75
  • editorRuler.foreground#ddcdd814
  • editorSuggestWidget.selectedBackground#9e4fa540
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#ddcdd81a
  • editorWidget.background#211123
  • editorWidget.border#361b38
  • focusBorder#9e4fa599
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#884e75
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#884e75
  • input.background#211123
  • input.border#361b38
  • input.foreground#ddcdd8
  • input.placeholderForeground#884e75
  • inputOption.activeBorder#9e4fa5
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#76ff7b
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#9e4fa54d
  • list.activeSelectionForeground#ddcdd8
  • list.focusBackground#9e4fa533
  • list.highlightForeground#9e4fa5
  • list.hoverBackground#9e4fa526
  • list.inactiveSelectionBackground#9e4fa526
  • minimap.background#190d1a
  • minimap.findMatchHighlight#c5ac7d99
  • minimap.selectionHighlight#9e4fa566
  • notificationLink.foreground#9e4fa5
  • notifications.background#29152b
  • notifications.foreground#ddcdd8
  • panel.background#211123
  • panel.border#361b38
  • panelTitle.activeBorder#9e4fa5
  • panelTitle.activeForeground#ddcdd8
  • panelTitle.inactiveForeground#884e75
  • peekView.border#9e4fa5
  • peekViewEditor.background#211123
  • peekViewResult.background#29152b
  • peekViewTitle.background#211123
  • progressBar.background#9e4fa5
  • scrollbar.shadow#10081045
  • scrollbarSlider.activeBackground#ddcdd859
  • scrollbarSlider.background#ddcdd81f
  • scrollbarSlider.hoverBackground#ddcdd840
  • selection.background#9e4fa54d
  • sideBar.background#29152b
  • sideBar.border#361b38
  • sideBar.foreground#ddcdd8
  • sideBarSectionHeader.background#9e4fa526
  • sideBarSectionHeader.foreground#ddcdd8
  • sideBarTitle.foreground#ddcdd8
  • statusBar.background#5f2f63
  • statusBar.border#361b38
  • statusBar.debuggingBackground#76ff7b
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#c595c9
  • statusBar.noFolderBackground#211123
  • statusBarItem.hoverBackground#9e4fa54d
  • statusBarItem.remoteBackground#9e4fa5
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#190d1a
  • tab.activeBorder#9e4fa5
  • tab.activeBorderTop#9e4fa500
  • tab.activeForeground#ddcdd8
  • tab.border#361b38
  • tab.inactiveBackground#211123
  • tab.inactiveForeground#884e75
  • terminal.ansiBlack#190d1a
  • terminal.ansiBlue#574e93
  • terminal.ansiBrightBlack#884e75
  • 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#ddcdd8
  • terminal.ansiYellow#efc050
  • terminal.background#211123
  • terminal.foreground#ddcdd8
  • terminalCursor.foreground#9e4fa5
  • textLink.activeForeground#8bff8f
  • textLink.foreground#76ff7b
  • titleBar.activeBackground#211123
  • titleBar.activeForeground#ddcdd8
  • titleBar.border#361b38
  • titleBar.inactiveBackground#211123
  • titleBar.inactiveForeground#884e75

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#884e75italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ad6ab3bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ad6ab3bold
storage.type, storage.modifier#ad6ab3bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#76ff7b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ad6ab3
string.regexp#76ff7b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#c5ac7d
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#9b7485bold
variable.other.constant, variable.other.enummember#9b7485bold
constant.character.escape#ad69b3
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#b163a3italic
entity.name.type.parameter#b163a3italic
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#ddcdd8
variable.parameter#ddcdd8italic
variable.language, variable.language.this, variable.language.self, variable.language.super#ad6ab3italic
variable.other.property, variable.other.object.property, meta.object-literal.key#ddcdd8
entity.name.class, entity.name.type.class, support.class#ff7b43bold italic
entity.other.inherited-class#ff7b43italic
entity.name.tag, punctuation.definition.tag#ad6ab3bold
entity.other.attribute-name#b0d7e1italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ad69b3
punctuation, punctuation.separator, punctuation.terminator, meta.brace#884e75
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b163a3italic
support.type.property-name.css, support.type.vendored.property-name.css#b163a3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff7b43bold
support.constant.property-value.css, support.constant.color.css#9b7485
keyword.other.unit.css#c5ac7d
support.type.property-name.json#b163a3
markup.heading, markup.heading entity.name, entity.name.section.markdown#ad6ab3bold
markup.bold#9b7485bold
markup.italic#b163a3italic
markup.inline.raw, markup.raw#76ff7b
markup.underline.link#b0d7e1
markup.quote#884e75italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050