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#2d0413
  • activityBar.border#48071f
  • activityBar.foreground#d4145a
  • activityBar.inactiveForeground#983c5f
  • activityBarBadge.background#86d0bf
  • activityBarBadge.foreground#f5f1f2
  • badge.background#d4145a
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#e1c9d2
  • breadcrumb.focusForeground#e1c9d2
  • breadcrumb.foreground#983c5f
  • button.background#d4145a
  • button.foreground#f5f1f2
  • button.hoverBackground#d82c6b
  • button.secondaryBackground#370517
  • button.secondaryForeground#e1c9d2
  • descriptionForeground#983c5f
  • dropdown.background#2d0413
  • dropdown.border#48071f
  • dropdown.foreground#e1c9d2
  • editor.background#22030e
  • editor.findMatchBackground#6667ab66
  • editor.findMatchHighlightBackground#6667ab33
  • editor.foreground#e1c9d2
  • editor.inactiveSelectionBackground#d4145a26
  • editor.lineHighlightBackground#d4145a1a
  • editor.lineHighlightBorder#d4145a00
  • editor.selectionBackground#d4145a4d
  • editor.wordHighlightBackground#d4145a33
  • editorBracketMatch.background#d4145a40
  • editorBracketMatch.border#d4145a99
  • editorCursor.foreground#d4145a
  • editorError.foreground#dd4132
  • editorGroup.border#48071f
  • editorGroupHeader.tabsBackground#2d0413
  • editorGroupHeader.tabsBorder#48071f
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e1c9d233
  • editorIndentGuide.background#e1c9d214
  • editorInfo.foreground#86d0bf
  • editorLineNumber.activeForeground#e1c9d2
  • editorLineNumber.foreground#983c5f
  • editorRuler.foreground#e1c9d214
  • editorSuggestWidget.selectedBackground#d4145a40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e1c9d21a
  • editorWidget.background#2d0413
  • editorWidget.border#48071f
  • focusBorder#d4145a99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#983c5f
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#983c5f
  • input.background#2d0413
  • input.border#48071f
  • input.foreground#e1c9d2
  • input.placeholderForeground#983c5f
  • inputOption.activeBorder#d4145a
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#86d0bf
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#d4145a4d
  • list.activeSelectionForeground#e1c9d2
  • list.focusBackground#d4145a33
  • list.highlightForeground#d4145a
  • list.hoverBackground#d4145a26
  • list.inactiveSelectionBackground#d4145a26
  • minimap.background#22030e
  • minimap.findMatchHighlight#6667ab99
  • minimap.selectionHighlight#d4145a66
  • notificationLink.foreground#d4145a
  • notifications.background#370517
  • notifications.foreground#e1c9d2
  • panel.background#2d0413
  • panel.border#48071f
  • panelTitle.activeBorder#d4145a
  • panelTitle.activeForeground#e1c9d2
  • panelTitle.inactiveForeground#983c5f
  • peekView.border#d4145a
  • peekViewEditor.background#2d0413
  • peekViewResult.background#370517
  • peekViewTitle.background#2d0413
  • progressBar.background#d4145a
  • scrollbar.shadow#15020945
  • scrollbarSlider.activeBackground#e1c9d259
  • scrollbarSlider.background#e1c9d21f
  • scrollbarSlider.hoverBackground#e1c9d240
  • selection.background#d4145a4d
  • sideBar.background#370517
  • sideBar.border#48071f
  • sideBar.foreground#e1c9d2
  • sideBarSectionHeader.background#d4145a26
  • sideBarSectionHeader.foreground#e1c9d2
  • sideBarTitle.foreground#e1c9d2
  • statusBar.background#7f0c36
  • statusBar.border#48071f
  • statusBar.debuggingBackground#86d0bf
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#e5729c
  • statusBar.noFolderBackground#2d0413
  • statusBarItem.hoverBackground#d4145a4d
  • statusBarItem.remoteBackground#d4145a
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#22030e
  • tab.activeBorder#d4145a
  • tab.activeBorderTop#d4145a00
  • tab.activeForeground#e1c9d2
  • tab.border#48071f
  • tab.inactiveBackground#2d0413
  • tab.inactiveForeground#983c5f
  • terminal.ansiBlack#22030e
  • terminal.ansiBlue#72306e
  • terminal.ansiBrightBlack#983c5f
  • 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#e1c9d2
  • terminal.ansiYellow#efc050
  • terminal.background#2d0413
  • terminal.foreground#e1c9d2
  • terminalCursor.foreground#d4145a
  • textLink.activeForeground#98d7c9
  • textLink.foreground#86d0bf
  • titleBar.activeBackground#2d0413
  • titleBar.activeForeground#e1c9d2
  • titleBar.border#48071f
  • titleBar.inactiveBackground#2d0413
  • titleBar.inactiveForeground#983c5f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#983c5fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#dd487ebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#dd487ebold
storage.type, storage.modifier#dd487ebold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#86d0bf
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#dd487e
string.regexp#86d0bf
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#7d7eb8
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#a47864bold
variable.other.constant, variable.other.enummember#a47864bold
constant.character.escape#dd477e
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#a96c71italic
entity.name.type.parameter#a96c71italic
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#e1c9d2
variable.parameter#e1c9d2italic
variable.language, variable.language.this, variable.language.self, variable.language.super#dd487eitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#e1c9d2
entity.name.class, entity.name.type.class, support.class#e8e835bold italic
entity.other.inherited-class#e8e835italic
entity.name.tag, punctuation.definition.tag#dd487ebold
entity.other.attribute-name#b0d7e1italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#dd477e
punctuation, punctuation.separator, punctuation.terminator, meta.brace#983c5f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#a96c71italic
support.type.property-name.css, support.type.vendored.property-name.css#a96c71
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e8e835bold
support.constant.property-value.css, support.constant.color.css#a47864
keyword.other.unit.css#7d7eb8
support.type.property-name.json#a96c71
markup.heading, markup.heading entity.name, entity.name.section.markdown#dd487ebold
markup.bold#a47864bold
markup.italic#a96c71italic
markup.inline.raw, markup.raw#86d0bf
markup.underline.link#b0d7e1
markup.quote#983c5fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050