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#221f1a
  • activityBar.border#3c382e
  • activityBar.foreground#c9b99a
  • activityBar.inactiveForeground#998965
  • activityBarBadge.background#92a8d1
  • activityBarBadge.foreground#f5f4f1
  • badge.background#c9b99a
  • badge.foreground#1e1c17
  • breadcrumb.activeSelectionForeground#e1ddd3
  • breadcrumb.focusForeground#e1ddd3
  • breadcrumb.foreground#998965
  • button.background#c9b99a
  • button.foreground#1e1c17
  • button.hoverBackground#cec0a4
  • button.secondaryBackground#2c2922
  • button.secondaryForeground#e1ddd3
  • descriptionForeground#998965
  • dropdown.background#221f1a
  • dropdown.border#3c382e
  • dropdown.foreground#e1ddd3
  • editor.background#181612
  • editor.findMatchBackground#9e4fa566
  • editor.findMatchHighlightBackground#9e4fa533
  • editor.foreground#e1ddd3
  • editor.inactiveSelectionBackground#c9b99a26
  • editor.lineHighlightBackground#c9b99a1a
  • editor.lineHighlightBorder#c9b99a00
  • editor.selectionBackground#c9b99a4d
  • editor.wordHighlightBackground#c9b99a33
  • editorBracketMatch.background#c9b99a40
  • editorBracketMatch.border#c9b99a99
  • editorCursor.foreground#c9b99a
  • editorError.foreground#dd4132
  • editorGroup.border#3c382e
  • editorGroupHeader.tabsBackground#221f1a
  • editorGroupHeader.tabsBorder#3c382e
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e1ddd333
  • editorIndentGuide.background#e1ddd314
  • editorInfo.foreground#92a8d1
  • editorLineNumber.activeForeground#e1ddd3
  • editorLineNumber.foreground#998965
  • editorRuler.foreground#e1ddd314
  • editorSuggestWidget.selectedBackground#c9b99a40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e1ddd31a
  • editorWidget.background#221f1a
  • editorWidget.border#3c382e
  • focusBorder#c9b99a99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#998965
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#998965
  • input.background#221f1a
  • input.border#3c382e
  • input.foreground#e1ddd3
  • input.placeholderForeground#998965
  • inputOption.activeBorder#c9b99a
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#92a8d1
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#c9b99a4d
  • list.activeSelectionForeground#e1ddd3
  • list.focusBackground#c9b99a33
  • list.highlightForeground#c9b99a
  • list.hoverBackground#c9b99a26
  • list.inactiveSelectionBackground#c9b99a26
  • minimap.background#181612
  • minimap.findMatchHighlight#9e4fa599
  • minimap.selectionHighlight#c9b99a66
  • notificationLink.foreground#c9b99a
  • notifications.background#2c2922
  • notifications.foreground#e1ddd3
  • panel.background#221f1a
  • panel.border#3c382e
  • panelTitle.activeBorder#c9b99a
  • panelTitle.activeForeground#e1ddd3
  • panelTitle.inactiveForeground#998965
  • peekView.border#c9b99a
  • peekViewEditor.background#221f1a
  • peekViewResult.background#2c2922
  • peekViewTitle.background#221f1a
  • progressBar.background#c9b99a
  • scrollbar.shadow#14120f45
  • scrollbarSlider.activeBackground#e1ddd359
  • scrollbarSlider.background#e1ddd31f
  • scrollbarSlider.hoverBackground#e1ddd340
  • selection.background#c9b99a4d
  • sideBar.background#2c2922
  • sideBar.border#3c382e
  • sideBar.foreground#e1ddd3
  • sideBarSectionHeader.background#c9b99a26
  • sideBarSectionHeader.foreground#e1ddd3
  • sideBarTitle.foreground#e1ddd3
  • statusBar.background#796f5c
  • statusBar.border#3c382e
  • statusBar.debuggingBackground#92a8d1
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#dfd5c2
  • statusBar.noFolderBackground#221f1a
  • statusBarItem.hoverBackground#c9b99a4d
  • statusBarItem.remoteBackground#c9b99a
  • statusBarItem.remoteForeground#1e1c17
  • tab.activeBackground#181612
  • tab.activeBorder#c9b99a
  • tab.activeBorderTop#c9b99a00
  • tab.activeForeground#e1ddd3
  • tab.border#3c382e
  • tab.inactiveBackground#221f1a
  • tab.inactiveForeground#998965
  • terminal.ansiBlack#181612
  • terminal.ansiBlue#6c838e
  • terminal.ansiBrightBlack#998965
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f4f1
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#e1ddd3
  • terminal.ansiYellow#efc050
  • terminal.background#221f1a
  • terminal.foreground#e1ddd3
  • terminalCursor.foreground#c9b99a
  • textLink.activeForeground#a2b5d8
  • textLink.foreground#92a8d1
  • titleBar.activeBackground#221f1a
  • titleBar.activeForeground#e1ddd3
  • titleBar.border#3c382e
  • titleBar.inactiveBackground#221f1a
  • titleBar.inactiveForeground#998965

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#998965italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#c9b99abold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#c9b99abold
storage.type, storage.modifier#c9b99abold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#92a8d1
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#c9b99a
string.regexp#92a8d1
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#ad6ab3
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#f3aeb0bold
variable.other.constant, variable.other.enummember#f3aeb0bold
constant.character.escape#d1c4a9
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#9c8472italic
entity.name.type.parameter#9c8472italic
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#e1ddd3
variable.parameter#e1ddd3italic
variable.language, variable.language.this, variable.language.self, variable.language.super#c9b99aitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#e1ddd3
entity.name.class, entity.name.type.class, support.class#9d7e93bold italic
entity.other.inherited-class#9d7e93italic
entity.name.tag, punctuation.definition.tag#c9b99abold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#d1c4a9
punctuation, punctuation.separator, punctuation.terminator, meta.brace#998965
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#9c8472italic
support.type.property-name.css, support.type.vendored.property-name.css#9c8472
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9d7e93bold
support.constant.property-value.css, support.constant.color.css#f3aeb0
keyword.other.unit.css#ad6ab3
support.type.property-name.json#9c8472
markup.heading, markup.heading entity.name, entity.name.section.markdown#c9b99abold
markup.bold#f3aeb0bold
markup.italic#9c8472italic
markup.inline.raw, markup.raw#92a8d1
markup.underline.link#76ff7b
markup.quote#998965italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050