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#e7dee2
  • activityBar.border#c2acb6
  • activityBar.foreground#5e2b4e
  • activityBar.inactiveForeground#713f59
  • activityBarBadge.background#009f3a
  • activityBarBadge.foreground#f5f1f2
  • badge.background#5e2b4e
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#150911
  • breadcrumb.focusForeground#150911
  • breadcrumb.foreground#713f59
  • button.background#5e2b4e
  • button.foreground#f5f1f2
  • button.hoverBackground#552746
  • button.secondaryBackground#e7dee2
  • button.secondaryForeground#150911
  • descriptionForeground#713f59
  • dropdown.background#f7f4f5
  • dropdown.border#c2acb6
  • dropdown.foreground#150911
  • editor.background#f7f4f5
  • editor.findMatchBackground#1b2a6b59
  • editor.findMatchHighlightBackground#1b2a6b26
  • editor.foreground#150911
  • editor.inactiveSelectionBackground#5e2b4e1a
  • editor.lineHighlightBackground#5e2b4e14
  • editor.lineHighlightBorder#5e2b4e00
  • editor.selectionBackground#5e2b4e33
  • editor.wordHighlightBackground#5e2b4e26
  • editorBracketMatch.background#5e2b4e33
  • editorBracketMatch.border#5e2b4e80
  • editorCursor.foreground#5e2b4e
  • editorError.foreground#bf1932
  • editorGroup.border#c2acb6
  • editorGroupHeader.tabsBackground#efe9ec
  • editorGroupHeader.tabsBorder#c2acb6
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1509112e
  • editorIndentGuide.background#15091114
  • editorInfo.foreground#009f3a
  • editorLineNumber.activeForeground#150911
  • editorLineNumber.foreground#713f59
  • editorRuler.foreground#15091114
  • editorSuggestWidget.selectedBackground#5e2b4e26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1509111a
  • editorWidget.background#f7f4f5
  • editorWidget.border#c2acb6
  • focusBorder#5e2b4e80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#713f59
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#713f59
  • input.background#f7f4f5
  • input.border#c2acb6
  • input.foreground#150911
  • input.placeholderForeground#713f59
  • inputOption.activeBorder#5e2b4e
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#009f3a
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#5e2b4e33
  • list.activeSelectionForeground#150911
  • list.focusBackground#5e2b4e26
  • list.highlightForeground#5e2b4e
  • list.hoverBackground#5e2b4e1a
  • list.inactiveSelectionBackground#5e2b4e1a
  • minimap.background#f7f4f5
  • minimap.findMatchHighlight#1b2a6b80
  • minimap.selectionHighlight#5e2b4e4d
  • notificationLink.foreground#5e2b4e
  • notifications.background#f7f4f5
  • notifications.foreground#150911
  • panel.background#efe9ec
  • panel.border#c2acb6
  • panelTitle.activeBorder#5e2b4e
  • panelTitle.activeForeground#150911
  • panelTitle.inactiveForeground#713f59
  • peekView.border#5e2b4e
  • peekViewEditor.background#efe9ec
  • peekViewResult.background#e7dee2
  • peekViewTitle.background#efe9ec
  • progressBar.background#5e2b4e
  • scrollbar.shadow#09040814
  • scrollbarSlider.activeBackground#1509114d
  • scrollbarSlider.background#1509111a
  • scrollbarSlider.hoverBackground#15091133
  • selection.background#5e2b4e33
  • sideBar.background#efe9ec
  • sideBar.border#c2acb6
  • sideBar.foreground#150911
  • sideBarSectionHeader.background#5e2b4e1a
  • sideBarSectionHeader.foreground#150911
  • sideBarTitle.foreground#150911
  • statusBar.background#5e2b4e
  • statusBar.border#c2acb6
  • statusBar.debuggingBackground#009f3a
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e7dee2
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#502542
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f7f4f5
  • tab.activeBorder#5e2b4e
  • tab.activeBorderTop#5e2b4e00
  • tab.activeForeground#150911
  • tab.border#c2acb6
  • tab.inactiveBackground#efe9ec
  • tab.inactiveForeground#713f59
  • terminal.ansiBlack#150911
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#713f59
  • 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#f7f4f5
  • terminal.ansiYellow#d4a017
  • terminal.background#efe9ec
  • terminal.foreground#150911
  • terminalCursor.foreground#5e2b4e
  • textLink.activeForeground#008e33
  • textLink.foreground#009f3a
  • titleBar.activeBackground#efe9ec
  • titleBar.activeForeground#150911
  • titleBar.border#c2acb6
  • titleBar.inactiveBackground#efe9ec
  • titleBar.inactiveForeground#713f59

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#713f59italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#5e2b4ebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#5e2b4ebold
storage.type, storage.modifier#5e2b4ebold
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#5e2b4e
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#5c068cbold
variable.other.constant, variable.other.enummember#5c068cbold
constant.character.escape#764b69
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#7f6666bold
meta.function-call entity.name.function, support.function#7f6666
meta.method-call entity.name.function, entity.name.function.member#7f6666
variable, variable.other, variable.other.readwrite#150911
variable.parameter#150911italic
variable.language, variable.language.this, variable.language.self, variable.language.super#5e2b4eitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#150911
entity.name.class, entity.name.type.class, support.class#79674cbold italic
entity.other.inherited-class#79674citalic
entity.name.tag, punctuation.definition.tag#5e2b4ebold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#764b69
punctuation, punctuation.separator, punctuation.terminator, meta.brace#713f59
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#5c068c
keyword.other.unit.css#1b2a6b
support.type.property-name.json#8c3359
markup.heading, markup.heading entity.name, entity.name.section.markdown#5e2b4ebold
markup.bold#5c068cbold
markup.italic#8c3359italic
markup.inline.raw, markup.raw#007f2e
markup.underline.link#7f6666
markup.quote#713f59italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050