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#31310b
  • activityBar.border#4f4f12
  • activityBar.foreground#e8e835
  • activityBar.inactiveForeground#a29847
  • activityBarBadge.background#6667ab
  • activityBarBadge.foreground#f5f4f1
  • badge.background#e8e835
  • badge.foreground#232308
  • breadcrumb.activeSelectionForeground#e4e0cc
  • breadcrumb.focusForeground#e4e0cc
  • breadcrumb.foreground#a29847
  • button.background#e8e835
  • button.foreground#232308
  • button.hoverBackground#eaea49
  • button.secondaryBackground#3c3c0e
  • button.secondaryForeground#e4e0cc
  • descriptionForeground#a29847
  • dropdown.background#31310b
  • dropdown.border#4f4f12
  • dropdown.foreground#e4e0cc
  • editor.background#252508
  • editor.findMatchBackground#d4145a66
  • editor.findMatchHighlightBackground#d4145a33
  • editor.foreground#e4e0cc
  • editor.inactiveSelectionBackground#e8e83526
  • editor.lineHighlightBackground#e8e8351a
  • editor.lineHighlightBorder#e8e83500
  • editor.selectionBackground#e8e8354d
  • editor.wordHighlightBackground#e8e83533
  • editorBracketMatch.background#e8e83540
  • editorBracketMatch.border#e8e83599
  • editorCursor.foreground#e8e835
  • editorError.foreground#dd4132
  • editorGroup.border#4f4f12
  • editorGroupHeader.tabsBackground#31310b
  • editorGroupHeader.tabsBorder#4f4f12
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e4e0cc33
  • editorIndentGuide.background#e4e0cc14
  • editorInfo.foreground#6667ab
  • editorLineNumber.activeForeground#e4e0cc
  • editorLineNumber.foreground#a29847
  • editorRuler.foreground#e4e0cc14
  • editorSuggestWidget.selectedBackground#e8e83540
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e4e0cc1a
  • editorWidget.background#31310b
  • editorWidget.border#4f4f12
  • focusBorder#e8e83599
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#a29847
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#a29847
  • input.background#31310b
  • input.border#4f4f12
  • input.foreground#e4e0cc
  • input.placeholderForeground#a29847
  • inputOption.activeBorder#e8e835
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#6667ab
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#e8e8354d
  • list.activeSelectionForeground#e4e0cc
  • list.focusBackground#e8e83533
  • list.highlightForeground#e8e835
  • list.hoverBackground#e8e83526
  • list.inactiveSelectionBackground#e8e83526
  • minimap.background#252508
  • minimap.findMatchHighlight#d4145a99
  • minimap.selectionHighlight#e8e83566
  • notificationLink.foreground#e8e835
  • notifications.background#3c3c0e
  • notifications.foreground#e4e0cc
  • panel.background#31310b
  • panel.border#4f4f12
  • panelTitle.activeBorder#e8e835
  • panelTitle.activeForeground#e4e0cc
  • panelTitle.inactiveForeground#a29847
  • peekView.border#e8e835
  • peekViewEditor.background#31310b
  • peekViewResult.background#3c3c0e
  • peekViewTitle.background#31310b
  • progressBar.background#e8e835
  • scrollbar.shadow#17170545
  • scrollbarSlider.activeBackground#e4e0cc59
  • scrollbarSlider.background#e4e0cc1f
  • scrollbarSlider.hoverBackground#e4e0cc40
  • selection.background#e8e8354d
  • sideBar.background#3c3c0e
  • sideBar.border#4f4f12
  • sideBar.foreground#e4e0cc
  • sideBarSectionHeader.background#e8e83526
  • sideBarSectionHeader.foreground#e4e0cc
  • sideBarTitle.foreground#e4e0cc
  • statusBar.background#8b8b20
  • statusBar.border#4f4f12
  • statusBar.debuggingBackground#6667ab
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#f1f186
  • statusBar.noFolderBackground#31310b
  • statusBarItem.hoverBackground#e8e8354d
  • statusBarItem.remoteBackground#e8e835
  • statusBarItem.remoteForeground#232308
  • tab.activeBackground#252508
  • tab.activeBorder#e8e835
  • tab.activeBorderTop#e8e83500
  • tab.activeForeground#e4e0cc
  • tab.border#4f4f12
  • tab.inactiveBackground#31310b
  • tab.inactiveForeground#a29847
  • terminal.ansiBlack#252508
  • terminal.ansiBlue#7c9a5b
  • terminal.ansiBrightBlack#a29847
  • 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#e4e0cc
  • terminal.ansiYellow#efc050
  • terminal.background#31310b
  • terminal.foreground#e4e0cc
  • terminalCursor.foreground#e8e835
  • textLink.activeForeground#7d7eb8
  • textLink.foreground#6667ab
  • titleBar.activeBackground#31310b
  • titleBar.activeForeground#e4e0cc
  • titleBar.border#4f4f12
  • titleBar.inactiveBackground#31310b
  • titleBar.inactiveForeground#a29847

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a29847italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#e8e835bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#e8e835bold
storage.type, storage.modifier#e8e835bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#8788be
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#e8e835
string.regexp#8788be
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#e26492
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#fe5000bold
variable.other.constant, variable.other.enummember#fe5000bold
constant.character.escape#ebeb53
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#ffc72citalic
entity.name.type.parameter#ffc72citalic
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#e4e0cc
variable.parameter#e4e0ccitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#e8e835italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e4e0cc
entity.name.class, entity.name.type.class, support.class#00b140bold italic
entity.other.inherited-class#00b140italic
entity.name.tag, punctuation.definition.tag#e8e835bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ebeb53
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a29847
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ffc72citalic
support.type.property-name.css, support.type.vendored.property-name.css#ffc72c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00b140bold
support.constant.property-value.css, support.constant.color.css#fe5000
keyword.other.unit.css#e26492
support.type.property-name.json#ffc72c
markup.heading, markup.heading entity.name, entity.name.section.markdown#e8e835bold
markup.bold#fe5000bold
markup.italic#ffc72citalic
markup.inline.raw, markup.raw#8788be
markup.underline.link#e8d4e2
markup.quote#a29847italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050