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#ebe8df
  • activityBar.border#d2caaf
  • activityBar.foreground#c4b23e
  • activityBar.inactiveForeground#b19f4e
  • activityBarBadge.background#182660
  • activityBarBadge.foreground#f5f4f1
  • badge.background#c4b23e
  • badge.foreground#25210c
  • breadcrumb.activeSelectionForeground#25210c
  • breadcrumb.focusForeground#25210c
  • breadcrumb.foreground#b19f4e
  • button.background#c4b23e
  • button.foreground#25210c
  • button.hoverBackground#b0a038
  • button.secondaryBackground#ebe8df
  • button.secondaryForeground#25210c
  • descriptionForeground#b19f4e
  • dropdown.background#f8f7f4
  • dropdown.border#d2caaf
  • dropdown.foreground#25210c
  • editor.background#f8f7f4
  • editor.findMatchBackground#00b14059
  • editor.findMatchHighlightBackground#00b14026
  • editor.foreground#25210c
  • editor.inactiveSelectionBackground#c4b23e1a
  • editor.lineHighlightBackground#c4b23e14
  • editor.lineHighlightBorder#c4b23e00
  • editor.selectionBackground#c4b23e33
  • editor.wordHighlightBackground#c4b23e26
  • editorBracketMatch.background#c4b23e33
  • editorBracketMatch.border#c4b23e80
  • editorCursor.foreground#c4b23e
  • editorError.foreground#bf1932
  • editorGroup.border#d2caaf
  • editorGroupHeader.tabsBackground#f2f0ea
  • editorGroupHeader.tabsBorder#d2caaf
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#25210c2e
  • editorIndentGuide.background#25210c14
  • editorInfo.foreground#182660
  • editorLineNumber.activeForeground#25210c
  • editorLineNumber.foreground#b19f4e
  • editorRuler.foreground#25210c14
  • editorSuggestWidget.selectedBackground#c4b23e26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#25210c1a
  • editorWidget.background#f8f7f4
  • editorWidget.border#d2caaf
  • focusBorder#c4b23e80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#b19f4e
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#b19f4e
  • input.background#f8f7f4
  • input.border#d2caaf
  • input.foreground#25210c
  • input.placeholderForeground#b19f4e
  • inputOption.activeBorder#c4b23e
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#182660
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#c4b23e33
  • list.activeSelectionForeground#25210c
  • list.focusBackground#c4b23e26
  • list.highlightForeground#c4b23e
  • list.hoverBackground#c4b23e1a
  • list.inactiveSelectionBackground#c4b23e1a
  • minimap.background#f8f7f4
  • minimap.findMatchHighlight#00b14080
  • minimap.selectionHighlight#c4b23e4d
  • notificationLink.foreground#c4b23e
  • notifications.background#f8f7f4
  • notifications.foreground#25210c
  • panel.background#f2f0ea
  • panel.border#d2caaf
  • panelTitle.activeBorder#c4b23e
  • panelTitle.activeForeground#25210c
  • panelTitle.inactiveForeground#b19f4e
  • peekView.border#c4b23e
  • peekViewEditor.background#f2f0ea
  • peekViewResult.background#ebe8df
  • peekViewTitle.background#f2f0ea
  • progressBar.background#c4b23e
  • scrollbar.shadow#18160814
  • scrollbarSlider.activeBackground#25210c4d
  • scrollbarSlider.background#25210c1a
  • scrollbarSlider.hoverBackground#25210c33
  • selection.background#c4b23e33
  • sideBar.background#f2f0ea
  • sideBar.border#d2caaf
  • sideBar.foreground#25210c
  • sideBarSectionHeader.background#c4b23e1a
  • sideBarSectionHeader.foreground#25210c
  • sideBarTitle.foreground#25210c
  • statusBar.background#c4b23e
  • statusBar.border#d2caaf
  • statusBar.debuggingBackground#182660
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#25210c
  • statusBar.noFolderBackground#ebe8df
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#a79735
  • statusBarItem.remoteForeground#25210c
  • tab.activeBackground#f8f7f4
  • tab.activeBorder#c4b23e
  • tab.activeBorderTop#c4b23e00
  • tab.activeForeground#25210c
  • tab.border#d2caaf
  • tab.inactiveBackground#f2f0ea
  • tab.inactiveForeground#b19f4e
  • terminal.ansiBlack#25210c
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#b19f4e
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f4f1
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f8f7f4
  • terminal.ansiYellow#d4a017
  • terminal.background#f2f0ea
  • terminal.foreground#25210c
  • terminalCursor.foreground#c4b23e
  • textLink.activeForeground#162256
  • textLink.foreground#182660
  • titleBar.activeBackground#f2f0ea
  • titleBar.activeForeground#25210c
  • titleBar.border#d2caaf
  • titleBar.inactiveBackground#f2f0ea
  • titleBar.inactiveForeground#b19f4e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#b19f4eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#7d7228bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#7d7228bold
storage.type, storage.modifier#7d7228bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#1b2a6b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#7d7228
string.regexp#1b2a6b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#007f2e
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#966155bold
variable.other.constant, variable.other.enummember#966155bold
constant.character.escape#756d31
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#796c56italic
entity.name.type.parameter#796c56italic
entity.name.function, meta.function entity.name.function#5a6f73bold
meta.function-call entity.name.function, support.function#5a6f73
meta.method-call entity.name.function, entity.name.function.member#5a6f73
variable, variable.other, variable.other.readwrite#25210c
variable.parameter#25210citalic
variable.language, variable.language.this, variable.language.self, variable.language.super#7d7228italic
variable.other.property, variable.other.object.property, meta.object-literal.key#25210c
entity.name.class, entity.name.type.class, support.class#c72f7cbold italic
entity.other.inherited-class#c72f7citalic
entity.name.tag, punctuation.definition.tag#7d7228bold
entity.other.attribute-name#5a6f73italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#756d31
punctuation, punctuation.separator, punctuation.terminator, meta.brace#b19f4e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#796c56italic
support.type.property-name.css, support.type.vendored.property-name.css#796c56
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c72f7cbold
support.constant.property-value.css, support.constant.color.css#966155
keyword.other.unit.css#007f2e
support.type.property-name.json#796c56
markup.heading, markup.heading entity.name, entity.name.section.markdown#7d7228bold
markup.bold#966155bold
markup.italic#796c56italic
markup.inline.raw, markup.raw#1b2a6b
markup.underline.link#5a6f73
markup.quote#b19f4eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050