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#29210e
  • activityBar.border#483a18
  • activityBar.foreground#efc050
  • activityBar.inactiveForeground#a48c4f
  • activityBarBadge.background#92a8d1
  • activityBarBadge.foreground#f5f4f1
  • badge.background#efc050
  • badge.foreground#241d0c
  • breadcrumb.activeSelectionForeground#e4dece
  • breadcrumb.focusForeground#e4dece
  • breadcrumb.foreground#a48c4f
  • button.background#efc050
  • button.foreground#241d0c
  • button.hoverBackground#f1c662
  • button.secondaryBackground#352a12
  • button.secondaryForeground#e4dece
  • descriptionForeground#a48c4f
  • dropdown.background#29210e
  • dropdown.border#483a18
  • dropdown.foreground#e4dece
  • editor.background#1d170a
  • editor.findMatchBackground#00b14066
  • editor.findMatchHighlightBackground#00b14033
  • editor.foreground#e4dece
  • editor.inactiveSelectionBackground#efc05026
  • editor.lineHighlightBackground#efc0501a
  • editor.lineHighlightBorder#efc05000
  • editor.selectionBackground#efc0504d
  • editor.wordHighlightBackground#efc05033
  • editorBracketMatch.background#efc05040
  • editorBracketMatch.border#efc05099
  • editorCursor.foreground#efc050
  • editorError.foreground#dd4132
  • editorGroup.border#483a18
  • editorGroupHeader.tabsBackground#29210e
  • editorGroupHeader.tabsBorder#483a18
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e4dece33
  • editorIndentGuide.background#e4dece14
  • editorInfo.foreground#92a8d1
  • editorLineNumber.activeForeground#e4dece
  • editorLineNumber.foreground#a48c4f
  • editorRuler.foreground#e4dece14
  • editorSuggestWidget.selectedBackground#efc05040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e4dece1a
  • editorWidget.background#29210e
  • editorWidget.border#483a18
  • focusBorder#efc05099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#a48c4f
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#a48c4f
  • input.background#29210e
  • input.border#483a18
  • input.foreground#e4dece
  • input.placeholderForeground#a48c4f
  • inputOption.activeBorder#efc050
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#92a8d1
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#efc0504d
  • list.activeSelectionForeground#e4dece
  • list.focusBackground#efc05033
  • list.highlightForeground#efc050
  • list.hoverBackground#efc05026
  • list.inactiveSelectionBackground#efc05026
  • minimap.background#1d170a
  • minimap.findMatchHighlight#00b14099
  • minimap.selectionHighlight#efc05066
  • notificationLink.foreground#efc050
  • notifications.background#352a12
  • notifications.foreground#e4dece
  • panel.background#29210e
  • panel.border#483a18
  • panelTitle.activeBorder#efc050
  • panelTitle.activeForeground#e4dece
  • panelTitle.inactiveForeground#a48c4f
  • peekView.border#efc050
  • peekViewEditor.background#29210e
  • peekViewResult.background#352a12
  • peekViewTitle.background#29210e
  • progressBar.background#efc050
  • scrollbar.shadow#18130845
  • scrollbarSlider.activeBackground#e4dece59
  • scrollbarSlider.background#e4dece1f
  • scrollbarSlider.hoverBackground#e4dece40
  • selection.background#efc0504d
  • sideBar.background#352a12
  • sideBar.border#483a18
  • sideBar.foreground#e4dece
  • sideBarSectionHeader.background#efc05026
  • sideBarSectionHeader.foreground#e4dece
  • sideBarTitle.foreground#e4dece
  • statusBar.background#8f7330
  • statusBar.border#483a18
  • statusBar.debuggingBackground#92a8d1
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#f5d996
  • statusBar.noFolderBackground#29210e
  • statusBarItem.hoverBackground#efc0504d
  • statusBarItem.remoteBackground#efc050
  • statusBarItem.remoteForeground#241d0c
  • tab.activeBackground#1d170a
  • tab.activeBorder#efc050
  • tab.activeBorderTop#efc05000
  • tab.activeForeground#e4dece
  • tab.border#483a18
  • tab.inactiveBackground#29210e
  • tab.inactiveForeground#a48c4f
  • terminal.ansiBlack#1d170a
  • terminal.ansiBlue#7f8669
  • terminal.ansiBrightBlack#a48c4f
  • 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#e4dece
  • terminal.ansiYellow#efc050
  • terminal.background#29210e
  • terminal.foreground#e4dece
  • terminalCursor.foreground#efc050
  • textLink.activeForeground#a2b5d8
  • textLink.foreground#92a8d1
  • titleBar.activeBackground#29210e
  • titleBar.activeForeground#e4dece
  • titleBar.border#483a18
  • titleBar.inactiveBackground#29210e
  • titleBar.inactiveForeground#a48c4f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a48c4fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#efc050bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#efc050bold
storage.type, storage.modifier#efc050bold
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#efc050
string.regexp#92a8d1
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#00b140
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#d65651bold
variable.other.constant, variable.other.enummember#d65651bold
constant.character.escape#f1c96a
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#ff6b00italic
entity.name.type.parameter#ff6b00italic
entity.name.function, meta.function entity.name.function#b0d7e1bold
meta.function-call entity.name.function, support.function#b0d7e1
meta.method-call entity.name.function, entity.name.function.member#b0d7e1
variable, variable.other, variable.other.readwrite#e4dece
variable.parameter#e4deceitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#efc050italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e4dece
entity.name.class, entity.name.type.class, support.class#9d7e93bold italic
entity.other.inherited-class#9d7e93italic
entity.name.tag, punctuation.definition.tag#efc050bold
entity.other.attribute-name#b0d7e1italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#f1c96a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a48c4f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ff6b00italic
support.type.property-name.css, support.type.vendored.property-name.css#ff6b00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9d7e93bold
support.constant.property-value.css, support.constant.color.css#d65651
keyword.other.unit.css#00b140
support.type.property-name.json#ff6b00
markup.heading, markup.heading entity.name, entity.name.section.markdown#efc050bold
markup.bold#d65651bold
markup.italic#ff6b00italic
markup.inline.raw, markup.raw#92a8d1
markup.underline.link#b0d7e1
markup.quote#a48c4fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050