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#2a0b0a
  • activityBar.border#4b1411
  • activityBar.foreground#f9423a
  • activityBar.inactiveForeground#e6a396
  • activityBarBadge.background#53b0ae
  • activityBarBadge.foreground#fcfbfa
  • badge.background#f9423a
  • badge.foreground#250a09
  • breadcrumb.activeSelectionForeground#f8e7e4
  • breadcrumb.focusForeground#f8e7e4
  • breadcrumb.foreground#e6a396
  • button.background#f9423a
  • button.foreground#250a09
  • button.hoverBackground#fa554e
  • button.secondaryBackground#370f0d
  • button.secondaryForeground#f8e7e4
  • descriptionForeground#e6a396
  • dropdown.background#2a0b0a
  • dropdown.border#4b1411
  • dropdown.foreground#f8e7e4
  • editor.background#1e0807
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#f8e7e4
  • editor.inactiveSelectionBackground#f9423a26
  • editor.lineHighlightBackground#f9423a1a
  • editor.lineHighlightBorder#f9423a00
  • editor.selectionBackground#f9423a4d
  • editor.wordHighlightBackground#f9423a33
  • editorBracketMatch.background#f9423a40
  • editorBracketMatch.border#f9423a99
  • editorCursor.foreground#f9423a
  • editorError.foreground#dd4132
  • editorGroup.border#4b1411
  • editorGroupHeader.tabsBackground#2a0b0a
  • editorGroupHeader.tabsBorder#4b1411
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f8e7e433
  • editorIndentGuide.background#f8e7e414
  • editorInfo.foreground#53b0ae
  • editorLineNumber.activeForeground#f8e7e4
  • editorLineNumber.foreground#e6a396
  • editorRuler.foreground#f8e7e414
  • editorSuggestWidget.selectedBackground#f9423a40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f8e7e41a
  • editorWidget.background#2a0b0a
  • editorWidget.border#4b1411
  • focusBorder#f9423a99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#e6a396
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#e6a396
  • input.background#2a0b0a
  • input.border#4b1411
  • input.foreground#f8e7e4
  • input.placeholderForeground#e6a396
  • inputOption.activeBorder#f9423a
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#53b0ae
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#f9423a4d
  • list.activeSelectionForeground#f8e7e4
  • list.focusBackground#f9423a33
  • list.highlightForeground#f9423a
  • list.hoverBackground#f9423a26
  • list.inactiveSelectionBackground#f9423a26
  • minimap.background#1e0807
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#f9423a66
  • notificationLink.foreground#f9423a
  • notifications.background#370f0d
  • notifications.foreground#f8e7e4
  • panel.background#2a0b0a
  • panel.border#4b1411
  • panelTitle.activeBorder#f9423a
  • panelTitle.activeForeground#f8e7e4
  • panelTitle.inactiveForeground#e6a396
  • peekView.border#f9423a
  • peekViewEditor.background#2a0b0a
  • peekViewResult.background#370f0d
  • peekViewTitle.background#2a0b0a
  • progressBar.background#f9423a
  • scrollbar.shadow#19070645
  • scrollbarSlider.activeBackground#f8e7e459
  • scrollbarSlider.background#f8e7e41f
  • scrollbarSlider.hoverBackground#f8e7e440
  • selection.background#f9423a4d
  • sideBar.background#370f0d
  • sideBar.border#4b1411
  • sideBar.foreground#f8e7e4
  • sideBarSectionHeader.background#f9423a26
  • sideBarSectionHeader.foreground#f8e7e4
  • sideBarTitle.foreground#f8e7e4
  • statusBar.background#952823
  • statusBar.border#4b1411
  • statusBar.debuggingBackground#53b0ae
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#fb8e89
  • statusBar.noFolderBackground#2a0b0a
  • statusBarItem.hoverBackground#f9423a4d
  • statusBarItem.remoteBackground#f9423a
  • statusBarItem.remoteForeground#250a09
  • tab.activeBackground#1e0807
  • tab.activeBorder#f9423a
  • tab.activeBorderTop#f9423a00
  • tab.activeForeground#f8e7e4
  • tab.border#4b1411
  • tab.inactiveBackground#2a0b0a
  • tab.inactiveForeground#e6a396
  • terminal.ansiBlack#1e0807
  • terminal.ansiBlue#84475e
  • terminal.ansiBrightBlack#e6a396
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#f8e7e4
  • terminal.ansiYellow#efc050
  • terminal.background#2a0b0a
  • terminal.foreground#f8e7e4
  • terminalCursor.foreground#f9423a
  • textLink.activeForeground#6dbcba
  • textLink.foreground#53b0ae
  • titleBar.activeBackground#2a0b0a
  • titleBar.activeForeground#f8e7e4
  • titleBar.border#4b1411
  • titleBar.inactiveBackground#2a0b0a
  • titleBar.inactiveForeground#e6a396

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e6a396italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#f9423abold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#f9423abold
storage.type, storage.modifier#f9423abold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#53b0ae
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#f9423a
string.regexp#53b0ae
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9c68b9
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8e805cbold
variable.other.constant, variable.other.enummember#8e805cbold
constant.character.escape#fa5e58
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#ff7b43italic
entity.name.type.parameter#ff7b43italic
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#f8e7e4
variable.parameter#f8e7e4italic
variable.language, variable.language.this, variable.language.self, variable.language.super#f9423aitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#f8e7e4
entity.name.class, entity.name.type.class, support.class#88b04bbold italic
entity.other.inherited-class#88b04bitalic
entity.name.tag, punctuation.definition.tag#f9423abold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#fa5e58
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e6a396
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ff7b43italic
support.type.property-name.css, support.type.vendored.property-name.css#ff7b43
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#88b04bbold
support.constant.property-value.css, support.constant.color.css#8e805c
keyword.other.unit.css#9c68b9
support.type.property-name.json#ff7b43
markup.heading, markup.heading entity.name, entity.name.section.markdown#f9423abold
markup.bold#8e805cbold
markup.italic#ff7b43italic
markup.inline.raw, markup.raw#53b0ae
markup.underline.link#e8d4e2
markup.quote#e6a396italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050