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#d54761
  • activityBar.border#d54761
  • activityBar.foreground#faf9f6
  • activityBar.inactiveForeground#faf9f6
  • activityBarBadge.background#faf9f6
  • activityBarBadge.foreground#b53c52
  • badge.background#faf9f6
  • breadcrumb.activeSelectionForeground#faf9f6
  • breadcrumb.background#f4798d
  • breadcrumb.focusForeground#faf9f6
  • breadcrumb.foreground#faf9f6
  • button.background#e96077
  • button.border#e96077
  • button.foreground#faf9f6
  • button.hoverBackground#d44b62
  • descriptionForeground#faf9f6
  • disabledForeground#616161b3
  • dropdown.background#faf9f6
  • dropdown.border#e96077
  • dropdown.foreground#212121
  • dropdown.listBackground#faf9f6
  • editor.background#faf9f6
  • editor.findMatchBackground#ffb3c1
  • editor.foreground#212121
  • editor.inactiveSelectionBackground#ffb3c1e0
  • editor.rangeHighlightBackground#ffb3c1e0
  • editor.selectionBackground#edccd2
  • editor.selectionHighlightBackground#ffbac5f3
  • editorBracketHighlight.foreground1#d87688
  • editorBracketHighlight.foreground2#d87688
  • editorBracketHighlight.foreground3#d87688
  • editorBracketHighlight.unexpectedBracket.foreground#f8879a
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#c56c7e
  • editorGroupHeader.tabsBackground#e96077
  • editorGroupHeader.tabsBorder#e96077
  • editorGutter.addedBackground#ea8596
  • editorGutter.deletedBackground#e25d7c80
  • editorGutter.modifiedBackground#e96077e0
  • editorHoverWidget.background#faf9f6
  • editorHoverWidget.border#f8879a
  • editorHoverWidget.foreground#e96077
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#e96077
  • editorOverviewRuler.addedForeground#e96077
  • editorOverviewRuler.deletedForeground#ffb3c1
  • editorOverviewRuler.modifiedForeground#e96077
  • editorWidget.background#f8879a
  • editorWidget.foreground#232323
  • focusBorder#e96077
  • foreground#212121
  • gitDecoration.ignoredResourceForeground#232323
  • icon.foreground#232323
  • input.background#f4798d
  • input.foreground#faf9f6
  • inputOption.activeBackground#e96077
  • inputOption.activeBorder#e96077
  • inputOption.activeForeground#faf9f6
  • inputValidation.errorBackground#e96077
  • inputValidation.errorBorder#e96077
  • inputValidation.errorForeground#faf9f6
  • list.activeSelectionBackground#db4a64
  • list.activeSelectionForeground#faf9f6
  • list.dropBackground#f4798d
  • list.errorForeground#232323
  • list.focusForeground#faf9f6
  • list.hoverBackground#f8879a
  • list.hoverForeground#faf9f6
  • list.inactiveSelectionBackground#db4a64
  • list.inactiveSelectionForeground#faf9f6
  • menu.background#faf9f6
  • menu.foreground#616161
  • menu.selectionBackground#e96077
  • menubar.selectionBackground#e96077
  • menubar.selectionBorder#e96077
  • menubar.selectionForeground#faf9f6
  • panel.border#e96077
  • panelSectionHeader.foreground#212121
  • panelTitle.activeBorder#e96077
  • panelTitle.activeForeground#c4197d
  • panelTitle.inactiveForeground#e96077
  • quickInput.background#faf9f6
  • quickInput.foreground#212121
  • quickInputList.focusBackground#ffced6
  • quickInputList.focusForeground#212121
  • quickInputList.focusIconForeground#e96077
  • scrollbar.shadow#d5476100
  • scrollbarSlider.activeBackground#d44b62
  • scrollbarSlider.background#d44b6290
  • scrollbarSlider.hoverBackground#d44b62
  • search.resultsInfoForeground#faf9f6
  • searchEditor.textInputBorder#e96077
  • selection.background#cb465d
  • sideBar.background#e96077
  • sideBar.foreground#faf9f6
  • sideBarSectionHeader.background#e96077
  • sideBarSectionHeader.border#e96077
  • sideBarSectionHeader.foreground#faf9f6
  • sideBarTitle.background#e96077
  • sideBarTitle.foreground#faf9f6
  • statusBar.background#d54761
  • statusBar.debuggingBackground#e96077
  • statusBar.foreground#faf9f6
  • statusBar.noFolderBackground#e96077
  • symbolIcon.classForeground#f1f1f1
  • symbolIcon.fieldForeground#f1f1f1
  • symbolIcon.functionForeground#f1f1f1
  • symbolIcon.methodForeground#f1f1f1
  • symbolIcon.variableForeground#f1f1f1
  • tab.activeBackground#f4798d
  • tab.activeBorder#f4798d
  • tab.activeForeground#faf9f6
  • tab.border#e96077
  • tab.hoverBackground#f4798d
  • tab.hoverBorder#f4798d
  • tab.inactiveBackground#e96077
  • tab.inactiveForeground#faf9f6
  • terminal.ansiBlack#2d2d2d
  • terminal.ansiBlue#8e5a91
  • terminal.ansiBrightBlack#616161
  • terminal.ansiBrightBlue#b57fb8
  • terminal.ansiBrightCyan#e96ba0
  • terminal.ansiBrightGreen#c76bad
  • terminal.ansiBrightMagenta#da5ba8
  • terminal.ansiBrightRed#e64a7a
  • terminal.ansiBrightWhite#212121
  • terminal.ansiBrightYellow#f8879a
  • terminal.ansiCyan#c04675
  • terminal.ansiGreen#a3488e
  • terminal.ansiMagenta#b83c85
  • terminal.ansiRed#c12952
  • terminal.ansiWhite#616161
  • terminal.ansiYellow#d54761
  • textLink.activeForeground#ad2239
  • textLink.foreground#faf9f6
  • titleBar.activeBackground#d54761
  • titleBar.activeForeground#faf9f6
  • titleBar.inactiveBackground#d54761
  • titleBar.inactiveForeground#faf9f6
  • tree.indentGuidesStroke#faf9f6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b6b85italic
variable, string constant.other.placeholder#7d3f85
constant.other.color#ffffff
invalid, invalid.illegal#c73d6f
keyword, storage.type, storage.modifier#c94ba3
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#b54996
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#b83d9f
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#9d4591
meta.block variable.other#8d3aa8
support.other.variable, string.other.link#d55a8f
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#a855b8
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#c5489a
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#8e2d7d
support.type#9642c8
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#9642c8
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#c73d6f
variable.language#c73d6fitalic
entity.name.method.js#b84fc2italic
meta.class-method.js entity.name.function.js, variable.function.constructor#b84fc2
entity.other.attribute-name#9642c8
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#9e2f80italic
entity.other.attribute-name.class#d555a6
source.sass keyword.control#b84fc2
markup.inserted#c57bba
markup.deleted#c73d6f
markup.changed#b87bc8
string.regexp#a85ec2
constant.character.escape#a85ec2
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#b84fc2italic
source.js constant.other.object.key.js string.unquoted.label.js#c73d6fitalic
source.json meta.structure.dictionary.json support.type.property-name.json#9d4591
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d57bb8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c55da3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b83d78
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c066a5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b84fc2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c566a5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9d4591
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c57bba
text.html.markdown, punctuation.definition.list_item.markdown#212121
text.html.markdown markup.inline.raw.markdown#b87bc8
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#8b6b85
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#c57bba
markup.italic#d55a8fitalic
markup.bold, markup.bold string#d55a8fbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#d55a8fbold
markup.underline#c55da3underline
markup.quote punctuation.definition.blockquote.markdown#8b6b85
markup.quoteitalic
string.other.link.title.markdown#c55da3
string.other.link.description.title.markdown#b87bc8
constant.other.reference.link.markdown#d57bb8
markup.raw.block#b87bc8
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#212121
variable.language.fenced.markdown#8b6b85
meta.separator#8b6b85bold
markup.table#212121