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#faf6f3
  • activityBar.border#f3e7de
  • activityBar.foreground#cc987a
  • activityBar.inactiveForeground#ebc7af
  • activityBarBadge.background#526f7f
  • activityBarBadge.foreground#fcfbfa
  • badge.background#cc987a
  • badge.foreground#261d17
  • breadcrumb.activeSelectionForeground#261d17
  • breadcrumb.focusForeground#261d17
  • breadcrumb.foreground#ebc7af
  • button.background#cc987a
  • button.foreground#261d17
  • button.hoverBackground#b8896e
  • button.secondaryBackground#faf6f3
  • button.secondaryForeground#261d17
  • descriptionForeground#ebc7af
  • dropdown.background#fdfcfb
  • dropdown.border#f3e7de
  • dropdown.foreground#261d17
  • editor.background#fdfcfb
  • editor.findMatchBackground#9e4fa559
  • editor.findMatchHighlightBackground#9e4fa526
  • editor.foreground#261d17
  • editor.inactiveSelectionBackground#cc987a1a
  • editor.lineHighlightBackground#cc987a14
  • editor.lineHighlightBorder#cc987a00
  • editor.selectionBackground#cc987a33
  • editor.wordHighlightBackground#cc987a26
  • editorBracketMatch.background#cc987a33
  • editorBracketMatch.border#cc987a80
  • editorCursor.foreground#cc987a
  • editorError.foreground#bf1932
  • editorGroup.border#f3e7de
  • editorGroupHeader.tabsBackground#fbf9f7
  • editorGroupHeader.tabsBorder#f3e7de
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#261d172e
  • editorIndentGuide.background#261d1714
  • editorInfo.foreground#526f7f
  • editorLineNumber.activeForeground#261d17
  • editorLineNumber.foreground#ebc7af
  • editorRuler.foreground#261d1714
  • editorSuggestWidget.selectedBackground#cc987a26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#261d171a
  • editorWidget.background#fdfcfb
  • editorWidget.border#f3e7de
  • focusBorder#cc987a80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#ebc7af
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#ebc7af
  • input.background#fdfcfb
  • input.border#f3e7de
  • input.foreground#261d17
  • input.placeholderForeground#ebc7af
  • inputOption.activeBorder#cc987a
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#526f7f
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#cc987a33
  • list.activeSelectionForeground#261d17
  • list.focusBackground#cc987a26
  • list.highlightForeground#cc987a
  • list.hoverBackground#cc987a1a
  • list.inactiveSelectionBackground#cc987a1a
  • minimap.background#fdfcfb
  • minimap.findMatchHighlight#9e4fa580
  • minimap.selectionHighlight#cc987a4d
  • notificationLink.foreground#cc987a
  • notifications.background#fdfcfb
  • notifications.foreground#261d17
  • panel.background#fbf9f7
  • panel.border#f3e7de
  • panelTitle.activeBorder#cc987a
  • panelTitle.activeForeground#261d17
  • panelTitle.inactiveForeground#ebc7af
  • peekView.border#cc987a
  • peekViewEditor.background#fbf9f7
  • peekViewResult.background#faf6f3
  • peekViewTitle.background#fbf9f7
  • progressBar.background#cc987a
  • scrollbar.shadow#19130f14
  • scrollbarSlider.activeBackground#261d174d
  • scrollbarSlider.background#261d171a
  • scrollbarSlider.hoverBackground#261d1733
  • selection.background#cc987a33
  • sideBar.background#fbf9f7
  • sideBar.border#f3e7de
  • sideBar.foreground#261d17
  • sideBarSectionHeader.background#cc987a1a
  • sideBarSectionHeader.foreground#261d17
  • sideBarTitle.foreground#261d17
  • statusBar.background#cc987a
  • statusBar.border#f3e7de
  • statusBar.debuggingBackground#526f7f
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#261d17
  • statusBar.noFolderBackground#faf6f3
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#ad8168
  • statusBarItem.remoteForeground#261d17
  • tab.activeBackground#fdfcfb
  • tab.activeBorder#cc987a
  • tab.activeBorderTop#cc987a00
  • tab.activeForeground#261d17
  • tab.border#f3e7de
  • tab.inactiveBackground#fbf9f7
  • tab.inactiveForeground#ebc7af
  • terminal.ansiBlack#261d17
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#ebc7af
  • 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#fbf9f7
  • terminal.foreground#261d17
  • terminalCursor.foreground#cc987a
  • textLink.activeForeground#496271
  • textLink.foreground#526f7f
  • titleBar.activeBackground#fbf9f7
  • titleBar.activeForeground#261d17
  • titleBar.border#f3e7de
  • titleBar.inactiveBackground#fbf9f7
  • titleBar.inactiveForeground#ebc7af

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#ebc7afitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#8f6a55bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#8f6a55bold
storage.type, storage.modifier#8f6a55bold
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#8f6a55
string.regexp#547182
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9e4fa5
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#6f7900bold
variable.other.constant, variable.other.enummember#6f7900bold
constant.character.escape#846656
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#8d6930italic
entity.name.type.parameter#8d6930italic
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#261d17
variable.parameter#261d17italic
variable.language, variable.language.this, variable.language.self, variable.language.super#8f6a55italic
variable.other.property, variable.other.object.property, meta.object-literal.key#261d17
entity.name.class, entity.name.type.class, support.class#428328bold italic
entity.other.inherited-class#428328italic
entity.name.tag, punctuation.definition.tag#8f6a55bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#846656
punctuation, punctuation.separator, punctuation.terminator, meta.brace#ebc7af
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#8d6930italic
support.type.property-name.css, support.type.vendored.property-name.css#8d6930
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#428328bold
support.constant.property-value.css, support.constant.color.css#6f7900
keyword.other.unit.css#9e4fa5
support.type.property-name.json#8d6930
markup.heading, markup.heading entity.name, entity.name.section.markdown#8f6a55bold
markup.bold#6f7900bold
markup.italic#8d6930italic
markup.inline.raw, markup.raw#547182
markup.underline.link#786d74
markup.quote#ebc7afitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050