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#f9f6f3
  • activityBar.border#f0e9e2
  • activityBar.foreground#b2a498
  • activityBar.inactiveForeground#decdbe
  • activityBarBadge.background#0e4474
  • activityBarBadge.foreground#fcfbfa
  • badge.background#b2a498
  • badge.foreground#211f1d
  • breadcrumb.activeSelectionForeground#211f1d
  • breadcrumb.focusForeground#211f1d
  • breadcrumb.foreground#decdbe
  • button.background#b2a498
  • button.foreground#211f1d
  • button.hoverBackground#a09489
  • button.secondaryBackground#f9f6f3
  • button.secondaryForeground#211f1d
  • descriptionForeground#decdbe
  • dropdown.background#fdfcfb
  • dropdown.border#f0e9e2
  • dropdown.foreground#211f1d
  • editor.background#fdfcfb
  • editor.findMatchBackground#76ff7b59
  • editor.findMatchHighlightBackground#76ff7b26
  • editor.foreground#211f1d
  • editor.inactiveSelectionBackground#b2a4981a
  • editor.lineHighlightBackground#b2a49814
  • editor.lineHighlightBorder#b2a49800
  • editor.selectionBackground#b2a49833
  • editor.wordHighlightBackground#b2a49826
  • editorBracketMatch.background#b2a49833
  • editorBracketMatch.border#b2a49880
  • editorCursor.foreground#b2a498
  • editorError.foreground#bf1932
  • editorGroup.border#f0e9e2
  • editorGroupHeader.tabsBackground#fbf9f7
  • editorGroupHeader.tabsBorder#f0e9e2
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#211f1d2e
  • editorIndentGuide.background#211f1d14
  • editorInfo.foreground#0e4474
  • editorLineNumber.activeForeground#211f1d
  • editorLineNumber.foreground#decdbe
  • editorRuler.foreground#211f1d14
  • editorSuggestWidget.selectedBackground#b2a49826
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#211f1d1a
  • editorWidget.background#fdfcfb
  • editorWidget.border#f0e9e2
  • focusBorder#b2a49880
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#decdbe
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#decdbe
  • input.background#fdfcfb
  • input.border#f0e9e2
  • input.foreground#211f1d
  • input.placeholderForeground#decdbe
  • inputOption.activeBorder#b2a498
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#0e4474
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#b2a49833
  • list.activeSelectionForeground#211f1d
  • list.focusBackground#b2a49826
  • list.highlightForeground#b2a498
  • list.hoverBackground#b2a4981a
  • list.inactiveSelectionBackground#b2a4981a
  • minimap.background#fdfcfb
  • minimap.findMatchHighlight#76ff7b80
  • minimap.selectionHighlight#b2a4984d
  • notificationLink.foreground#b2a498
  • notifications.background#fdfcfb
  • notifications.foreground#211f1d
  • panel.background#fbf9f7
  • panel.border#f0e9e2
  • panelTitle.activeBorder#b2a498
  • panelTitle.activeForeground#211f1d
  • panelTitle.inactiveForeground#decdbe
  • peekView.border#b2a498
  • peekViewEditor.background#fbf9f7
  • peekViewResult.background#f9f6f3
  • peekViewTitle.background#fbf9f7
  • progressBar.background#b2a498
  • scrollbar.shadow#16141314
  • scrollbarSlider.activeBackground#211f1d4d
  • scrollbarSlider.background#211f1d1a
  • scrollbarSlider.hoverBackground#211f1d33
  • selection.background#b2a49833
  • sideBar.background#fbf9f7
  • sideBar.border#f0e9e2
  • sideBar.foreground#211f1d
  • sideBarSectionHeader.background#b2a4981a
  • sideBarSectionHeader.foreground#211f1d
  • sideBarTitle.foreground#211f1d
  • statusBar.background#b2a498
  • statusBar.border#f0e9e2
  • statusBar.debuggingBackground#0e4474
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#211f1d
  • statusBar.noFolderBackground#f9f6f3
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#978b81
  • statusBarItem.remoteForeground#211f1d
  • tab.activeBackground#fdfcfb
  • tab.activeBorder#b2a498
  • tab.activeBorderTop#b2a49800
  • tab.activeForeground#211f1d
  • tab.border#f0e9e2
  • tab.inactiveBackground#fbf9f7
  • tab.inactiveForeground#decdbe
  • terminal.ansiBlack#211f1d
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#decdbe
  • 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#211f1d
  • terminalCursor.foreground#b2a498
  • textLink.activeForeground#0c3d67
  • textLink.foreground#0e4474
  • titleBar.activeBackground#fbf9f7
  • titleBar.activeForeground#211f1d
  • titleBar.border#f0e9e2
  • titleBar.inactiveBackground#fbf9f7
  • titleBar.inactiveForeground#decdbe

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#decdbeitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#7b726abold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#7b726abold
storage.type, storage.modifier#7b726abold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#0f4c81
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#7b726a
string.regexp#0f4c81
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#38793a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7c1c32bold
variable.other.constant, variable.other.enummember#7c1c32bold
constant.character.escape#756e66
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#796c48italic
entity.name.type.parameter#796c48italic
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#211f1d
variable.parameter#211f1ditalic
variable.language, variable.language.this, variable.language.self, variable.language.super#7b726aitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#211f1d
entity.name.class, entity.name.type.class, support.class#9e4fa5bold italic
entity.other.inherited-class#9e4fa5italic
entity.name.tag, punctuation.definition.tag#7b726abold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#756e66
punctuation, punctuation.separator, punctuation.terminator, meta.brace#decdbe
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#796c48italic
support.type.property-name.css, support.type.vendored.property-name.css#796c48
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9e4fa5bold
support.constant.property-value.css, support.constant.color.css#7c1c32
keyword.other.unit.css#38793a
support.type.property-name.json#796c48
markup.heading, markup.heading entity.name, entity.name.section.markdown#7b726abold
markup.bold#7c1c32bold
markup.italic#796c48italic
markup.inline.raw, markup.raw#0f4c81
markup.underline.link#786d74
markup.quote#decdbeitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050