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#2a0e19
  • activityBar.border#441728
  • activityBar.foreground#c74375
  • activityBar.inactiveForeground#944a67
  • activityBarBadge.background#86d0bf
  • activityBarBadge.foreground#f5f1f2
  • badge.background#c74375
  • badge.foreground#1e0a12
  • breadcrumb.activeSelectionForeground#e0cdd4
  • breadcrumb.focusForeground#e0cdd4
  • breadcrumb.foreground#944a67
  • button.background#c74375
  • button.foreground#1e0a12
  • button.hoverBackground#cd5683
  • button.secondaryBackground#34111e
  • button.secondaryForeground#e0cdd4
  • descriptionForeground#944a67
  • dropdown.background#2a0e19
  • dropdown.border#441728
  • dropdown.foreground#e0cdd4
  • editor.background#200b13
  • editor.findMatchBackground#6667ab66
  • editor.findMatchHighlightBackground#6667ab33
  • editor.foreground#e0cdd4
  • editor.inactiveSelectionBackground#c7437526
  • editor.lineHighlightBackground#c743751a
  • editor.lineHighlightBorder#c7437500
  • editor.selectionBackground#c743754d
  • editor.wordHighlightBackground#c7437533
  • editorBracketMatch.background#c7437540
  • editorBracketMatch.border#c7437599
  • editorCursor.foreground#c74375
  • editorError.foreground#dd4132
  • editorGroup.border#441728
  • editorGroupHeader.tabsBackground#2a0e19
  • editorGroupHeader.tabsBorder#441728
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e0cdd433
  • editorIndentGuide.background#e0cdd414
  • editorInfo.foreground#86d0bf
  • editorLineNumber.activeForeground#e0cdd4
  • editorLineNumber.foreground#944a67
  • editorRuler.foreground#e0cdd414
  • editorSuggestWidget.selectedBackground#c7437540
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e0cdd41a
  • editorWidget.background#2a0e19
  • editorWidget.border#441728
  • focusBorder#c7437599
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#944a67
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#944a67
  • input.background#2a0e19
  • input.border#441728
  • input.foreground#e0cdd4
  • input.placeholderForeground#944a67
  • inputOption.activeBorder#c74375
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#86d0bf
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#c743754d
  • list.activeSelectionForeground#e0cdd4
  • list.focusBackground#c7437533
  • list.highlightForeground#c74375
  • list.hoverBackground#c7437526
  • list.inactiveSelectionBackground#c7437526
  • minimap.background#200b13
  • minimap.findMatchHighlight#6667ab99
  • minimap.selectionHighlight#c7437566
  • notificationLink.foreground#c74375
  • notifications.background#34111e
  • notifications.foreground#e0cdd4
  • panel.background#2a0e19
  • panel.border#441728
  • panelTitle.activeBorder#c74375
  • panelTitle.activeForeground#e0cdd4
  • panelTitle.inactiveForeground#944a67
  • peekView.border#c74375
  • peekViewEditor.background#2a0e19
  • peekViewResult.background#34111e
  • peekViewTitle.background#2a0e19
  • progressBar.background#c74375
  • scrollbar.shadow#14070c45
  • scrollbarSlider.activeBackground#e0cdd459
  • scrollbarSlider.background#e0cdd41f
  • scrollbarSlider.hoverBackground#e0cdd440
  • selection.background#c743754d
  • sideBar.background#34111e
  • sideBar.border#441728
  • sideBar.foreground#e0cdd4
  • sideBarSectionHeader.background#c7437526
  • sideBarSectionHeader.foreground#e0cdd4
  • sideBarTitle.foreground#e0cdd4
  • statusBar.background#772846
  • statusBar.border#441728
  • statusBar.debuggingBackground#86d0bf
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#dd8eac
  • statusBar.noFolderBackground#2a0e19
  • statusBarItem.hoverBackground#c743754d
  • statusBarItem.remoteBackground#c74375
  • statusBarItem.remoteForeground#1e0a12
  • tab.activeBackground#200b13
  • tab.activeBorder#c74375
  • tab.activeBorderTop#c7437500
  • tab.activeForeground#e0cdd4
  • tab.border#441728
  • tab.inactiveBackground#2a0e19
  • tab.inactiveForeground#944a67
  • terminal.ansiBlack#200b13
  • terminal.ansiBlue#6b487b
  • terminal.ansiBrightBlack#944a67
  • 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#e0cdd4
  • terminal.ansiYellow#efc050
  • terminal.background#2a0e19
  • terminal.foreground#e0cdd4
  • terminalCursor.foreground#c74375
  • textLink.activeForeground#98d7c9
  • textLink.foreground#86d0bf
  • titleBar.activeBackground#2a0e19
  • titleBar.activeForeground#e0cdd4
  • titleBar.border#441728
  • titleBar.inactiveBackground#2a0e19
  • titleBar.inactiveForeground#944a67

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#944a67italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#cb5280bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#cb5280bold
storage.type, storage.modifier#cb5280bold
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#cb5280
string.regexp#86d0bf
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#7d7eb8
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#ff7b43bold
variable.other.constant, variable.other.enummember#ff7b43bold
constant.character.escape#cf5f8a
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#a96c71italic
entity.name.type.parameter#a96c71italic
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#e0cdd4
variable.parameter#e0cdd4italic
variable.language, variable.language.this, variable.language.self, variable.language.super#cb5280italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e0cdd4
entity.name.class, entity.name.type.class, support.class#e8e835bold italic
entity.other.inherited-class#e8e835italic
entity.name.tag, punctuation.definition.tag#cb5280bold
entity.other.attribute-name#b0d7e1italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#cf5f8a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#944a67
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#a96c71italic
support.type.property-name.css, support.type.vendored.property-name.css#a96c71
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e8e835bold
support.constant.property-value.css, support.constant.color.css#ff7b43
keyword.other.unit.css#7d7eb8
support.type.property-name.json#a96c71
markup.heading, markup.heading entity.name, entity.name.section.markdown#cb5280bold
markup.bold#ff7b43bold
markup.italic#a96c71italic
markup.inline.raw, markup.raw#86d0bf
markup.underline.link#b0d7e1
markup.quote#944a67italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050