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#350910
  • activityBar.foreground#9b1b30
  • activityBar.inactiveForeground#873e52
  • activityBarBadge.background#009473
  • activityBarBadge.foreground#f5f1f2
  • badge.background#9b1b30
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#ddcacf
  • breadcrumb.focusForeground#ddcacf
  • breadcrumb.foreground#873e52
  • button.background#9b1b30
  • button.foreground#f5f1f2
  • button.hoverBackground#a53245
  • button.secondaryBackground#28070c
  • button.secondaryForeground#ddcacf
  • descriptionForeground#873e52
  • dropdown.background#21060a
  • dropdown.border#350910
  • dropdown.foreground#ddcacf
  • editor.background#190408
  • editor.findMatchBackground#a3af8666
  • editor.findMatchHighlightBackground#a3af8633
  • editor.foreground#ddcacf
  • editor.inactiveSelectionBackground#9b1b3026
  • editor.lineHighlightBackground#9b1b301a
  • editor.lineHighlightBorder#9b1b3000
  • editor.selectionBackground#9b1b304d
  • editor.wordHighlightBackground#9b1b3033
  • editorBracketMatch.background#9b1b3040
  • editorBracketMatch.border#9b1b3099
  • editorCursor.foreground#9b1b30
  • editorError.foreground#dd4132
  • editorGroup.border#350910
  • editorGroupHeader.tabsBackground#21060a
  • editorGroupHeader.tabsBorder#350910
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#ddcacf33
  • editorIndentGuide.background#ddcacf14
  • editorInfo.foreground#009473
  • editorLineNumber.activeForeground#ddcacf
  • editorLineNumber.foreground#873e52
  • editorRuler.foreground#ddcacf14
  • editorSuggestWidget.selectedBackground#9b1b3040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#ddcacf1a
  • editorWidget.background#21060a
  • editorWidget.border#350910
  • focusBorder#9b1b3099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#873e52
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#873e52
  • input.background#21060a
  • input.border#350910
  • input.foreground#ddcacf
  • input.placeholderForeground#873e52
  • inputOption.activeBorder#9b1b30
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#009473
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#9b1b304d
  • list.activeSelectionForeground#ddcacf
  • list.focusBackground#9b1b3033
  • list.highlightForeground#9b1b30
  • list.hoverBackground#9b1b3026
  • list.inactiveSelectionBackground#9b1b3026
  • minimap.background#190408
  • minimap.findMatchHighlight#a3af8699
  • minimap.selectionHighlight#9b1b3066
  • notificationLink.foreground#9b1b30
  • notifications.background#28070c
  • notifications.foreground#ddcacf
  • panel.background#21060a
  • panel.border#350910
  • panelTitle.activeBorder#9b1b30
  • panelTitle.activeForeground#ddcacf
  • panelTitle.inactiveForeground#873e52
  • peekView.border#9b1b30
  • peekViewEditor.background#21060a
  • peekViewResult.background#28070c
  • peekViewTitle.background#21060a
  • progressBar.background#9b1b30
  • scrollbar.shadow#0f030545
  • scrollbarSlider.activeBackground#ddcacf59
  • scrollbarSlider.background#ddcacf1f
  • scrollbarSlider.hoverBackground#ddcacf40
  • selection.background#9b1b304d
  • sideBar.background#28070c
  • sideBar.border#350910
  • sideBar.foreground#ddcacf
  • sideBarSectionHeader.background#9b1b3026
  • sideBarSectionHeader.foreground#ddcacf
  • sideBarTitle.foreground#ddcacf
  • statusBar.background#5d101d
  • statusBar.border#350910
  • statusBar.debuggingBackground#009473
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#c37683
  • statusBar.noFolderBackground#21060a
  • statusBarItem.hoverBackground#9b1b304d
  • statusBarItem.remoteBackground#9b1b30
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#190408
  • tab.activeBorder#9b1b30
  • tab.activeBorderTop#9b1b3000
  • tab.activeForeground#ddcacf
  • tab.border#350910
  • tab.inactiveBackground#21060a
  • tab.inactiveForeground#873e52
  • terminal.ansiBlack#190408
  • terminal.ansiBlue#553459
  • terminal.ansiBrightBlack#873e52
  • 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#9b1b30
  • textLink.activeForeground#26a488
  • textLink.foreground#009473
  • titleBar.activeBackground#21060a
  • titleBar.activeForeground#ddcacf
  • titleBar.border#350910
  • titleBar.inactiveBackground#21060a
  • titleBar.inactiveForeground#873e52

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#873e52italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#bd6877bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#bd6877bold
storage.type, storage.modifier#bd6877bold
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#bd6877
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#bd6876
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#dd4132italic
entity.name.type.parameter#dd4132italic
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#bd6877italic
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#bd6877bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#bd6876
punctuation, punctuation.separator, punctuation.terminator, meta.brace#873e52
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#dd4132italic
support.type.property-name.css, support.type.vendored.property-name.css#dd4132
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#dd4132
markup.heading, markup.heading entity.name, entity.name.section.markdown#bd6877bold
markup.bold#ffaa4dbold
markup.italic#dd4132italic
markup.inline.raw, markup.raw#009473
markup.underline.link#e8d4e2
markup.quote#873e52italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050