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#28050a
  • activityBar.border#410911
  • activityBar.foreground#bf1932
  • activityBar.inactiveForeground#923d53
  • activityBarBadge.background#45b5aa
  • activityBarBadge.foreground#f5f1f2
  • badge.background#bf1932
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#dfcacf
  • breadcrumb.focusForeground#dfcacf
  • breadcrumb.foreground#923d53
  • button.background#bf1932
  • button.foreground#f5f1f2
  • button.hoverBackground#c53047
  • button.secondaryBackground#32070d
  • button.secondaryForeground#dfcacf
  • descriptionForeground#923d53
  • dropdown.background#28050a
  • dropdown.border#410911
  • dropdown.foreground#dfcacf
  • editor.background#1f0408
  • editor.findMatchBackground#a3af8666
  • editor.findMatchHighlightBackground#a3af8633
  • editor.foreground#dfcacf
  • editor.inactiveSelectionBackground#bf193226
  • editor.lineHighlightBackground#bf19321a
  • editor.lineHighlightBorder#bf193200
  • editor.selectionBackground#bf19324d
  • editor.wordHighlightBackground#bf193233
  • editorBracketMatch.background#bf193240
  • editorBracketMatch.border#bf193299
  • editorCursor.foreground#bf1932
  • editorError.foreground#dd4132
  • editorGroup.border#410911
  • editorGroupHeader.tabsBackground#28050a
  • editorGroupHeader.tabsBorder#410911
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dfcacf33
  • editorIndentGuide.background#dfcacf14
  • editorInfo.foreground#45b5aa
  • editorLineNumber.activeForeground#dfcacf
  • editorLineNumber.foreground#923d53
  • editorRuler.foreground#dfcacf14
  • editorSuggestWidget.selectedBackground#bf193240
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dfcacf1a
  • editorWidget.background#28050a
  • editorWidget.border#410911
  • focusBorder#bf193299
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#923d53
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#923d53
  • input.background#28050a
  • input.border#410911
  • input.foreground#dfcacf
  • input.placeholderForeground#923d53
  • inputOption.activeBorder#bf1932
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#45b5aa
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#bf19324d
  • list.activeSelectionForeground#dfcacf
  • list.focusBackground#bf193233
  • list.highlightForeground#bf1932
  • list.hoverBackground#bf193226
  • list.inactiveSelectionBackground#bf193226
  • minimap.background#1f0408
  • minimap.findMatchHighlight#a3af8699
  • minimap.selectionHighlight#bf193266
  • notificationLink.foreground#bf1932
  • notifications.background#32070d
  • notifications.foreground#dfcacf
  • panel.background#28050a
  • panel.border#410911
  • panelTitle.activeBorder#bf1932
  • panelTitle.activeForeground#dfcacf
  • panelTitle.inactiveForeground#923d53
  • peekView.border#bf1932
  • peekViewEditor.background#28050a
  • peekViewResult.background#32070d
  • peekViewTitle.background#28050a
  • progressBar.background#bf1932
  • scrollbar.shadow#13020545
  • scrollbarSlider.activeBackground#dfcacf59
  • scrollbarSlider.background#dfcacf1f
  • scrollbarSlider.hoverBackground#dfcacf40
  • selection.background#bf19324d
  • sideBar.background#32070d
  • sideBar.border#410911
  • sideBar.foreground#dfcacf
  • sideBarSectionHeader.background#bf193226
  • sideBarSectionHeader.foreground#dfcacf
  • sideBarTitle.foreground#dfcacf
  • statusBar.background#730f1e
  • statusBar.border#410911
  • statusBar.debuggingBackground#45b5aa
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#d97584
  • statusBar.noFolderBackground#28050a
  • statusBarItem.hoverBackground#bf19324d
  • statusBarItem.remoteBackground#bf1932
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#1f0408
  • tab.activeBorder#bf1932
  • tab.activeBorderTop#bf193200
  • tab.activeForeground#dfcacf
  • tab.border#410911
  • tab.inactiveBackground#28050a
  • tab.inactiveForeground#923d53
  • terminal.ansiBlack#1f0408
  • terminal.ansiBlue#67335a
  • terminal.ansiBrightBlack#923d53
  • 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#dfcacf
  • terminal.ansiYellow#efc050
  • terminal.background#28050a
  • terminal.foreground#dfcacf
  • terminalCursor.foreground#bf1932
  • textLink.activeForeground#61c0b7
  • textLink.foreground#45b5aa
  • titleBar.activeBackground#28050a
  • titleBar.activeForeground#dfcacf
  • titleBar.border#410911
  • titleBar.inactiveBackground#28050a
  • titleBar.inactiveForeground#923d53

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#923d53italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#d15a6cbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#d15a6cbold
storage.type, storage.modifier#d15a6cbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#45b5aa
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#d15a6c
string.regexp#45b5aa
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a3af86
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#b163a3bold
variable.other.constant, variable.other.enummember#b163a3bold
constant.character.escape#d15a6c
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#9b7485italic
entity.name.type.parameter#9b7485italic
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#dfcacf
variable.parameter#dfcacfitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#d15a6citalic
variable.other.property, variable.other.object.property, meta.object-literal.key#dfcacf
entity.name.class, entity.name.type.class, support.class#996fd1bold italic
entity.other.inherited-class#996fd1italic
entity.name.tag, punctuation.definition.tag#d15a6cbold
entity.other.attribute-name#decdbeitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#d15a6c
punctuation, punctuation.separator, punctuation.terminator, meta.brace#923d53
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#9b7485italic
support.type.property-name.css, support.type.vendored.property-name.css#9b7485
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#996fd1bold
support.constant.property-value.css, support.constant.color.css#b163a3
keyword.other.unit.css#a3af86
support.type.property-name.json#9b7485
markup.heading, markup.heading entity.name, entity.name.section.markdown#d15a6cbold
markup.bold#b163a3bold
markup.italic#9b7485italic
markup.inline.raw, markup.raw#45b5aa
markup.underline.link#decdbe
markup.quote#923d53italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050