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#2b150b
  • activityBar.border#4d2514
  • activityBar.foreground#ff7b43
  • activityBar.inactiveForeground#e8b499
  • activityBarBadge.background#7bc4e2
  • activityBarBadge.foreground#fcfbfa
  • badge.background#ff7b43
  • badge.foreground#26120a
  • breadcrumb.activeSelectionForeground#f8ebe4
  • breadcrumb.focusForeground#f8ebe4
  • breadcrumb.foreground#e8b499
  • button.background#ff7b43
  • button.foreground#26120a
  • button.hoverBackground#ff8856
  • button.secondaryBackground#381b0f
  • button.secondaryForeground#f8ebe4
  • descriptionForeground#e8b499
  • dropdown.background#2b150b
  • dropdown.border#4d2514
  • dropdown.foreground#f8ebe4
  • editor.background#1f0f08
  • editor.findMatchBackground#9063cd66
  • editor.findMatchHighlightBackground#9063cd33
  • editor.foreground#f8ebe4
  • editor.inactiveSelectionBackground#ff7b4326
  • editor.lineHighlightBackground#ff7b431a
  • editor.lineHighlightBorder#ff7b4300
  • editor.selectionBackground#ff7b434d
  • editor.wordHighlightBackground#ff7b4333
  • editorBracketMatch.background#ff7b4340
  • editorBracketMatch.border#ff7b4399
  • editorCursor.foreground#ff7b43
  • editorError.foreground#dd4132
  • editorGroup.border#4d2514
  • editorGroupHeader.tabsBackground#2b150b
  • editorGroupHeader.tabsBorder#4d2514
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f8ebe433
  • editorIndentGuide.background#f8ebe414
  • editorInfo.foreground#7bc4e2
  • editorLineNumber.activeForeground#f8ebe4
  • editorLineNumber.foreground#e8b499
  • editorRuler.foreground#f8ebe414
  • editorSuggestWidget.selectedBackground#ff7b4340
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f8ebe41a
  • editorWidget.background#2b150b
  • editorWidget.border#4d2514
  • focusBorder#ff7b4399
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#e8b499
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#e8b499
  • input.background#2b150b
  • input.border#4d2514
  • input.foreground#f8ebe4
  • input.placeholderForeground#e8b499
  • inputOption.activeBorder#ff7b43
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#7bc4e2
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#ff7b434d
  • list.activeSelectionForeground#f8ebe4
  • list.focusBackground#ff7b4333
  • list.highlightForeground#ff7b43
  • list.hoverBackground#ff7b4326
  • list.inactiveSelectionBackground#ff7b4326
  • minimap.background#1f0f08
  • minimap.findMatchHighlight#9063cd99
  • minimap.selectionHighlight#ff7b4366
  • notificationLink.foreground#ff7b43
  • notifications.background#381b0f
  • notifications.foreground#f8ebe4
  • panel.background#2b150b
  • panel.border#4d2514
  • panelTitle.activeBorder#ff7b43
  • panelTitle.activeForeground#f8ebe4
  • panelTitle.inactiveForeground#e8b499
  • peekView.border#ff7b43
  • peekViewEditor.background#2b150b
  • peekViewResult.background#381b0f
  • peekViewTitle.background#2b150b
  • progressBar.background#ff7b43
  • scrollbar.shadow#190c0745
  • scrollbarSlider.activeBackground#f8ebe459
  • scrollbarSlider.background#f8ebe41f
  • scrollbarSlider.hoverBackground#f8ebe440
  • selection.background#ff7b434d
  • sideBar.background#381b0f
  • sideBar.border#4d2514
  • sideBar.foreground#f8ebe4
  • sideBarSectionHeader.background#ff7b4326
  • sideBarSectionHeader.foreground#f8ebe4
  • sideBarTitle.foreground#f8ebe4
  • statusBar.background#994a28
  • statusBar.border#4d2514
  • statusBar.debuggingBackground#7bc4e2
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#ffb08e
  • statusBar.noFolderBackground#2b150b
  • statusBarItem.hoverBackground#ff7b434d
  • statusBarItem.remoteBackground#ff7b43
  • statusBarItem.remoteForeground#26120a
  • tab.activeBackground#1f0f08
  • tab.activeBorder#ff7b43
  • tab.activeBorderTop#ff7b4300
  • tab.activeForeground#f8ebe4
  • tab.border#4d2514
  • tab.inactiveBackground#2b150b
  • tab.inactiveForeground#e8b499
  • terminal.ansiBlack#1f0f08
  • terminal.ansiBlue#876462
  • terminal.ansiBrightBlack#e8b499
  • 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#f8ebe4
  • terminal.ansiYellow#efc050
  • terminal.background#2b150b
  • terminal.foreground#f8ebe4
  • terminalCursor.foreground#ff7b43
  • textLink.activeForeground#8fcde6
  • textLink.foreground#7bc4e2
  • titleBar.activeBackground#2b150b
  • titleBar.activeForeground#f8ebe4
  • titleBar.border#4d2514
  • titleBar.inactiveBackground#2b150b
  • titleBar.inactiveForeground#e8b499

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e8b499italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ff7b43bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ff7b43bold
storage.type, storage.modifier#ff7b43bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#7bc4e2
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ff7b43
string.regexp#7bc4e2
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#996fd1
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#cf608abold
variable.other.constant, variable.other.enummember#cf608abold
constant.character.escape#ff8f5f
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#f9423aitalic
entity.name.type.parameter#f9423aitalic
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#f8ebe4
variable.parameter#f8ebe4italic
variable.language, variable.language.this, variable.language.self, variable.language.super#ff7b43italic
variable.other.property, variable.other.object.property, meta.object-literal.key#f8ebe4
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#ff7b43bold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ff8f5f
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e8b499
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#f9423aitalic
support.type.property-name.css, support.type.vendored.property-name.css#f9423a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ad6ab3bold
support.constant.property-value.css, support.constant.color.css#cf608a
keyword.other.unit.css#996fd1
support.type.property-name.json#f9423a
markup.heading, markup.heading entity.name, entity.name.section.markdown#ff7b43bold
markup.bold#cf608abold
markup.italic#f9423aitalic
markup.inline.raw, markup.raw#7bc4e2
markup.underline.link#76ff7b
markup.quote#e8b499italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050