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#24211b
  • activityBar.border#403a2f
  • activityBar.foreground#d4c19c
  • activityBar.inactiveForeground#9c8c65
  • activityBarBadge.background#92a8d1
  • activityBarBadge.foreground#f5f4f1
  • badge.background#d4c19c
  • badge.foreground#201d17
  • breadcrumb.activeSelectionForeground#e2ded3
  • breadcrumb.focusForeground#e2ded3
  • breadcrumb.foreground#9c8c65
  • button.background#d4c19c
  • button.foreground#201d17
  • button.hoverBackground#d8c7a6
  • button.secondaryBackground#2f2a22
  • button.secondaryForeground#e2ded3
  • descriptionForeground#9c8c65
  • dropdown.background#24211b
  • dropdown.border#403a2f
  • dropdown.foreground#e2ded3
  • editor.background#191713
  • editor.findMatchBackground#9e4fa566
  • editor.findMatchHighlightBackground#9e4fa533
  • editor.foreground#e2ded3
  • editor.inactiveSelectionBackground#d4c19c26
  • editor.lineHighlightBackground#d4c19c1a
  • editor.lineHighlightBorder#d4c19c00
  • editor.selectionBackground#d4c19c4d
  • editor.wordHighlightBackground#d4c19c33
  • editorBracketMatch.background#d4c19c40
  • editorBracketMatch.border#d4c19c99
  • editorCursor.foreground#d4c19c
  • editorError.foreground#dd4132
  • editorGroup.border#403a2f
  • editorGroupHeader.tabsBackground#24211b
  • editorGroupHeader.tabsBorder#403a2f
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e2ded333
  • editorIndentGuide.background#e2ded314
  • editorInfo.foreground#92a8d1
  • editorLineNumber.activeForeground#e2ded3
  • editorLineNumber.foreground#9c8c65
  • editorRuler.foreground#e2ded314
  • editorSuggestWidget.selectedBackground#d4c19c40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e2ded31a
  • editorWidget.background#24211b
  • editorWidget.border#403a2f
  • focusBorder#d4c19c99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#9c8c65
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#9c8c65
  • input.background#24211b
  • input.border#403a2f
  • input.foreground#e2ded3
  • input.placeholderForeground#9c8c65
  • inputOption.activeBorder#d4c19c
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#92a8d1
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#d4c19c4d
  • list.activeSelectionForeground#e2ded3
  • list.focusBackground#d4c19c33
  • list.highlightForeground#d4c19c
  • list.hoverBackground#d4c19c26
  • list.inactiveSelectionBackground#d4c19c26
  • minimap.background#191713
  • minimap.findMatchHighlight#9e4fa599
  • minimap.selectionHighlight#d4c19c66
  • notificationLink.foreground#d4c19c
  • notifications.background#2f2a22
  • notifications.foreground#e2ded3
  • panel.background#24211b
  • panel.border#403a2f
  • panelTitle.activeBorder#d4c19c
  • panelTitle.activeForeground#e2ded3
  • panelTitle.inactiveForeground#9c8c65
  • peekView.border#d4c19c
  • peekViewEditor.background#24211b
  • peekViewResult.background#2f2a22
  • peekViewTitle.background#24211b
  • progressBar.background#d4c19c
  • scrollbar.shadow#15131045
  • scrollbarSlider.activeBackground#e2ded359
  • scrollbarSlider.background#e2ded31f
  • scrollbarSlider.hoverBackground#e2ded340
  • selection.background#d4c19c4d
  • sideBar.background#2f2a22
  • sideBar.border#403a2f
  • sideBar.foreground#e2ded3
  • sideBarSectionHeader.background#d4c19c26
  • sideBarSectionHeader.foreground#e2ded3
  • sideBarTitle.foreground#e2ded3
  • statusBar.background#7f745e
  • statusBar.border#403a2f
  • statusBar.debuggingBackground#92a8d1
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#e5dac4
  • statusBar.noFolderBackground#24211b
  • statusBarItem.hoverBackground#d4c19c4d
  • statusBarItem.remoteBackground#d4c19c
  • statusBarItem.remoteForeground#201d17
  • tab.activeBackground#191713
  • tab.activeBorder#d4c19c
  • tab.activeBorderTop#d4c19c00
  • tab.activeForeground#e2ded3
  • tab.border#403a2f
  • tab.inactiveBackground#24211b
  • tab.inactiveForeground#9c8c65
  • terminal.ansiBlack#191713
  • terminal.ansiBlue#72878f
  • terminal.ansiBrightBlack#9c8c65
  • 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#e2ded3
  • terminal.ansiYellow#efc050
  • terminal.background#24211b
  • terminal.foreground#e2ded3
  • terminalCursor.foreground#d4c19c
  • textLink.activeForeground#a2b5d8
  • textLink.foreground#92a8d1
  • titleBar.activeBackground#24211b
  • titleBar.activeForeground#e2ded3
  • titleBar.border#403a2f
  • titleBar.inactiveBackground#24211b
  • titleBar.inactiveForeground#9c8c65

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#9c8c65italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#d4c19cbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#d4c19cbold
storage.type, storage.modifier#d4c19cbold
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#d4c19c
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#dacaab
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#e2ded3
variable.parameter#e2ded3italic
variable.language, variable.language.this, variable.language.self, variable.language.super#d4c19citalic
variable.other.property, variable.other.object.property, meta.object-literal.key#e2ded3
entity.name.class, entity.name.type.class, support.class#9d7e93bold italic
entity.other.inherited-class#9d7e93italic
entity.name.tag, punctuation.definition.tag#d4c19cbold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#dacaab
punctuation, punctuation.separator, punctuation.terminator, meta.brace#9c8c65
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#d4c19cbold
markup.bold#f3aeb0bold
markup.italic#9c8472italic
markup.inline.raw, markup.raw#92a8d1
markup.underline.link#76ff7b
markup.quote#9c8c65italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050