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#21060a
  • activityBar.border#360911
  • activityBar.foreground#9e1b32
  • activityBar.inactiveForeground#883e53
  • activityBarBadge.background#009473
  • activityBarBadge.foreground#f5f1f2
  • badge.background#9e1b32
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#ddcacf
  • breadcrumb.focusForeground#ddcacf
  • breadcrumb.foreground#883e53
  • button.background#9e1b32
  • button.foreground#f5f1f2
  • button.hoverBackground#a83247
  • button.secondaryBackground#29070d
  • button.secondaryForeground#ddcacf
  • descriptionForeground#883e53
  • dropdown.background#21060a
  • dropdown.border#360911
  • dropdown.foreground#ddcacf
  • editor.background#190408
  • editor.findMatchBackground#a3af8666
  • editor.findMatchHighlightBackground#a3af8633
  • editor.foreground#ddcacf
  • editor.inactiveSelectionBackground#9e1b3226
  • editor.lineHighlightBackground#9e1b321a
  • editor.lineHighlightBorder#9e1b3200
  • editor.selectionBackground#9e1b324d
  • editor.wordHighlightBackground#9e1b3233
  • editorBracketMatch.background#9e1b3240
  • editorBracketMatch.border#9e1b3299
  • editorCursor.foreground#9e1b32
  • editorError.foreground#dd4132
  • editorGroup.border#360911
  • editorGroupHeader.tabsBackground#21060a
  • editorGroupHeader.tabsBorder#360911
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#ddcacf33
  • editorIndentGuide.background#ddcacf14
  • editorInfo.foreground#009473
  • editorLineNumber.activeForeground#ddcacf
  • editorLineNumber.foreground#883e53
  • editorRuler.foreground#ddcacf14
  • editorSuggestWidget.selectedBackground#9e1b3240
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#ddcacf1a
  • editorWidget.background#21060a
  • editorWidget.border#360911
  • focusBorder#9e1b3299
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#883e53
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#883e53
  • input.background#21060a
  • input.border#360911
  • input.foreground#ddcacf
  • input.placeholderForeground#883e53
  • inputOption.activeBorder#9e1b32
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#009473
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#9e1b324d
  • list.activeSelectionForeground#ddcacf
  • list.focusBackground#9e1b3233
  • list.highlightForeground#9e1b32
  • list.hoverBackground#9e1b3226
  • list.inactiveSelectionBackground#9e1b3226
  • minimap.background#190408
  • minimap.findMatchHighlight#a3af8699
  • minimap.selectionHighlight#9e1b3266
  • notificationLink.foreground#9e1b32
  • notifications.background#29070d
  • notifications.foreground#ddcacf
  • panel.background#21060a
  • panel.border#360911
  • panelTitle.activeBorder#9e1b32
  • panelTitle.activeForeground#ddcacf
  • panelTitle.inactiveForeground#883e53
  • peekView.border#9e1b32
  • peekViewEditor.background#21060a
  • peekViewResult.background#29070d
  • peekViewTitle.background#21060a
  • progressBar.background#9e1b32
  • scrollbar.shadow#10030545
  • scrollbarSlider.activeBackground#ddcacf59
  • scrollbarSlider.background#ddcacf1f
  • scrollbarSlider.hoverBackground#ddcacf40
  • selection.background#9e1b324d
  • sideBar.background#29070d
  • sideBar.border#360911
  • sideBar.foreground#ddcacf
  • sideBarSectionHeader.background#9e1b3226
  • sideBarSectionHeader.foreground#ddcacf
  • sideBarTitle.foreground#ddcacf
  • statusBar.background#5f101e
  • statusBar.border#360911
  • statusBar.debuggingBackground#009473
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#c57684
  • statusBar.noFolderBackground#21060a
  • statusBarItem.hoverBackground#9e1b324d
  • statusBarItem.remoteBackground#9e1b32
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#190408
  • tab.activeBorder#9e1b32
  • tab.activeBorderTop#9e1b3200
  • tab.activeForeground#ddcacf
  • tab.border#360911
  • tab.inactiveBackground#21060a
  • tab.inactiveForeground#883e53
  • terminal.ansiBlack#190408
  • terminal.ansiBlue#57345a
  • terminal.ansiBrightBlack#883e53
  • 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#ddcacf
  • terminal.ansiYellow#efc050
  • terminal.background#21060a
  • terminal.foreground#ddcacf
  • terminalCursor.foreground#9e1b32
  • textLink.activeForeground#26a488
  • textLink.foreground#009473
  • titleBar.activeBackground#21060a
  • titleBar.activeForeground#ddcacf
  • titleBar.border#360911
  • titleBar.inactiveBackground#21060a
  • titleBar.inactiveForeground#883e53

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#883e53italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ba5b6cbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ba5b6cbold
storage.type, storage.modifier#ba5b6cbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#009473
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ba5b6c
string.regexp#009473
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a3af86
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#ffaa4dbold
variable.other.constant, variable.other.enummember#ffaa4dbold
constant.character.escape#ba5b6c
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#ac6d87italic
entity.name.type.parameter#ac6d87italic
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#ddcacf
variable.parameter#ddcacfitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#ba5b6citalic
variable.other.property, variable.other.object.property, meta.object-literal.key#ddcacf
entity.name.class, entity.name.type.class, support.class#9063cdbold italic
entity.other.inherited-class#9063cditalic
entity.name.tag, punctuation.definition.tag#ba5b6cbold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ba5b6c
punctuation, punctuation.separator, punctuation.terminator, meta.brace#883e53
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ac6d87italic
support.type.property-name.css, support.type.vendored.property-name.css#ac6d87
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9063cdbold
support.constant.property-value.css, support.constant.color.css#ffaa4d
keyword.other.unit.css#a3af86
support.type.property-name.json#ac6d87
markup.heading, markup.heading entity.name, entity.name.section.markdown#ba5b6cbold
markup.bold#ffaa4dbold
markup.italic#ac6d87italic
markup.inline.raw, markup.raw#009473
markup.underline.link#76ff7b
markup.quote#883e53italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050