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#2b0a1b
  • activityBar.border#4d1230
  • activityBar.foreground#ff3ca0
  • activityBar.inactiveForeground#a54874
  • activityBarBadge.background#00b140
  • activityBarBadge.foreground#f5f1f2
  • badge.background#ff3ca0
  • badge.foreground#260918
  • breadcrumb.activeSelectionForeground#e4ccd7
  • breadcrumb.focusForeground#e4ccd7
  • breadcrumb.foreground#a54874
  • button.background#ff3ca0
  • button.foreground#260918
  • button.hoverBackground#ff50aa
  • button.secondaryBackground#380d23
  • button.secondaryForeground#e4ccd7
  • descriptionForeground#a54874
  • dropdown.background#2b0a1b
  • dropdown.border#4d1230
  • dropdown.foreground#e4ccd7
  • editor.background#1f0713
  • editor.findMatchBackground#6667ab66
  • editor.findMatchHighlightBackground#6667ab33
  • editor.foreground#e4ccd7
  • editor.inactiveSelectionBackground#ff3ca026
  • editor.lineHighlightBackground#ff3ca01a
  • editor.lineHighlightBorder#ff3ca000
  • editor.selectionBackground#ff3ca04d
  • editor.wordHighlightBackground#ff3ca033
  • editorBracketMatch.background#ff3ca040
  • editorBracketMatch.border#ff3ca099
  • editorCursor.foreground#ff3ca0
  • editorError.foreground#dd4132
  • editorGroup.border#4d1230
  • editorGroupHeader.tabsBackground#2b0a1b
  • editorGroupHeader.tabsBorder#4d1230
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e4ccd733
  • editorIndentGuide.background#e4ccd714
  • editorInfo.foreground#00b140
  • editorLineNumber.activeForeground#e4ccd7
  • editorLineNumber.foreground#a54874
  • editorRuler.foreground#e4ccd714
  • editorSuggestWidget.selectedBackground#ff3ca040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e4ccd71a
  • editorWidget.background#2b0a1b
  • editorWidget.border#4d1230
  • focusBorder#ff3ca099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#a54874
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#a54874
  • input.background#2b0a1b
  • input.border#4d1230
  • input.foreground#e4ccd7
  • input.placeholderForeground#a54874
  • inputOption.activeBorder#ff3ca0
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#00b140
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#ff3ca04d
  • list.activeSelectionForeground#e4ccd7
  • list.focusBackground#ff3ca033
  • list.highlightForeground#ff3ca0
  • list.hoverBackground#ff3ca026
  • list.inactiveSelectionBackground#ff3ca026
  • minimap.background#1f0713
  • minimap.findMatchHighlight#6667ab99
  • minimap.selectionHighlight#ff3ca066
  • notificationLink.foreground#ff3ca0
  • notifications.background#380d23
  • notifications.foreground#e4ccd7
  • panel.background#2b0a1b
  • panel.border#4d1230
  • panelTitle.activeBorder#ff3ca0
  • panelTitle.activeForeground#e4ccd7
  • panelTitle.inactiveForeground#a54874
  • peekView.border#ff3ca0
  • peekViewEditor.background#2b0a1b
  • peekViewResult.background#380d23
  • peekViewTitle.background#2b0a1b
  • progressBar.background#ff3ca0
  • scrollbar.shadow#19061045
  • scrollbarSlider.activeBackground#e4ccd759
  • scrollbarSlider.background#e4ccd71f
  • scrollbarSlider.hoverBackground#e4ccd740
  • selection.background#ff3ca04d
  • sideBar.background#380d23
  • sideBar.border#4d1230
  • sideBar.foreground#e4ccd7
  • sideBarSectionHeader.background#ff3ca026
  • sideBarSectionHeader.foreground#e4ccd7
  • sideBarTitle.foreground#e4ccd7
  • statusBar.background#992460
  • statusBar.border#4d1230
  • statusBar.debuggingBackground#00b140
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#ff8ac6
  • statusBar.noFolderBackground#2b0a1b
  • statusBarItem.hoverBackground#ff3ca04d
  • statusBarItem.remoteBackground#ff3ca0
  • statusBarItem.remoteForeground#260918
  • tab.activeBackground#1f0713
  • tab.activeBorder#ff3ca0
  • tab.activeBorderTop#ff3ca000
  • tab.activeForeground#e4ccd7
  • tab.border#4d1230
  • tab.inactiveBackground#2b0a1b
  • tab.inactiveForeground#a54874
  • terminal.ansiBlack#1f0713
  • terminal.ansiBlue#874491
  • terminal.ansiBrightBlack#a54874
  • 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#e4ccd7
  • terminal.ansiYellow#efc050
  • terminal.background#2b0a1b
  • terminal.foreground#e4ccd7
  • terminalCursor.foreground#ff3ca0
  • textLink.activeForeground#26bd5d
  • textLink.foreground#00b140
  • titleBar.activeBackground#2b0a1b
  • titleBar.activeForeground#e4ccd7
  • titleBar.border#4d1230
  • titleBar.inactiveBackground#2b0a1b
  • titleBar.inactiveForeground#a54874

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a54874italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ff3ca0bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ff3ca0bold
storage.type, storage.modifier#ff3ca0bold
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#ff3ca0
string.regexp#00b140
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#7d7eb8
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#e2583ebold
variable.other.constant, variable.other.enummember#e2583ebold
constant.character.escape#ff59ae
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#d94f70italic
entity.name.type.parameter#d94f70italic
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#e4ccd7
variable.parameter#e4ccd7italic
variable.language, variable.language.this, variable.language.self, variable.language.super#ff3ca0italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e4ccd7
entity.name.class, entity.name.type.class, support.class#f5df4dbold italic
entity.other.inherited-class#f5df4ditalic
entity.name.tag, punctuation.definition.tag#ff3ca0bold
entity.other.attribute-name#b0d7e1italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ff59ae
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a54874
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#d94f70italic
support.type.property-name.css, support.type.vendored.property-name.css#d94f70
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#f5df4dbold
support.constant.property-value.css, support.constant.color.css#e2583e
keyword.other.unit.css#7d7eb8
support.type.property-name.json#d94f70
markup.heading, markup.heading entity.name, entity.name.section.markdown#ff3ca0bold
markup.bold#e2583ebold
markup.italic#d94f70italic
markup.inline.raw, markup.raw#00b140
markup.underline.link#b0d7e1
markup.quote#a54874italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050