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#c5aab4
  • activityBar.foreground#7c1c32
  • activityBar.inactiveForeground#7d394e
  • activityBarBadge.background#79bbac
  • activityBarBadge.foreground#f5f1f2
  • badge.background#7c1c32
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#1b060b
  • breadcrumb.focusForeground#1b060b
  • breadcrumb.foreground#7d394e
  • button.background#7c1c32
  • button.foreground#f5f1f2
  • button.hoverBackground#70192d
  • button.secondaryBackground#e8dee2
  • button.secondaryForeground#1b060b
  • descriptionForeground#7d394e
  • dropdown.background#f7f4f5
  • dropdown.border#c5aab4
  • dropdown.foreground#1b060b
  • editor.background#f7f4f5
  • editor.findMatchBackground#a3af8659
  • editor.findMatchHighlightBackground#a3af8626
  • editor.foreground#1b060b
  • editor.inactiveSelectionBackground#7c1c321a
  • editor.lineHighlightBackground#7c1c3214
  • editor.lineHighlightBorder#7c1c3200
  • editor.selectionBackground#7c1c3233
  • editor.wordHighlightBackground#7c1c3226
  • editorBracketMatch.background#7c1c3233
  • editorBracketMatch.border#7c1c3280
  • editorCursor.foreground#7c1c32
  • editorError.foreground#bf1932
  • editorGroup.border#c5aab4
  • editorGroupHeader.tabsBackground#f0e9eb
  • editorGroupHeader.tabsBorder#c5aab4
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1b060b2e
  • editorIndentGuide.background#1b060b14
  • editorInfo.foreground#79bbac
  • editorLineNumber.activeForeground#1b060b
  • editorLineNumber.foreground#7d394e
  • editorRuler.foreground#1b060b14
  • editorSuggestWidget.selectedBackground#7c1c3226
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1b060b1a
  • editorWidget.background#f7f4f5
  • editorWidget.border#c5aab4
  • focusBorder#7c1c3280
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#7d394e
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#7d394e
  • input.background#f7f4f5
  • input.border#c5aab4
  • input.foreground#1b060b
  • input.placeholderForeground#7d394e
  • inputOption.activeBorder#7c1c32
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#79bbac
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#7c1c3233
  • list.activeSelectionForeground#1b060b
  • list.focusBackground#7c1c3226
  • list.highlightForeground#7c1c32
  • list.hoverBackground#7c1c321a
  • list.inactiveSelectionBackground#7c1c321a
  • minimap.background#f7f4f5
  • minimap.findMatchHighlight#a3af8680
  • minimap.selectionHighlight#7c1c324d
  • notificationLink.foreground#7c1c32
  • notifications.background#f7f4f5
  • notifications.foreground#1b060b
  • panel.background#f0e9eb
  • panel.border#c5aab4
  • panelTitle.activeBorder#7c1c32
  • panelTitle.activeForeground#1b060b
  • panelTitle.inactiveForeground#7d394e
  • peekView.border#7c1c32
  • peekViewEditor.background#f0e9eb
  • peekViewResult.background#e8dee2
  • peekViewTitle.background#f0e9eb
  • progressBar.background#7c1c32
  • scrollbar.shadow#0c030514
  • scrollbarSlider.activeBackground#1b060b4d
  • scrollbarSlider.background#1b060b1a
  • scrollbarSlider.hoverBackground#1b060b33
  • selection.background#7c1c3233
  • sideBar.background#f0e9eb
  • sideBar.border#c5aab4
  • sideBar.foreground#1b060b
  • sideBarSectionHeader.background#7c1c321a
  • sideBarSectionHeader.foreground#1b060b
  • sideBarTitle.foreground#1b060b
  • statusBar.background#7c1c32
  • statusBar.border#c5aab4
  • statusBar.debuggingBackground#79bbac
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e8dee2
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#69182b
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f7f4f5
  • tab.activeBorder#7c1c32
  • tab.activeBorderTop#7c1c3200
  • tab.activeForeground#1b060b
  • tab.border#c5aab4
  • tab.inactiveBackground#f0e9eb
  • tab.inactiveForeground#7d394e
  • terminal.ansiBlack#1b060b
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#7d394e
  • 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#f0e9eb
  • terminal.foreground#1b060b
  • terminalCursor.foreground#7c1c32
  • textLink.activeForeground#6ba699
  • textLink.foreground#79bbac
  • titleBar.activeBackground#f0e9eb
  • titleBar.activeForeground#1b060b
  • titleBar.border#c5aab4
  • titleBar.inactiveBackground#f0e9eb
  • titleBar.inactiveForeground#7d394e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#7d394eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#7c1c32bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#7c1c32bold
storage.type, storage.modifier#7c1c32bold
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#7c1c32
string.regexp#4b746b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#6c7358
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#716962bold
variable.other.constant, variable.other.enummember#716962bold
constant.character.escape#903e51
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#7f6666italic
entity.name.type.parameter#7f6666italic
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#1b060b
variable.parameter#1b060bitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#7c1c32italic
variable.other.property, variable.other.object.property, meta.object-literal.key#1b060b
entity.name.class, entity.name.type.class, support.class#845bbdbold italic
entity.other.inherited-class#845bbditalic
entity.name.tag, punctuation.definition.tag#7c1c32bold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#903e51
punctuation, punctuation.separator, punctuation.terminator, meta.brace#7d394e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#7f6666italic
support.type.property-name.css, support.type.vendored.property-name.css#7f6666
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#845bbdbold
support.constant.property-value.css, support.constant.color.css#716962
keyword.other.unit.css#6c7358
support.type.property-name.json#7f6666
markup.heading, markup.heading entity.name, entity.name.section.markdown#7c1c32bold
markup.bold#716962bold
markup.italic#7f6666italic
markup.inline.raw, markup.raw#4b746b
markup.underline.link#38793a
markup.quote#7d394eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050