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#f9f5f2
  • activityBar.border#f2e4db
  • activityBar.foreground#c48259
  • activityBar.inactiveForeground#e7bc9e
  • activityBarBadge.background#526f7f
  • activityBarBadge.foreground#fcfbfa
  • badge.background#c48259
  • badge.foreground#251811
  • breadcrumb.activeSelectionForeground#251811
  • breadcrumb.focusForeground#251811
  • breadcrumb.foreground#e7bc9e
  • button.background#c48259
  • button.foreground#251811
  • button.hoverBackground#b07550
  • button.secondaryBackground#f9f5f2
  • button.secondaryForeground#251811
  • descriptionForeground#e7bc9e
  • dropdown.background#fdfcfb
  • dropdown.border#f2e4db
  • dropdown.foreground#251811
  • editor.background#fdfcfb
  • editor.findMatchBackground#76ff7b59
  • editor.findMatchHighlightBackground#76ff7b26
  • editor.foreground#251811
  • editor.inactiveSelectionBackground#c482591a
  • editor.lineHighlightBackground#c4825914
  • editor.lineHighlightBorder#c4825900
  • editor.selectionBackground#c4825933
  • editor.wordHighlightBackground#c4825926
  • editorBracketMatch.background#c4825933
  • editorBracketMatch.border#c4825980
  • editorCursor.foreground#c48259
  • editorError.foreground#bf1932
  • editorGroup.border#f2e4db
  • editorGroupHeader.tabsBackground#fbf9f6
  • editorGroupHeader.tabsBorder#f2e4db
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#2518112e
  • editorIndentGuide.background#25181114
  • editorInfo.foreground#526f7f
  • editorLineNumber.activeForeground#251811
  • editorLineNumber.foreground#e7bc9e
  • editorRuler.foreground#25181114
  • editorSuggestWidget.selectedBackground#c4825926
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#2518111a
  • editorWidget.background#fdfcfb
  • editorWidget.border#f2e4db
  • focusBorder#c4825980
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#e7bc9e
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#e7bc9e
  • input.background#fdfcfb
  • input.border#f2e4db
  • input.foreground#251811
  • input.placeholderForeground#e7bc9e
  • inputOption.activeBorder#c48259
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#526f7f
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#c4825933
  • list.activeSelectionForeground#251811
  • list.focusBackground#c4825926
  • list.highlightForeground#c48259
  • list.hoverBackground#c482591a
  • list.inactiveSelectionBackground#c482591a
  • minimap.background#fdfcfb
  • minimap.findMatchHighlight#76ff7b80
  • minimap.selectionHighlight#c482594d
  • notificationLink.foreground#c48259
  • notifications.background#fdfcfb
  • notifications.foreground#251811
  • panel.background#fbf9f6
  • panel.border#f2e4db
  • panelTitle.activeBorder#c48259
  • panelTitle.activeForeground#251811
  • panelTitle.inactiveForeground#e7bc9e
  • peekView.border#c48259
  • peekViewEditor.background#fbf9f6
  • peekViewResult.background#f9f5f2
  • peekViewTitle.background#fbf9f6
  • progressBar.background#c48259
  • scrollbar.shadow#18100b14
  • scrollbarSlider.activeBackground#2518114d
  • scrollbarSlider.background#2518111a
  • scrollbarSlider.hoverBackground#25181133
  • selection.background#c4825933
  • sideBar.background#fbf9f6
  • sideBar.border#f2e4db
  • sideBar.foreground#251811
  • sideBarSectionHeader.background#c482591a
  • sideBarSectionHeader.foreground#251811
  • sideBarTitle.foreground#251811
  • statusBar.background#c48259
  • statusBar.border#f2e4db
  • statusBar.debuggingBackground#526f7f
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#251811
  • statusBar.noFolderBackground#f9f5f2
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#a76f4c
  • statusBarItem.remoteForeground#251811
  • tab.activeBackground#fdfcfb
  • tab.activeBorder#c48259
  • tab.activeBorderTop#c4825900
  • tab.activeForeground#251811
  • tab.border#f2e4db
  • tab.inactiveBackground#fbf9f6
  • tab.inactiveForeground#e7bc9e
  • terminal.ansiBlack#251811
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#e7bc9e
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#fdfcfb
  • terminal.ansiYellow#d4a017
  • terminal.background#fbf9f6
  • terminal.foreground#251811
  • terminalCursor.foreground#c48259
  • textLink.activeForeground#496271
  • textLink.foreground#526f7f
  • titleBar.activeBackground#fbf9f6
  • titleBar.activeForeground#251811
  • titleBar.border#f2e4db
  • titleBar.inactiveBackground#fbf9f6
  • titleBar.inactiveForeground#e7bc9e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e7bc9eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#946243bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#946243bold
storage.type, storage.modifier#946243bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#547182
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#946243
string.regexp#547182
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#38793a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#88666fbold
variable.other.constant, variable.other.enummember#88666fbold
constant.character.escape#966b50
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#a8564bitalic
entity.name.type.parameter#a8564bitalic
entity.name.function, meta.function entity.name.function#786d74bold
meta.function-call entity.name.function, support.function#786d74
meta.method-call entity.name.function, entity.name.function.member#786d74
variable, variable.other, variable.other.readwrite#251811
variable.parameter#251811italic
variable.language, variable.language.this, variable.language.self, variable.language.super#946243italic
variable.other.property, variable.other.object.property, meta.object-literal.key#251811
entity.name.class, entity.name.type.class, support.class#9e4fa5bold italic
entity.other.inherited-class#9e4fa5italic
entity.name.tag, punctuation.definition.tag#946243bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#966b50
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e7bc9e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#a8564bitalic
support.type.property-name.css, support.type.vendored.property-name.css#a8564b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9e4fa5bold
support.constant.property-value.css, support.constant.color.css#88666f
keyword.other.unit.css#38793a
support.type.property-name.json#a8564b
markup.heading, markup.heading entity.name, entity.name.section.markdown#946243bold
markup.bold#88666fbold
markup.italic#a8564bitalic
markup.inline.raw, markup.raw#547182
markup.underline.link#786d74
markup.quote#e7bc9eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050