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#25080f
  • activityBar.border#350c16
  • activityBar.foreground#7c1c32
  • activityBar.inactiveForeground#7d3e53
  • activityBarBadge.background#86d0bf
  • activityBarBadge.foreground#f5f1f2
  • badge.background#7c1c32
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#dbcacf
  • breadcrumb.focusForeground#dbcacf
  • breadcrumb.foreground#7d3e53
  • button.background#7c1c32
  • button.foreground#f5f1f2
  • button.hoverBackground#893347
  • button.secondaryBackground#2b0a12
  • button.secondaryForeground#dbcacf
  • descriptionForeground#7d3e53
  • dropdown.background#25080f
  • dropdown.border#350c16
  • dropdown.foreground#dbcacf
  • editor.background#1f070d
  • editor.findMatchBackground#a3af8666
  • editor.findMatchHighlightBackground#a3af8633
  • editor.foreground#dbcacf
  • editor.inactiveSelectionBackground#7c1c3226
  • editor.lineHighlightBackground#7c1c321a
  • editor.lineHighlightBorder#7c1c3200
  • editor.selectionBackground#7c1c324d
  • editor.wordHighlightBackground#7c1c3233
  • editorBracketMatch.background#7c1c3240
  • editorBracketMatch.border#7c1c3299
  • editorCursor.foreground#7c1c32
  • editorError.foreground#dd4132
  • editorGroup.border#350c16
  • editorGroupHeader.tabsBackground#25080f
  • editorGroupHeader.tabsBorder#350c16
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dbcacf33
  • editorIndentGuide.background#dbcacf14
  • editorInfo.foreground#86d0bf
  • editorLineNumber.activeForeground#dbcacf
  • editorLineNumber.foreground#7d3e53
  • editorRuler.foreground#dbcacf14
  • editorSuggestWidget.selectedBackground#7c1c3240
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dbcacf1a
  • editorWidget.background#25080f
  • editorWidget.border#350c16
  • focusBorder#7c1c3299
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#7d3e53
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#7d3e53
  • input.background#25080f
  • input.border#350c16
  • input.foreground#dbcacf
  • input.placeholderForeground#7d3e53
  • inputOption.activeBorder#7c1c32
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#86d0bf
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#7c1c324d
  • list.activeSelectionForeground#dbcacf
  • list.focusBackground#7c1c3233
  • list.highlightForeground#7c1c32
  • list.hoverBackground#7c1c3226
  • list.inactiveSelectionBackground#7c1c3226
  • minimap.background#1f070d
  • minimap.findMatchHighlight#a3af8699
  • minimap.selectionHighlight#7c1c3266
  • notificationLink.foreground#7c1c32
  • notifications.background#2b0a12
  • notifications.foreground#dbcacf
  • panel.background#25080f
  • panel.border#350c16
  • panelTitle.activeBorder#7c1c32
  • panelTitle.activeForeground#dbcacf
  • panelTitle.inactiveForeground#7d3e53
  • peekView.border#7c1c32
  • peekViewEditor.background#25080f
  • peekViewResult.background#2b0a12
  • peekViewTitle.background#25080f
  • progressBar.background#7c1c32
  • scrollbar.shadow#0c030545
  • scrollbarSlider.activeBackground#dbcacf59
  • scrollbarSlider.background#dbcacf1f
  • scrollbarSlider.hoverBackground#dbcacf40
  • selection.background#7c1c324d
  • sideBar.background#2b0a12
  • sideBar.border#350c16
  • sideBar.foreground#dbcacf
  • sideBarSectionHeader.background#7c1c3226
  • sideBarSectionHeader.foreground#dbcacf
  • sideBarTitle.foreground#dbcacf
  • statusBar.background#4a111e
  • statusBar.border#350c16
  • statusBar.debuggingBackground#86d0bf
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#b07784
  • statusBar.noFolderBackground#25080f
  • statusBarItem.hoverBackground#7c1c324d
  • statusBarItem.remoteBackground#7c1c32
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#1f070d
  • tab.activeBorder#7c1c32
  • tab.activeBorderTop#7c1c3200
  • tab.activeForeground#dbcacf
  • tab.border#350c16
  • tab.inactiveBackground#25080f
  • tab.inactiveForeground#7d3e53
  • terminal.ansiBlack#1f070d
  • terminal.ansiBlue#46345a
  • terminal.ansiBrightBlack#7d3e53
  • 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#dbcacf
  • terminal.ansiYellow#efc050
  • terminal.background#25080f
  • terminal.foreground#dbcacf
  • terminalCursor.foreground#7c1c32
  • textLink.activeForeground#98d7c9
  • textLink.foreground#86d0bf
  • titleBar.activeBackground#25080f
  • titleBar.activeForeground#dbcacf
  • titleBar.border#350c16
  • titleBar.inactiveBackground#25080f
  • titleBar.inactiveForeground#7d3e53

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#7d3e53italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#a96978bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#a96978bold
storage.type, storage.modifier#a96978bold
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#a96978
string.regexp#86d0bf
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a3af86
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#decdbebold
variable.other.constant, variable.other.enummember#decdbebold
constant.character.escape#a96878
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#f7cac9italic
entity.name.type.parameter#f7cac9italic
entity.name.function, meta.function entity.name.function#76ff7bbold
meta.function-call entity.name.function, support.function#76ff7b
meta.method-call entity.name.function, entity.name.function.member#76ff7b
variable, variable.other, variable.other.readwrite#dbcacf
variable.parameter#dbcacfitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#a96978italic
variable.other.property, variable.other.object.property, meta.object-literal.key#dbcacf
entity.name.class, entity.name.type.class, support.class#996fd1bold italic
entity.other.inherited-class#996fd1italic
entity.name.tag, punctuation.definition.tag#a96978bold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#a96878
punctuation, punctuation.separator, punctuation.terminator, meta.brace#7d3e53
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#f7cac9italic
support.type.property-name.css, support.type.vendored.property-name.css#f7cac9
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#996fd1bold
support.constant.property-value.css, support.constant.color.css#decdbe
keyword.other.unit.css#a3af86
support.type.property-name.json#f7cac9
markup.heading, markup.heading entity.name, entity.name.section.markdown#a96978bold
markup.bold#decdbebold
markup.italic#f7cac9italic
markup.inline.raw, markup.raw#86d0bf
markup.underline.link#76ff7b
markup.quote#7d3e53italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050