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#eae1e5
  • activityBar.border#cebbc4
  • activityBar.foreground#baaab5
  • activityBar.inactiveForeground#a88395
  • activityBarBadge.background#009f3a
  • activityBarBadge.foreground#f5f1f2
  • badge.background#baaab5
  • badge.foreground#232022
  • breadcrumb.activeSelectionForeground#232022
  • breadcrumb.focusForeground#232022
  • breadcrumb.foreground#a88395
  • button.background#baaab5
  • button.foreground#232022
  • button.hoverBackground#a799a3
  • button.secondaryBackground#eae1e5
  • button.secondaryForeground#232022
  • descriptionForeground#a88395
  • dropdown.background#f8f5f6
  • dropdown.border#cebbc4
  • dropdown.foreground#232022
  • editor.background#f8f5f6
  • editor.findMatchBackground#1b2a6b59
  • editor.findMatchHighlightBackground#1b2a6b26
  • editor.foreground#232022
  • editor.inactiveSelectionBackground#baaab51a
  • editor.lineHighlightBackground#baaab514
  • editor.lineHighlightBorder#baaab500
  • editor.selectionBackground#baaab533
  • editor.wordHighlightBackground#baaab526
  • editorBracketMatch.background#baaab533
  • editorBracketMatch.border#baaab580
  • editorCursor.foreground#baaab5
  • editorError.foreground#bf1932
  • editorGroup.border#cebbc4
  • editorGroupHeader.tabsBackground#f1ebee
  • editorGroupHeader.tabsBorder#cebbc4
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#2320222e
  • editorIndentGuide.background#23202214
  • editorInfo.foreground#009f3a
  • editorLineNumber.activeForeground#232022
  • editorLineNumber.foreground#a88395
  • editorRuler.foreground#23202214
  • editorSuggestWidget.selectedBackground#baaab526
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#2320221a
  • editorWidget.background#f8f5f6
  • editorWidget.border#cebbc4
  • focusBorder#baaab580
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#a88395
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#a88395
  • input.background#f8f5f6
  • input.border#cebbc4
  • input.foreground#232022
  • input.placeholderForeground#a88395
  • inputOption.activeBorder#baaab5
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#009f3a
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#baaab533
  • list.activeSelectionForeground#232022
  • list.focusBackground#baaab526
  • list.highlightForeground#baaab5
  • list.hoverBackground#baaab51a
  • list.inactiveSelectionBackground#baaab51a
  • minimap.background#f8f5f6
  • minimap.findMatchHighlight#1b2a6b80
  • minimap.selectionHighlight#baaab54d
  • notificationLink.foreground#baaab5
  • notifications.background#f8f5f6
  • notifications.foreground#232022
  • panel.background#f1ebee
  • panel.border#cebbc4
  • panelTitle.activeBorder#baaab5
  • panelTitle.activeForeground#232022
  • panelTitle.inactiveForeground#a88395
  • peekView.border#baaab5
  • peekViewEditor.background#f1ebee
  • peekViewResult.background#eae1e5
  • peekViewTitle.background#f1ebee
  • progressBar.background#baaab5
  • scrollbar.shadow#17151714
  • scrollbarSlider.activeBackground#2320224d
  • scrollbarSlider.background#2320221a
  • scrollbarSlider.hoverBackground#23202233
  • selection.background#baaab533
  • sideBar.background#f1ebee
  • sideBar.border#cebbc4
  • sideBar.foreground#232022
  • sideBarSectionHeader.background#baaab51a
  • sideBarSectionHeader.foreground#232022
  • sideBarTitle.foreground#232022
  • statusBar.background#baaab5
  • statusBar.border#cebbc4
  • statusBar.debuggingBackground#009f3a
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#232022
  • statusBar.noFolderBackground#eae1e5
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#9e919a
  • statusBarItem.remoteForeground#232022
  • tab.activeBackground#f8f5f6
  • tab.activeBorder#baaab5
  • tab.activeBorderTop#baaab500
  • tab.activeForeground#232022
  • tab.border#cebbc4
  • tab.inactiveBackground#f1ebee
  • tab.inactiveForeground#a88395
  • terminal.ansiBlack#232022
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#a88395
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f8f5f6
  • terminal.ansiYellow#d4a017
  • terminal.background#f1ebee
  • terminal.foreground#232022
  • terminalCursor.foreground#baaab5
  • textLink.activeForeground#008e33
  • textLink.foreground#009f3a
  • titleBar.activeBackground#f1ebee
  • titleBar.activeForeground#232022
  • titleBar.border#cebbc4
  • titleBar.inactiveBackground#f1ebee
  • titleBar.inactiveForeground#a88395

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a88395italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#786d74bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#786d74bold
storage.type, storage.modifier#786d74bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#007f2e
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#786d74
string.regexp#007f2e
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#1b2a6b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#4c2a2bbold
variable.other.constant, variable.other.enummember#4c2a2bbold
constant.character.escape#6f666d
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#8c3359italic
entity.name.type.parameter#8c3359italic
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#232022
variable.parameter#232022italic
variable.language, variable.language.this, variable.language.self, variable.language.super#786d74italic
variable.other.property, variable.other.object.property, meta.object-literal.key#232022
entity.name.class, entity.name.type.class, support.class#79674cbold italic
entity.other.inherited-class#79674citalic
entity.name.tag, punctuation.definition.tag#786d74bold
entity.other.attribute-name#5a6f73italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#6f666d
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a88395
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#8c3359italic
support.type.property-name.css, support.type.vendored.property-name.css#8c3359
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#79674cbold
support.constant.property-value.css, support.constant.color.css#4c2a2b
keyword.other.unit.css#1b2a6b
support.type.property-name.json#8c3359
markup.heading, markup.heading entity.name, entity.name.section.markdown#786d74bold
markup.bold#4c2a2bbold
markup.italic#8c3359italic
markup.inline.raw, markup.raw#007f2e
markup.underline.link#5a6f73
markup.quote#a88395italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050