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#eae1e4
  • activityBar.border#d0b8c1
  • activityBar.foreground#c491a0
  • activityBar.inactiveForeground#ae778a
  • activityBarBadge.background#79bbac
  • activityBarBadge.foreground#f5f1f2
  • badge.background#c491a0
  • badge.foreground#251b1e
  • breadcrumb.activeSelectionForeground#251b1e
  • breadcrumb.focusForeground#251b1e
  • breadcrumb.foreground#ae778a
  • button.background#c491a0
  • button.foreground#251b1e
  • button.hoverBackground#b08390
  • button.secondaryBackground#eae1e4
  • button.secondaryForeground#251b1e
  • descriptionForeground#ae778a
  • dropdown.background#f8f5f6
  • dropdown.border#d0b8c1
  • dropdown.foreground#251b1e
  • editor.background#f8f5f6
  • editor.findMatchBackground#5f4b8b59
  • editor.findMatchHighlightBackground#5f4b8b26
  • editor.foreground#251b1e
  • editor.inactiveSelectionBackground#c491a01a
  • editor.lineHighlightBackground#c491a014
  • editor.lineHighlightBorder#c491a000
  • editor.selectionBackground#c491a033
  • editor.wordHighlightBackground#c491a026
  • editorBracketMatch.background#c491a033
  • editorBracketMatch.border#c491a080
  • editorCursor.foreground#c491a0
  • editorError.foreground#bf1932
  • editorGroup.border#d0b8c1
  • editorGroupHeader.tabsBackground#f1ebed
  • editorGroupHeader.tabsBorder#d0b8c1
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#251b1e2e
  • editorIndentGuide.background#251b1e14
  • editorInfo.foreground#79bbac
  • editorLineNumber.activeForeground#251b1e
  • editorLineNumber.foreground#ae778a
  • editorRuler.foreground#251b1e14
  • editorSuggestWidget.selectedBackground#c491a026
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#251b1e1a
  • editorWidget.background#f8f5f6
  • editorWidget.border#d0b8c1
  • focusBorder#c491a080
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#ae778a
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#ae778a
  • input.background#f8f5f6
  • input.border#d0b8c1
  • input.foreground#251b1e
  • input.placeholderForeground#ae778a
  • inputOption.activeBorder#c491a0
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#79bbac
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#c491a033
  • list.activeSelectionForeground#251b1e
  • list.focusBackground#c491a026
  • list.highlightForeground#c491a0
  • list.hoverBackground#c491a01a
  • list.inactiveSelectionBackground#c491a01a
  • minimap.background#f8f5f6
  • minimap.findMatchHighlight#5f4b8b80
  • minimap.selectionHighlight#c491a04d
  • notificationLink.foreground#c491a0
  • notifications.background#f8f5f6
  • notifications.foreground#251b1e
  • panel.background#f1ebed
  • panel.border#d0b8c1
  • panelTitle.activeBorder#c491a0
  • panelTitle.activeForeground#251b1e
  • panelTitle.inactiveForeground#ae778a
  • peekView.border#c491a0
  • peekViewEditor.background#f1ebed
  • peekViewResult.background#eae1e4
  • peekViewTitle.background#f1ebed
  • progressBar.background#c491a0
  • scrollbar.shadow#18121414
  • scrollbarSlider.activeBackground#251b1e4d
  • scrollbarSlider.background#251b1e1a
  • scrollbarSlider.hoverBackground#251b1e33
  • selection.background#c491a033
  • sideBar.background#f1ebed
  • sideBar.border#d0b8c1
  • sideBar.foreground#251b1e
  • sideBarSectionHeader.background#c491a01a
  • sideBarSectionHeader.foreground#251b1e
  • sideBarTitle.foreground#251b1e
  • statusBar.background#c491a0
  • statusBar.border#d0b8c1
  • statusBar.debuggingBackground#79bbac
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#251b1e
  • statusBar.noFolderBackground#eae1e4
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#a77b88
  • statusBarItem.remoteForeground#251b1e
  • tab.activeBackground#f8f5f6
  • tab.activeBorder#c491a0
  • tab.activeBorderTop#c491a000
  • tab.activeForeground#251b1e
  • tab.border#d0b8c1
  • tab.inactiveBackground#f1ebed
  • tab.inactiveForeground#ae778a
  • terminal.ansiBlack#251b1e
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#ae778a
  • 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#f1ebed
  • terminal.foreground#251b1e
  • terminalCursor.foreground#c491a0
  • textLink.activeForeground#6ba699
  • textLink.foreground#79bbac
  • titleBar.activeBackground#f1ebed
  • titleBar.activeForeground#251b1e
  • titleBar.border#d0b8c1
  • titleBar.inactiveBackground#f1ebed
  • titleBar.inactiveForeground#ae778a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#ae778aitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#88666fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#88666fbold
storage.type, storage.modifier#88666fbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#4b746b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#88666f
string.regexp#4b746b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5f4b8b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#946243bold
variable.other.constant, variable.other.enummember#946243bold
constant.character.escape#7f636b
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#4c2a2bitalic
entity.name.type.parameter#4c2a2bitalic
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#251b1e
variable.parameter#251b1eitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#88666fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#251b1e
entity.name.class, entity.name.type.class, support.class#666f00bold italic
entity.other.inherited-class#666f00italic
entity.name.tag, punctuation.definition.tag#88666fbold
entity.other.attribute-name#5a6f73italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#7f636b
punctuation, punctuation.separator, punctuation.terminator, meta.brace#ae778a
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#4c2a2bitalic
support.type.property-name.css, support.type.vendored.property-name.css#4c2a2b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#666f00bold
support.constant.property-value.css, support.constant.color.css#946243
keyword.other.unit.css#5f4b8b
support.type.property-name.json#4c2a2b
markup.heading, markup.heading entity.name, entity.name.section.markdown#88666fbold
markup.bold#946243bold
markup.italic#4c2a2bitalic
markup.inline.raw, markup.raw#4b746b
markup.underline.link#5a6f73
markup.quote#ae778aitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050