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#251522
  • activityBar.border#3c2237
  • activityBar.foreground#b163a3
  • activityBar.inactiveForeground#8d5475
  • activityBarBadge.background#76ff7b
  • activityBarBadge.foreground#f5f1f2
  • badge.background#b163a3
  • badge.foreground#1b0f18
  • breadcrumb.activeSelectionForeground#dfcfd8
  • breadcrumb.focusForeground#dfcfd8
  • breadcrumb.foreground#8d5475
  • button.background#b163a3
  • button.foreground#1b0f18
  • button.hoverBackground#b973ac
  • button.secondaryBackground#2e1a2a
  • button.secondaryForeground#dfcfd8
  • descriptionForeground#8d5475
  • dropdown.background#251522
  • dropdown.border#3c2237
  • dropdown.foreground#dfcfd8
  • editor.background#1c101a
  • editor.findMatchBackground#1b2a6b66
  • editor.findMatchHighlightBackground#1b2a6b33
  • editor.foreground#dfcfd8
  • editor.inactiveSelectionBackground#b163a326
  • editor.lineHighlightBackground#b163a31a
  • editor.lineHighlightBorder#b163a300
  • editor.selectionBackground#b163a34d
  • editor.wordHighlightBackground#b163a333
  • editorBracketMatch.background#b163a340
  • editorBracketMatch.border#b163a399
  • editorCursor.foreground#b163a3
  • editorError.foreground#dd4132
  • editorGroup.border#3c2237
  • editorGroupHeader.tabsBackground#251522
  • editorGroupHeader.tabsBorder#3c2237
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dfcfd833
  • editorIndentGuide.background#dfcfd814
  • editorInfo.foreground#76ff7b
  • editorLineNumber.activeForeground#dfcfd8
  • editorLineNumber.foreground#8d5475
  • editorRuler.foreground#dfcfd814
  • editorSuggestWidget.selectedBackground#b163a340
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dfcfd81a
  • editorWidget.background#251522
  • editorWidget.border#3c2237
  • focusBorder#b163a399
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#8d5475
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#8d5475
  • input.background#251522
  • input.border#3c2237
  • input.foreground#dfcfd8
  • input.placeholderForeground#8d5475
  • inputOption.activeBorder#b163a3
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#76ff7b
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#b163a34d
  • list.activeSelectionForeground#dfcfd8
  • list.focusBackground#b163a333
  • list.highlightForeground#b163a3
  • list.hoverBackground#b163a326
  • list.inactiveSelectionBackground#b163a326
  • minimap.background#1c101a
  • minimap.findMatchHighlight#1b2a6b99
  • minimap.selectionHighlight#b163a366
  • notificationLink.foreground#b163a3
  • notifications.background#2e1a2a
  • notifications.foreground#dfcfd8
  • panel.background#251522
  • panel.border#3c2237
  • panelTitle.activeBorder#b163a3
  • panelTitle.activeForeground#dfcfd8
  • panelTitle.inactiveForeground#8d5475
  • peekView.border#b163a3
  • peekViewEditor.background#251522
  • peekViewResult.background#2e1a2a
  • peekViewTitle.background#251522
  • progressBar.background#b163a3
  • scrollbar.shadow#120a1045
  • scrollbarSlider.activeBackground#dfcfd859
  • scrollbarSlider.background#dfcfd81f
  • scrollbarSlider.hoverBackground#dfcfd840
  • selection.background#b163a34d
  • sideBar.background#2e1a2a
  • sideBar.border#3c2237
  • sideBar.foreground#dfcfd8
  • sideBarSectionHeader.background#b163a326
  • sideBarSectionHeader.foreground#dfcfd8
  • sideBarTitle.foreground#dfcfd8
  • statusBar.background#6a3b62
  • statusBar.border#3c2237
  • statusBar.debuggingBackground#76ff7b
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#d0a1c8
  • statusBar.noFolderBackground#251522
  • statusBarItem.hoverBackground#b163a34d
  • statusBarItem.remoteBackground#b163a3
  • statusBarItem.remoteForeground#1b0f18
  • tab.activeBackground#1c101a
  • tab.activeBorder#b163a3
  • tab.activeBorderTop#b163a300
  • tab.activeForeground#dfcfd8
  • tab.border#3c2237
  • tab.inactiveBackground#251522
  • tab.inactiveForeground#8d5475
  • terminal.ansiBlack#1c101a
  • terminal.ansiBlue#605892
  • terminal.ansiBrightBlack#8d5475
  • 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#dfcfd8
  • terminal.ansiYellow#efc050
  • terminal.background#251522
  • terminal.foreground#dfcfd8
  • terminalCursor.foreground#b163a3
  • textLink.activeForeground#8bff8f
  • textLink.foreground#76ff7b
  • titleBar.activeBackground#251522
  • titleBar.activeForeground#dfcfd8
  • titleBar.border#3c2237
  • titleBar.inactiveBackground#251522
  • titleBar.inactiveForeground#8d5475

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#8d5475italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#b163a3bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#b163a3bold
storage.type, storage.modifier#b163a3bold
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#b163a3
string.regexp#76ff7b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#747da5
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#d15a6cbold
variable.other.constant, variable.other.enummember#d15a6cbold
constant.character.escape#bd7ab1
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#ad6ab3italic
entity.name.type.parameter#ad6ab3italic
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#dfcfd8
variable.parameter#dfcfd8italic
variable.language, variable.language.this, variable.language.self, variable.language.super#b163a3italic
variable.other.property, variable.other.object.property, meta.object-literal.key#dfcfd8
entity.name.class, entity.name.type.class, support.class#ffaa4dbold italic
entity.other.inherited-class#ffaa4ditalic
entity.name.tag, punctuation.definition.tag#b163a3bold
entity.other.attribute-name#b0d7e1italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#bd7ab1
punctuation, punctuation.separator, punctuation.terminator, meta.brace#8d5475
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ad6ab3italic
support.type.property-name.css, support.type.vendored.property-name.css#ad6ab3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffaa4dbold
support.constant.property-value.css, support.constant.color.css#d15a6c
keyword.other.unit.css#747da5
support.type.property-name.json#ad6ab3
markup.heading, markup.heading entity.name, entity.name.section.markdown#b163a3bold
markup.bold#d15a6cbold
markup.italic#ad6ab3italic
markup.inline.raw, markup.raw#76ff7b
markup.underline.link#b0d7e1
markup.quote#8d5475italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050