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#2a1f22
  • activityBar.border#4a363c
  • activityBar.foreground#f5b5c8
  • activityBar.inactiveForeground#a26c80
  • activityBarBadge.background#86d0bf
  • activityBarBadge.foreground#f5f1f2
  • badge.background#f5b5c8
  • badge.foreground#251b1e
  • breadcrumb.activeSelectionForeground#e3d4da
  • breadcrumb.focusForeground#e3d4da
  • breadcrumb.foreground#a26c80
  • button.background#f5b5c8
  • button.foreground#251b1e
  • button.hoverBackground#f6bcce
  • button.secondaryBackground#36282c
  • button.secondaryForeground#e3d4da
  • descriptionForeground#a26c80
  • dropdown.background#2a1f22
  • dropdown.border#4a363c
  • dropdown.foreground#e3d4da
  • editor.background#1d1618
  • editor.findMatchBackground#5f4b8b66
  • editor.findMatchHighlightBackground#5f4b8b33
  • editor.foreground#e3d4da
  • editor.inactiveSelectionBackground#f5b5c826
  • editor.lineHighlightBackground#f5b5c81a
  • editor.lineHighlightBorder#f5b5c800
  • editor.selectionBackground#f5b5c84d
  • editor.wordHighlightBackground#f5b5c833
  • editorBracketMatch.background#f5b5c840
  • editorBracketMatch.border#f5b5c899
  • editorCursor.foreground#f5b5c8
  • editorError.foreground#dd4132
  • editorGroup.border#4a363c
  • editorGroupHeader.tabsBackground#2a1f22
  • editorGroupHeader.tabsBorder#4a363c
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e3d4da33
  • editorIndentGuide.background#e3d4da14
  • editorInfo.foreground#86d0bf
  • editorLineNumber.activeForeground#e3d4da
  • editorLineNumber.foreground#a26c80
  • editorRuler.foreground#e3d4da14
  • editorSuggestWidget.selectedBackground#f5b5c840
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e3d4da1a
  • editorWidget.background#2a1f22
  • editorWidget.border#4a363c
  • focusBorder#f5b5c899
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#a26c80
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#a26c80
  • input.background#2a1f22
  • input.border#4a363c
  • input.foreground#e3d4da
  • input.placeholderForeground#a26c80
  • inputOption.activeBorder#f5b5c8
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#86d0bf
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#f5b5c84d
  • list.activeSelectionForeground#e3d4da
  • list.focusBackground#f5b5c833
  • list.highlightForeground#f5b5c8
  • list.hoverBackground#f5b5c826
  • list.inactiveSelectionBackground#f5b5c826
  • minimap.background#1d1618
  • minimap.findMatchHighlight#5f4b8b99
  • minimap.selectionHighlight#f5b5c866
  • notificationLink.foreground#f5b5c8
  • notifications.background#36282c
  • notifications.foreground#e3d4da
  • panel.background#2a1f22
  • panel.border#4a363c
  • panelTitle.activeBorder#f5b5c8
  • panelTitle.activeForeground#e3d4da
  • panelTitle.inactiveForeground#a26c80
  • peekView.border#f5b5c8
  • peekViewEditor.background#2a1f22
  • peekViewResult.background#36282c
  • peekViewTitle.background#2a1f22
  • progressBar.background#f5b5c8
  • scrollbar.shadow#18121445
  • scrollbarSlider.activeBackground#e3d4da59
  • scrollbarSlider.background#e3d4da1f
  • scrollbarSlider.hoverBackground#e3d4da40
  • selection.background#f5b5c84d
  • sideBar.background#36282c
  • sideBar.border#4a363c
  • sideBar.foreground#e3d4da
  • sideBarSectionHeader.background#f5b5c826
  • sideBarSectionHeader.foreground#e3d4da
  • sideBarTitle.foreground#e3d4da
  • statusBar.background#936d78
  • statusBar.border#4a363c
  • statusBar.debuggingBackground#86d0bf
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f9d3de
  • statusBar.noFolderBackground#2a1f22
  • statusBarItem.hoverBackground#f5b5c84d
  • statusBarItem.remoteBackground#f5b5c8
  • statusBarItem.remoteForeground#251b1e
  • tab.activeBackground#1d1618
  • tab.activeBorder#f5b5c8
  • tab.activeBorderTop#f5b5c800
  • tab.activeForeground#e3d4da
  • tab.border#4a363c
  • tab.inactiveBackground#2a1f22
  • tab.inactiveForeground#a26c80
  • terminal.ansiBlack#1d1618
  • terminal.ansiBlue#8281a5
  • terminal.ansiBrightBlack#a26c80
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#e3d4da
  • terminal.ansiYellow#efc050
  • terminal.background#2a1f22
  • terminal.foreground#e3d4da
  • terminalCursor.foreground#f5b5c8
  • textLink.activeForeground#98d7c9
  • textLink.foreground#86d0bf
  • titleBar.activeBackground#2a1f22
  • titleBar.activeForeground#e3d4da
  • titleBar.border#4a363c
  • titleBar.inactiveBackground#2a1f22
  • titleBar.inactiveForeground#a26c80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a26c80italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#f5b5c8bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#f5b5c8bold
storage.type, storage.modifier#f5b5c8bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#86d0bf
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#f5b5c8
string.regexp#86d0bf
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#8d7dac
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#f5a26fbold
variable.other.constant, variable.other.enummember#f5a26fbold
constant.character.escape#f7c0d0
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#927d7eitalic
entity.name.type.parameter#927d7eitalic
entity.name.function, meta.function entity.name.function#b0d7e1bold
meta.function-call entity.name.function, support.function#b0d7e1
meta.method-call entity.name.function, entity.name.function.member#b0d7e1
variable, variable.other, variable.other.readwrite#e3d4da
variable.parameter#e3d4daitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#f5b5c8italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e3d4da
entity.name.class, entity.name.type.class, support.class#c8d800bold italic
entity.other.inherited-class#c8d800italic
entity.name.tag, punctuation.definition.tag#f5b5c8bold
entity.other.attribute-name#b0d7e1italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#f7c0d0
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a26c80
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#927d7eitalic
support.type.property-name.css, support.type.vendored.property-name.css#927d7e
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c8d800bold
support.constant.property-value.css, support.constant.color.css#f5a26f
keyword.other.unit.css#8d7dac
support.type.property-name.json#927d7e
markup.heading, markup.heading entity.name, entity.name.section.markdown#f5b5c8bold
markup.bold#f5a26fbold
markup.italic#927d7eitalic
markup.inline.raw, markup.raw#86d0bf
markup.underline.link#b0d7e1
markup.quote#a26c80italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050