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#2b201a
  • activityBar.border#4d392e
  • activityBar.foreground#ffbe98
  • activityBar.inactiveForeground#e8c9b3
  • activityBarBadge.background#5b7b8d
  • activityBarBadge.foreground#fcfbfa
  • badge.background#ffbe98
  • badge.foreground#261d17
  • breadcrumb.activeSelectionForeground#f8f0ea
  • breadcrumb.focusForeground#f8f0ea
  • breadcrumb.foreground#e8c9b3
  • button.background#ffbe98
  • button.foreground#261d17
  • button.hoverBackground#ffc5a2
  • button.secondaryBackground#382a21
  • button.secondaryForeground#f8f0ea
  • descriptionForeground#e8c9b3
  • dropdown.background#2b201a
  • dropdown.border#4d392e
  • dropdown.foreground#f8f0ea
  • editor.background#1f1712
  • editor.findMatchBackground#9e4fa566
  • editor.findMatchHighlightBackground#9e4fa533
  • editor.foreground#f8f0ea
  • editor.inactiveSelectionBackground#ffbe9826
  • editor.lineHighlightBackground#ffbe981a
  • editor.lineHighlightBorder#ffbe9800
  • editor.selectionBackground#ffbe984d
  • editor.wordHighlightBackground#ffbe9833
  • editorBracketMatch.background#ffbe9840
  • editorBracketMatch.border#ffbe9899
  • editorCursor.foreground#ffbe98
  • editorError.foreground#dd4132
  • editorGroup.border#4d392e
  • editorGroupHeader.tabsBackground#2b201a
  • editorGroupHeader.tabsBorder#4d392e
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f8f0ea33
  • editorIndentGuide.background#f8f0ea14
  • editorInfo.foreground#5b7b8d
  • editorLineNumber.activeForeground#f8f0ea
  • editorLineNumber.foreground#e8c9b3
  • editorRuler.foreground#f8f0ea14
  • editorSuggestWidget.selectedBackground#ffbe9840
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f8f0ea1a
  • editorWidget.background#2b201a
  • editorWidget.border#4d392e
  • focusBorder#ffbe9899
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#e8c9b3
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#e8c9b3
  • input.background#2b201a
  • input.border#4d392e
  • input.foreground#f8f0ea
  • input.placeholderForeground#e8c9b3
  • inputOption.activeBorder#ffbe98
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#5b7b8d
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#ffbe984d
  • list.activeSelectionForeground#f8f0ea
  • list.focusBackground#ffbe9833
  • list.highlightForeground#ffbe98
  • list.hoverBackground#ffbe9826
  • list.inactiveSelectionBackground#ffbe9826
  • minimap.background#1f1712
  • minimap.findMatchHighlight#9e4fa599
  • minimap.selectionHighlight#ffbe9866
  • notificationLink.foreground#ffbe98
  • notifications.background#382a21
  • notifications.foreground#f8f0ea
  • panel.background#2b201a
  • panel.border#4d392e
  • panelTitle.activeBorder#ffbe98
  • panelTitle.activeForeground#f8f0ea
  • panelTitle.inactiveForeground#e8c9b3
  • peekView.border#ffbe98
  • peekViewEditor.background#2b201a
  • peekViewResult.background#382a21
  • peekViewTitle.background#2b201a
  • progressBar.background#ffbe98
  • scrollbar.shadow#19130f45
  • scrollbarSlider.activeBackground#f8f0ea59
  • scrollbarSlider.background#f8f0ea1f
  • scrollbarSlider.hoverBackground#f8f0ea40
  • selection.background#ffbe984d
  • sideBar.background#382a21
  • sideBar.border#4d392e
  • sideBar.foreground#f8f0ea
  • sideBarSectionHeader.background#ffbe9826
  • sideBarSectionHeader.foreground#f8f0ea
  • sideBarTitle.foreground#f8f0ea
  • statusBar.background#99725b
  • statusBar.border#4d392e
  • statusBar.debuggingBackground#5b7b8d
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#ffd8c1
  • statusBar.noFolderBackground#2b201a
  • statusBarItem.hoverBackground#ffbe984d
  • statusBarItem.remoteBackground#ffbe98
  • statusBarItem.remoteForeground#261d17
  • tab.activeBackground#1f1712
  • tab.activeBorder#ffbe98
  • tab.activeBorderTop#ffbe9800
  • tab.activeForeground#f8f0ea
  • tab.border#4d392e
  • tab.inactiveBackground#2b201a
  • tab.inactiveForeground#e8c9b3
  • terminal.ansiBlack#1f1712
  • terminal.ansiBlue#87858d
  • terminal.ansiBrightBlack#e8c9b3
  • 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#f8f0ea
  • terminal.ansiYellow#efc050
  • terminal.background#2b201a
  • terminal.foreground#f8f0ea
  • terminalCursor.foreground#ffbe98
  • textLink.activeForeground#748f9e
  • textLink.foreground#5b7b8d
  • titleBar.activeBackground#2b201a
  • titleBar.activeForeground#f8f0ea
  • titleBar.border#4d392e
  • titleBar.inactiveBackground#2b201a
  • titleBar.inactiveForeground#e8c9b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e8c9b3italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ffbe98bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ffbe98bold
storage.type, storage.modifier#ffbe98bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#688696
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ffbe98
string.regexp#688696
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#ad6ab3
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#c8d800bold
variable.other.constant, variable.other.enummember#c8d800bold
constant.character.escape#ffc8a7
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#e8ae4eitalic
entity.name.type.parameter#e8ae4eitalic
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#f8f0ea
variable.parameter#f8f0eaitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#ffbe98italic
variable.other.property, variable.other.object.property, meta.object-literal.key#f8f0ea
entity.name.class, entity.name.type.class, support.class#4e9a2fbold italic
entity.other.inherited-class#4e9a2fitalic
entity.name.tag, punctuation.definition.tag#ffbe98bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ffc8a7
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e8c9b3
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#e8ae4eitalic
support.type.property-name.css, support.type.vendored.property-name.css#e8ae4e
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4e9a2fbold
support.constant.property-value.css, support.constant.color.css#c8d800
keyword.other.unit.css#ad6ab3
support.type.property-name.json#e8ae4e
markup.heading, markup.heading entity.name, entity.name.section.markdown#ffbe98bold
markup.bold#c8d800bold
markup.italic#e8ae4eitalic
markup.inline.raw, markup.raw#688696
markup.underline.link#e8d4e2
markup.quote#e8c9b3italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050