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#f3efe8
  • activityBar.border#e4d7c3
  • activityBar.foreground#ba8b3e
  • activityBar.inactiveForeground#cca76e
  • activityBarBadge.background#003795
  • activityBarBadge.foreground#f9f8f5
  • badge.background#ba8b3e
  • badge.foreground#231a0c
  • breadcrumb.activeSelectionForeground#231a0c
  • breadcrumb.focusForeground#231a0c
  • breadcrumb.foreground#cca76e
  • button.background#ba8b3e
  • button.foreground#231a0c
  • button.hoverBackground#a77d38
  • button.secondaryBackground#f3efe8
  • button.secondaryForeground#231a0c
  • descriptionForeground#cca76e
  • dropdown.background#fbfaf7
  • dropdown.border#e4d7c3
  • dropdown.foreground#231a0c
  • editor.background#fbfaf7
  • editor.findMatchBackground#b163a359
  • editor.findMatchHighlightBackground#b163a326
  • editor.foreground#231a0c
  • editor.inactiveSelectionBackground#ba8b3e1a
  • editor.lineHighlightBackground#ba8b3e14
  • editor.lineHighlightBorder#ba8b3e00
  • editor.selectionBackground#ba8b3e33
  • editor.wordHighlightBackground#ba8b3e26
  • editorBracketMatch.background#ba8b3e33
  • editorBracketMatch.border#ba8b3e80
  • editorCursor.foreground#ba8b3e
  • editorError.foreground#bf1932
  • editorGroup.border#e4d7c3
  • editorGroupHeader.tabsBackground#f7f4f0
  • editorGroupHeader.tabsBorder#e4d7c3
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#231a0c2e
  • editorIndentGuide.background#231a0c14
  • editorInfo.foreground#003795
  • editorLineNumber.activeForeground#231a0c
  • editorLineNumber.foreground#cca76e
  • editorRuler.foreground#231a0c14
  • editorSuggestWidget.selectedBackground#ba8b3e26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#231a0c1a
  • editorWidget.background#fbfaf7
  • editorWidget.border#e4d7c3
  • focusBorder#ba8b3e80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#cca76e
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#cca76e
  • input.background#fbfaf7
  • input.border#e4d7c3
  • input.foreground#231a0c
  • input.placeholderForeground#cca76e
  • inputOption.activeBorder#ba8b3e
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#003795
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#ba8b3e33
  • list.activeSelectionForeground#231a0c
  • list.focusBackground#ba8b3e26
  • list.highlightForeground#ba8b3e
  • list.hoverBackground#ba8b3e1a
  • list.inactiveSelectionBackground#ba8b3e1a
  • minimap.background#fbfaf7
  • minimap.findMatchHighlight#b163a380
  • minimap.selectionHighlight#ba8b3e4d
  • notificationLink.foreground#ba8b3e
  • notifications.background#fbfaf7
  • notifications.foreground#231a0c
  • panel.background#f7f4f0
  • panel.border#e4d7c3
  • panelTitle.activeBorder#ba8b3e
  • panelTitle.activeForeground#231a0c
  • panelTitle.inactiveForeground#cca76e
  • peekView.border#ba8b3e
  • peekViewEditor.background#f7f4f0
  • peekViewResult.background#f3efe8
  • peekViewTitle.background#f7f4f0
  • progressBar.background#ba8b3e
  • scrollbar.shadow#17110814
  • scrollbarSlider.activeBackground#231a0c4d
  • scrollbarSlider.background#231a0c1a
  • scrollbarSlider.hoverBackground#231a0c33
  • selection.background#ba8b3e33
  • sideBar.background#f7f4f0
  • sideBar.border#e4d7c3
  • sideBar.foreground#231a0c
  • sideBarSectionHeader.background#ba8b3e1a
  • sideBarSectionHeader.foreground#231a0c
  • sideBarTitle.foreground#231a0c
  • statusBar.background#ba8b3e
  • statusBar.border#e4d7c3
  • statusBar.debuggingBackground#003795
  • statusBar.debuggingForeground#f9f8f5
  • statusBar.foreground#231a0c
  • statusBar.noFolderBackground#f3efe8
  • statusBarItem.hoverBackground#f9f8f533
  • statusBarItem.remoteBackground#9e7635
  • statusBarItem.remoteForeground#231a0c
  • tab.activeBackground#fbfaf7
  • tab.activeBorder#ba8b3e
  • tab.activeBorderTop#ba8b3e00
  • tab.activeForeground#231a0c
  • tab.border#e4d7c3
  • tab.inactiveBackground#f7f4f0
  • tab.inactiveForeground#cca76e
  • terminal.ansiBlack#231a0c
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#cca76e
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f9f8f5
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#fbfaf7
  • terminal.ansiYellow#d4a017
  • terminal.background#f7f4f0
  • terminal.foreground#231a0c
  • terminalCursor.foreground#ba8b3e
  • textLink.activeForeground#003184
  • textLink.foreground#003795
  • titleBar.activeBackground#f7f4f0
  • titleBar.activeForeground#231a0c
  • titleBar.border#e4d7c3
  • titleBar.inactiveBackground#f7f4f0
  • titleBar.inactiveForeground#cca76e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#cca76eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#8d6930bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#8d6930bold
storage.type, storage.modifier#8d6930bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#003da5
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#8d6930
string.regexp#003da5
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#96548a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#6c7358bold
variable.other.constant, variable.other.enummember#6c7358bold
constant.character.escape#84663a
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#8f6a55italic
entity.name.type.parameter#8f6a55italic
entity.name.function, meta.function entity.name.function#7f6666bold
meta.function-call entity.name.function, support.function#7f6666
meta.method-call entity.name.function, entity.name.function.member#7f6666
variable, variable.other, variable.other.readwrite#231a0c
variable.parameter#231a0citalic
variable.language, variable.language.this, variable.language.self, variable.language.super#8d6930italic
variable.other.property, variable.other.object.property, meta.object-literal.key#231a0c
entity.name.class, entity.name.type.class, support.class#38793abold italic
entity.other.inherited-class#38793aitalic
entity.name.tag, punctuation.definition.tag#8d6930bold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#84663a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#cca76e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#8f6a55italic
support.type.property-name.css, support.type.vendored.property-name.css#8f6a55
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#38793abold
support.constant.property-value.css, support.constant.color.css#6c7358
keyword.other.unit.css#96548a
support.type.property-name.json#8f6a55
markup.heading, markup.heading entity.name, entity.name.section.markdown#8d6930bold
markup.bold#6c7358bold
markup.italic#8f6a55italic
markup.inline.raw, markup.raw#003da5
markup.underline.link#7f6666
markup.quote#cca76eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050