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#e8dee2
  • activityBar.border#c6adb7
  • activityBar.foreground#8c3359
  • activityBar.inactiveForeground#84435e
  • activityBarBadge.background#79bbac
  • activityBarBadge.foreground#f5f1f2
  • badge.background#8c3359
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#1f0b14
  • breadcrumb.focusForeground#1f0b14
  • breadcrumb.foreground#84435e
  • button.background#8c3359
  • button.foreground#f5f1f2
  • button.hoverBackground#7e2e50
  • button.secondaryBackground#e8dee2
  • button.secondaryForeground#1f0b14
  • descriptionForeground#84435e
  • dropdown.background#f7f4f5
  • dropdown.border#c6adb7
  • dropdown.foreground#1f0b14
  • editor.background#f7f4f5
  • editor.findMatchBackground#6667ab59
  • editor.findMatchHighlightBackground#6667ab26
  • editor.foreground#1f0b14
  • editor.inactiveSelectionBackground#8c33591a
  • editor.lineHighlightBackground#8c335914
  • editor.lineHighlightBorder#8c335900
  • editor.selectionBackground#8c335933
  • editor.wordHighlightBackground#8c335926
  • editorBracketMatch.background#8c335933
  • editorBracketMatch.border#8c335980
  • editorCursor.foreground#8c3359
  • editorError.foreground#bf1932
  • editorGroup.border#c6adb7
  • editorGroupHeader.tabsBackground#f0e9ec
  • editorGroupHeader.tabsBorder#c6adb7
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1f0b142e
  • editorIndentGuide.background#1f0b1414
  • editorInfo.foreground#79bbac
  • editorLineNumber.activeForeground#1f0b14
  • editorLineNumber.foreground#84435e
  • editorRuler.foreground#1f0b1414
  • editorSuggestWidget.selectedBackground#8c335926
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1f0b141a
  • editorWidget.background#f7f4f5
  • editorWidget.border#c6adb7
  • focusBorder#8c335980
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#84435e
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#84435e
  • input.background#f7f4f5
  • input.border#c6adb7
  • input.foreground#1f0b14
  • input.placeholderForeground#84435e
  • inputOption.activeBorder#8c3359
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#79bbac
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#8c335933
  • list.activeSelectionForeground#1f0b14
  • list.focusBackground#8c335926
  • list.highlightForeground#8c3359
  • list.hoverBackground#8c33591a
  • list.inactiveSelectionBackground#8c33591a
  • minimap.background#f7f4f5
  • minimap.findMatchHighlight#6667ab80
  • minimap.selectionHighlight#8c33594d
  • notificationLink.foreground#8c3359
  • notifications.background#f7f4f5
  • notifications.foreground#1f0b14
  • panel.background#f0e9ec
  • panel.border#c6adb7
  • panelTitle.activeBorder#8c3359
  • panelTitle.activeForeground#1f0b14
  • panelTitle.inactiveForeground#84435e
  • peekView.border#8c3359
  • peekViewEditor.background#f0e9ec
  • peekViewResult.background#e8dee2
  • peekViewTitle.background#f0e9ec
  • progressBar.background#8c3359
  • scrollbar.shadow#0e050914
  • scrollbarSlider.activeBackground#1f0b144d
  • scrollbarSlider.background#1f0b141a
  • scrollbarSlider.hoverBackground#1f0b1433
  • selection.background#8c335933
  • sideBar.background#f0e9ec
  • sideBar.border#c6adb7
  • sideBar.foreground#1f0b14
  • sideBarSectionHeader.background#8c33591a
  • sideBarSectionHeader.foreground#1f0b14
  • sideBarTitle.foreground#1f0b14
  • statusBar.background#8c3359
  • statusBar.border#c6adb7
  • statusBar.debuggingBackground#79bbac
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e8dee2
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#772b4c
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f7f4f5
  • tab.activeBorder#8c3359
  • tab.activeBorderTop#8c335900
  • tab.activeForeground#1f0b14
  • tab.border#c6adb7
  • tab.inactiveBackground#f0e9ec
  • tab.inactiveForeground#84435e
  • terminal.ansiBlack#1f0b14
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#84435e
  • 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#f0e9ec
  • terminal.foreground#1f0b14
  • terminalCursor.foreground#8c3359
  • textLink.activeForeground#6ba699
  • textLink.foreground#79bbac
  • titleBar.activeBackground#f0e9ec
  • titleBar.activeForeground#1f0b14
  • titleBar.border#c6adb7
  • titleBar.inactiveBackground#f0e9ec
  • titleBar.inactiveForeground#84435e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#84435eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#8c3359bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#8c3359bold
storage.type, storage.modifier#8c3359bold
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#8c3359
string.regexp#4b746b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#6667ab
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#a8512cbold
variable.other.constant, variable.other.enummember#a8512cbold
constant.character.escape#9d5272
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#9e1b32italic
entity.name.type.parameter#9e1b32italic
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#1f0b14
variable.parameter#1f0b14italic
variable.language, variable.language.this, variable.language.self, variable.language.super#8c3359italic
variable.other.property, variable.other.object.property, meta.object-literal.key#1f0b14
entity.name.class, entity.name.type.class, support.class#6e6e19bold italic
entity.other.inherited-class#6e6e19italic
entity.name.tag, punctuation.definition.tag#8c3359bold
entity.other.attribute-name#5a6f73italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#9d5272
punctuation, punctuation.separator, punctuation.terminator, meta.brace#84435e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#9e1b32italic
support.type.property-name.css, support.type.vendored.property-name.css#9e1b32
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6e6e19bold
support.constant.property-value.css, support.constant.color.css#a8512c
keyword.other.unit.css#6667ab
support.type.property-name.json#9e1b32
markup.heading, markup.heading entity.name, entity.name.section.markdown#8c3359bold
markup.bold#a8512cbold
markup.italic#9e1b32italic
markup.inline.raw, markup.raw#4b746b
markup.underline.link#5a6f73
markup.quote#84435eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050