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#f9f3f1
  • activityBar.border#efdbd5
  • activityBar.foreground#ce3732
  • activityBar.inactiveForeground#d89186
  • activityBarBadge.background#4b9e9d
  • activityBarBadge.foreground#fcfbfa
  • badge.background#ce3732
  • badge.foreground#fcfbfa
  • breadcrumb.activeSelectionForeground#1f0808
  • breadcrumb.focusForeground#1f0808
  • breadcrumb.foreground#d89186
  • button.background#ce3732
  • button.foreground#fcfbfa
  • button.hoverBackground#b9322d
  • button.secondaryBackground#f9f3f1
  • button.secondaryForeground#1f0808
  • descriptionForeground#d89186
  • dropdown.background#fdfbfa
  • dropdown.border#efdbd5
  • dropdown.foreground#1f0808
  • editor.background#fdfbfa
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#1f0808
  • editor.inactiveSelectionBackground#ce37321a
  • editor.lineHighlightBackground#ce373214
  • editor.lineHighlightBorder#ce373200
  • editor.selectionBackground#ce373233
  • editor.wordHighlightBackground#ce373226
  • editorBracketMatch.background#ce373233
  • editorBracketMatch.border#ce373280
  • editorCursor.foreground#ce3732
  • editorError.foreground#bf1932
  • editorGroup.border#efdbd5
  • editorGroupHeader.tabsBackground#fbf7f6
  • editorGroupHeader.tabsBorder#efdbd5
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1f08082e
  • editorIndentGuide.background#1f080814
  • editorInfo.foreground#4b9e9d
  • editorLineNumber.activeForeground#1f0808
  • editorLineNumber.foreground#d89186
  • editorRuler.foreground#1f080814
  • editorSuggestWidget.selectedBackground#ce373226
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1f08081a
  • editorWidget.background#fdfbfa
  • editorWidget.border#efdbd5
  • focusBorder#ce373280
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#d89186
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#d89186
  • input.background#fdfbfa
  • input.border#efdbd5
  • input.foreground#1f0808
  • input.placeholderForeground#d89186
  • inputOption.activeBorder#ce3732
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#4b9e9d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#ce373233
  • list.activeSelectionForeground#1f0808
  • list.focusBackground#ce373226
  • list.highlightForeground#ce3732
  • list.hoverBackground#ce37321a
  • list.inactiveSelectionBackground#ce37321a
  • minimap.background#fdfbfa
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#ce37324d
  • notificationLink.foreground#ce3732
  • notifications.background#fdfbfa
  • notifications.foreground#1f0808
  • panel.background#fbf7f6
  • panel.border#efdbd5
  • panelTitle.activeBorder#ce3732
  • panelTitle.activeForeground#1f0808
  • panelTitle.inactiveForeground#d89186
  • peekView.border#ce3732
  • peekViewEditor.background#fbf7f6
  • peekViewResult.background#f9f3f1
  • peekViewTitle.background#fbf7f6
  • progressBar.background#ce3732
  • scrollbar.shadow#15050514
  • scrollbarSlider.activeBackground#1f08084d
  • scrollbarSlider.background#1f08081a
  • scrollbarSlider.hoverBackground#1f080833
  • selection.background#ce373233
  • sideBar.background#fbf7f6
  • sideBar.border#efdbd5
  • sideBar.foreground#1f0808
  • sideBarSectionHeader.background#ce37321a
  • sideBarSectionHeader.foreground#1f0808
  • sideBarTitle.foreground#1f0808
  • statusBar.background#ce3732
  • statusBar.border#efdbd5
  • statusBar.debuggingBackground#4b9e9d
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#fcfbfa
  • statusBar.noFolderBackground#f9f3f1
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#af2f2b
  • statusBarItem.remoteForeground#fcfbfa
  • tab.activeBackground#fdfbfa
  • tab.activeBorder#ce3732
  • tab.activeBorderTop#ce373200
  • tab.activeForeground#1f0808
  • tab.border#efdbd5
  • tab.inactiveBackground#fbf7f6
  • tab.inactiveForeground#d89186
  • terminal.ansiBlack#1f0808
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#d89186
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#fdfbfa
  • terminal.ansiYellow#d4a017
  • terminal.background#fbf7f6
  • terminal.foreground#1f0808
  • terminalCursor.foreground#ce3732
  • textLink.activeForeground#428d8b
  • textLink.foreground#4b9e9d
  • titleBar.activeBackground#fbf7f6
  • titleBar.activeForeground#1f0808
  • titleBar.border#efdbd5
  • titleBar.inactiveBackground#fbf7f6
  • titleBar.inactiveForeground#d89186

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#d89186italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ce3732bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ce3732bold
storage.type, storage.modifier#ce3732bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#3b7e7c
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ce3732
string.regexp#3b7e7c
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5c068c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#846c2dbold
variable.other.constant, variable.other.enummember#846c2dbold
constant.character.escape#b44845
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#7c1c32italic
entity.name.type.parameter#7c1c32italic
entity.name.function, meta.function entity.name.function#786d74bold
meta.function-call entity.name.function, support.function#786d74
meta.method-call entity.name.function, entity.name.function.member#786d74
variable, variable.other, variable.other.readwrite#1f0808
variable.parameter#1f0808italic
variable.language, variable.language.this, variable.language.self, variable.language.super#ce3732italic
variable.other.property, variable.other.object.property, meta.object-literal.key#1f0808
entity.name.class, entity.name.type.class, support.class#5a7431bold italic
entity.other.inherited-class#5a7431italic
entity.name.tag, punctuation.definition.tag#ce3732bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#b44845
punctuation, punctuation.separator, punctuation.terminator, meta.brace#d89186
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#7c1c32italic
support.type.property-name.css, support.type.vendored.property-name.css#7c1c32
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5a7431bold
support.constant.property-value.css, support.constant.color.css#846c2d
keyword.other.unit.css#5c068c
support.type.property-name.json#7c1c32
markup.heading, markup.heading entity.name, entity.name.section.markdown#ce3732bold
markup.bold#846c2dbold
markup.italic#7c1c32italic
markup.inline.raw, markup.raw#3b7e7c
markup.underline.link#786d74
markup.quote#d89186italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050