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#eae7e1
  • activityBar.border#cec7b6
  • activityBar.foreground#a1947b
  • activityBar.inactiveForeground#a0906c
  • activityBarBadge.background#8397bc
  • activityBarBadge.foreground#f5f4f1
  • badge.background#a1947b
  • badge.foreground#1e1c17
  • breadcrumb.activeSelectionForeground#1e1c17
  • breadcrumb.focusForeground#1e1c17
  • breadcrumb.foreground#a0906c
  • button.background#a1947b
  • button.foreground#1e1c17
  • button.hoverBackground#91856f
  • button.secondaryBackground#eae7e1
  • button.secondaryForeground#1e1c17
  • descriptionForeground#a0906c
  • dropdown.background#f8f7f5
  • dropdown.border#cec7b6
  • dropdown.foreground#1e1c17
  • editor.background#f8f7f5
  • editor.findMatchBackground#9e4fa559
  • editor.findMatchHighlightBackground#9e4fa526
  • editor.foreground#1e1c17
  • editor.inactiveSelectionBackground#a1947b1a
  • editor.lineHighlightBackground#a1947b14
  • editor.lineHighlightBorder#a1947b00
  • editor.selectionBackground#a1947b33
  • editor.wordHighlightBackground#a1947b26
  • editorBracketMatch.background#a1947b33
  • editorBracketMatch.border#a1947b80
  • editorCursor.foreground#a1947b
  • editorError.foreground#bf1932
  • editorGroup.border#cec7b6
  • editorGroupHeader.tabsBackground#f1efeb
  • editorGroupHeader.tabsBorder#cec7b6
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1e1c172e
  • editorIndentGuide.background#1e1c1714
  • editorInfo.foreground#8397bc
  • editorLineNumber.activeForeground#1e1c17
  • editorLineNumber.foreground#a0906c
  • editorRuler.foreground#1e1c1714
  • editorSuggestWidget.selectedBackground#a1947b26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1e1c171a
  • editorWidget.background#f8f7f5
  • editorWidget.border#cec7b6
  • focusBorder#a1947b80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#a0906c
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#a0906c
  • input.background#f8f7f5
  • input.border#cec7b6
  • input.foreground#1e1c17
  • input.placeholderForeground#a0906c
  • inputOption.activeBorder#a1947b
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#8397bc
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#a1947b33
  • list.activeSelectionForeground#1e1c17
  • list.focusBackground#a1947b26
  • list.highlightForeground#a1947b
  • list.hoverBackground#a1947b1a
  • list.inactiveSelectionBackground#a1947b1a
  • minimap.background#f8f7f5
  • minimap.findMatchHighlight#9e4fa580
  • minimap.selectionHighlight#a1947b4d
  • notificationLink.foreground#a1947b
  • notifications.background#f8f7f5
  • notifications.foreground#1e1c17
  • panel.background#f1efeb
  • panel.border#cec7b6
  • panelTitle.activeBorder#a1947b
  • panelTitle.activeForeground#1e1c17
  • panelTitle.inactiveForeground#a0906c
  • peekView.border#a1947b
  • peekViewEditor.background#f1efeb
  • peekViewResult.background#eae7e1
  • peekViewTitle.background#f1efeb
  • progressBar.background#a1947b
  • scrollbar.shadow#14120f14
  • scrollbarSlider.activeBackground#1e1c174d
  • scrollbarSlider.background#1e1c171a
  • scrollbarSlider.hoverBackground#1e1c1733
  • selection.background#a1947b33
  • sideBar.background#f1efeb
  • sideBar.border#cec7b6
  • sideBar.foreground#1e1c17
  • sideBarSectionHeader.background#a1947b1a
  • sideBarSectionHeader.foreground#1e1c17
  • sideBarTitle.foreground#1e1c17
  • statusBar.background#a1947b
  • statusBar.border#cec7b6
  • statusBar.debuggingBackground#8397bc
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#1e1c17
  • statusBar.noFolderBackground#eae7e1
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#897e69
  • statusBarItem.remoteForeground#1e1c17
  • tab.activeBackground#f8f7f5
  • tab.activeBorder#a1947b
  • tab.activeBorderTop#a1947b00
  • tab.activeForeground#1e1c17
  • tab.border#cec7b6
  • tab.inactiveBackground#f1efeb
  • tab.inactiveForeground#a0906c
  • terminal.ansiBlack#1e1c17
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#a0906c
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f4f1
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f8f7f5
  • terminal.ansiYellow#d4a017
  • terminal.background#f1efeb
  • terminal.foreground#1e1c17
  • terminalCursor.foreground#a1947b
  • textLink.activeForeground#7586a7
  • textLink.foreground#8397bc
  • titleBar.activeBackground#f1efeb
  • titleBar.activeForeground#1e1c17
  • titleBar.border#cec7b6
  • titleBar.inactiveBackground#f1efeb
  • titleBar.inactiveForeground#a0906c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a0906citalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#796f5ebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#796f5ebold
storage.type, storage.modifier#796f5ebold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#606f8a
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#796f5e
string.regexp#606f8a
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9e4fa5
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#886162bold
variable.other.constant, variable.other.enummember#886162bold
constant.character.escape#756e5e
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#5c3317italic
entity.name.type.parameter#5c3317italic
entity.name.function, meta.function entity.name.function#38793abold
meta.function-call entity.name.function, support.function#38793a
meta.method-call entity.name.function, entity.name.function.member#38793a
variable, variable.other, variable.other.readwrite#1e1c17
variable.parameter#1e1c17italic
variable.language, variable.language.this, variable.language.self, variable.language.super#796f5eitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#1e1c17
entity.name.class, entity.name.type.class, support.class#5e2b4ebold italic
entity.other.inherited-class#5e2b4eitalic
entity.name.tag, punctuation.definition.tag#796f5ebold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#756e5e
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a0906c
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#5c3317italic
support.type.property-name.css, support.type.vendored.property-name.css#5c3317
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5e2b4ebold
support.constant.property-value.css, support.constant.color.css#886162
keyword.other.unit.css#9e4fa5
support.type.property-name.json#5c3317
markup.heading, markup.heading entity.name, entity.name.section.markdown#796f5ebold
markup.bold#886162bold
markup.italic#5c3317italic
markup.inline.raw, markup.raw#606f8a
markup.underline.link#38793a
markup.quote#a0906citalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050