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#360910
  • activityBar.foreground#9e1b2e
  • activityBar.inactiveForeground#883e52
  • activityBarBadge.background#45b5aa
  • activityBarBadge.foreground#f5f1f2
  • badge.background#9e1b2e
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#ddcacf
  • breadcrumb.focusForeground#ddcacf
  • breadcrumb.foreground#883e52
  • button.background#9e1b2e
  • button.foreground#f5f1f2
  • button.hoverBackground#a83243
  • button.secondaryBackground#29070c
  • button.secondaryForeground#ddcacf
  • descriptionForeground#883e52
  • dropdown.background#21060a
  • dropdown.border#360910
  • dropdown.foreground#ddcacf
  • editor.background#190407
  • editor.findMatchBackground#a3af8666
  • editor.findMatchHighlightBackground#a3af8633
  • editor.foreground#ddcacf
  • editor.inactiveSelectionBackground#9e1b2e26
  • editor.lineHighlightBackground#9e1b2e1a
  • editor.lineHighlightBorder#9e1b2e00
  • editor.selectionBackground#9e1b2e4d
  • editor.wordHighlightBackground#9e1b2e33
  • editorBracketMatch.background#9e1b2e40
  • editorBracketMatch.border#9e1b2e99
  • editorCursor.foreground#9e1b2e
  • editorError.foreground#dd4132
  • editorGroup.border#360910
  • editorGroupHeader.tabsBackground#21060a
  • editorGroupHeader.tabsBorder#360910
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#ddcacf33
  • editorIndentGuide.background#ddcacf14
  • editorInfo.foreground#45b5aa
  • editorLineNumber.activeForeground#ddcacf
  • editorLineNumber.foreground#883e52
  • editorRuler.foreground#ddcacf14
  • editorSuggestWidget.selectedBackground#9e1b2e40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#ddcacf1a
  • editorWidget.background#21060a
  • editorWidget.border#360910
  • focusBorder#9e1b2e99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#883e52
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#883e52
  • input.background#21060a
  • input.border#360910
  • input.foreground#ddcacf
  • input.placeholderForeground#883e52
  • inputOption.activeBorder#9e1b2e
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#45b5aa
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#9e1b2e4d
  • list.activeSelectionForeground#ddcacf
  • list.focusBackground#9e1b2e33
  • list.highlightForeground#9e1b2e
  • list.hoverBackground#9e1b2e26
  • list.inactiveSelectionBackground#9e1b2e26
  • minimap.background#190407
  • minimap.findMatchHighlight#a3af8699
  • minimap.selectionHighlight#9e1b2e66
  • notificationLink.foreground#9e1b2e
  • notifications.background#29070c
  • notifications.foreground#ddcacf
  • panel.background#21060a
  • panel.border#360910
  • panelTitle.activeBorder#9e1b2e
  • panelTitle.activeForeground#ddcacf
  • panelTitle.inactiveForeground#883e52
  • peekView.border#9e1b2e
  • peekViewEditor.background#21060a
  • peekViewResult.background#29070c
  • peekViewTitle.background#21060a
  • progressBar.background#9e1b2e
  • scrollbar.shadow#10030545
  • scrollbarSlider.activeBackground#ddcacf59
  • scrollbarSlider.background#ddcacf1f
  • scrollbarSlider.hoverBackground#ddcacf40
  • selection.background#9e1b2e4d
  • sideBar.background#29070c
  • sideBar.border#360910
  • sideBar.foreground#ddcacf
  • sideBarSectionHeader.background#9e1b2e26
  • sideBarSectionHeader.foreground#ddcacf
  • sideBarTitle.foreground#ddcacf
  • statusBar.background#5f101c
  • statusBar.border#360910
  • statusBar.debuggingBackground#45b5aa
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#c57682
  • statusBar.noFolderBackground#21060a
  • statusBarItem.hoverBackground#9e1b2e4d
  • statusBarItem.remoteBackground#9e1b2e
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#190407
  • tab.activeBorder#9e1b2e
  • tab.activeBorderTop#9e1b2e00
  • tab.activeForeground#ddcacf
  • tab.border#360910
  • tab.inactiveBackground#21060a
  • tab.inactiveForeground#883e52
  • terminal.ansiBlack#190407
  • terminal.ansiBlue#573458
  • terminal.ansiBrightBlack#883e52
  • 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#9e1b2e
  • textLink.activeForeground#61c0b7
  • textLink.foreground#45b5aa
  • titleBar.activeBackground#21060a
  • titleBar.activeForeground#ddcacf
  • titleBar.border#360910
  • titleBar.inactiveBackground#21060a
  • titleBar.inactiveForeground#883e52

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#883e52italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ba5b69bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ba5b69bold
storage.type, storage.modifier#ba5b69bold
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#ba5b69
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#ffaa4dbold
variable.other.constant, variable.other.enummember#ffaa4dbold
constant.character.escape#ba5b68
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#ff8272italic
entity.name.type.parameter#ff8272italic
entity.name.function, meta.function entity.name.function#e8d4e2bold
meta.function-call entity.name.function, support.function#e8d4e2
meta.method-call entity.name.function, entity.name.function.member#e8d4e2
variable, variable.other, variable.other.readwrite#ddcacf
variable.parameter#ddcacfitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#ba5b69italic
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#ba5b69bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ba5b68
punctuation, punctuation.separator, punctuation.terminator, meta.brace#883e52
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ff8272italic
support.type.property-name.css, support.type.vendored.property-name.css#ff8272
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#ff8272
markup.heading, markup.heading entity.name, entity.name.section.markdown#ba5b69bold
markup.bold#ffaa4dbold
markup.italic#ff8272italic
markup.inline.raw, markup.raw#45b5aa
markup.underline.link#e8d4e2
markup.quote#883e52italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050