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#EDEDED
  • activityBar.border#E8E8E8
  • activityBar.dropBackground#EDEDEDcc
  • activityBar.foreground#5c6066
  • activityBarBadge.background#B54309
  • activityBarBadge.foreground#ffffffe6
  • badge.background#C2470A
  • badge.foreground#ffffffe6
  • button.background#B54309
  • button.foreground#ffffffe6
  • button.hoverBackground#C2470A
  • debugExceptionWidget.background#E9313B
  • debugExceptionWidget.border#E9313B
  • diffEditor.insertedTextBackground#6B8F001a
  • diffEditor.removedTextBackground#E9313B1a
  • dropdown.background#E8E8E8
  • dropdown.border#E8E8E8
  • dropdown.foreground#5c6066
  • dropdown.listBackground#EDEDED
  • editor.background#fafafa
  • editor.findMatchBackground#f8dc873c
  • editor.findMatchHighlightBackground#00000016
  • editor.foreground#5c6066
  • editor.inactiveSelectionBackground#00000010
  • editor.lineHighlightBackground#0000000d
  • editor.rangeHighlightBackground#00000016
  • editor.selectionBackground#0000001a
  • editor.selectionHighlightBackground#00000016
  • editor.wordHighlightBackground#00000016
  • editor.wordHighlightStrongBackground#0000001a
  • editorBracketMatch.background#00000016
  • editorBracketMatch.border#00000016
  • editorCodeLens.foreground#00000016
  • editorCursor.foreground#f4590b
  • editorError.foreground#ED515A
  • editorGroup.background#F9F9F9
  • editorGroup.border#0000001a
  • editorGroup.dropBackground#EDEDEDcc
  • editorGroupHeader.noTabsBackground#E8E8E8
  • editorGroupHeader.tabsBackground#E8E8E8
  • editorGroupHeader.tabsBorder#F9F9F9
  • editorGutter.addedBackground#86b300b3
  • editorGutter.background#F3F3F3
  • editorGutter.deletedBackground#f07178b3
  • editorGutter.modifiedBackground#f29718b3
  • editorHoverWidget.background#F2F2F2
  • editorIndentGuide.activeBackground#00000033
  • editorIndentGuide.background#0000001a
  • editorLineNumber.activeForeground#ffffff5a
  • editorLineNumber.foreground#00000033
  • editorLink.activeForeground#3fa6d9
  • editorMarkerNavigation.background#EDEDED
  • editorMarkerNavigationError.background#f07178b3
  • editorMarkerNavigationWarning.background#f29718b3
  • editorOverviewRuler.addedForeground#6B8F00
  • editorOverviewRuler.border#0000001a
  • editorOverviewRuler.currentContentForeground#268ABC1a
  • editorOverviewRuler.deletedForeground#E9313B
  • editorOverviewRuler.errorForeground#E9313B
  • editorOverviewRuler.findMatchForeground#f8dc873c
  • editorOverviewRuler.incomingContentForeground#C97A0B1a
  • editorOverviewRuler.infoForeground#C97A0B
  • editorOverviewRuler.modifiedForeground#C97A0B
  • editorOverviewRuler.rangeHighlightForeground#00000016
  • editorOverviewRuler.selectionHighlightForeground#00000016
  • editorOverviewRuler.warningForeground#C97A0B
  • editorOverviewRuler.wordHighlightForeground#0000001a
  • editorOverviewRuler.wordHighlightStrongForeground#0000001a
  • editorRuler.foreground#0000001a
  • editorSuggestWidget.background#EDEDED
  • editorSuggestWidget.border#E8E8E8
  • editorSuggestWidget.foreground#5c6066
  • editorSuggestWidget.selectedBackground#E8E8E8
  • editorWarning.foreground#B06B0A
  • editorWhitespace.foreground#00000016
  • editorWidget.background#EDEDED
  • editorWidget.border#E8E8E8
  • errorForeground#ED515A
  • extensionButton.prominentBackground#B54309
  • extensionButton.prominentForeground#ffffffe6
  • extensionButton.prominentHoverBackground#9D3A08
  • focusBorder#00000026
  • foreground#5c6066
  • gitDecoration.conflictingResourceForeground#ED515A
  • gitDecoration.deletedResourceForeground#ED515A
  • gitDecoration.ignoredResourceForeground#5c6066a6
  • gitDecoration.modifiedResourceForeground#2178A4
  • gitDecoration.untrackedResourceForeground#5E7D00
  • input.background#F2F2F2
  • input.border#E8E8E8
  • input.foreground#5c6066
  • input.placeholderForeground#5c6066a6
  • inputOption.activeBorder#E1E1E1
  • inputValidation.errorBackground#E8E8E8
  • inputValidation.errorBorder#E9313B
  • inputValidation.infoBackground#E8E8E8
  • inputValidation.infoBorder#268ABC
  • inputValidation.warningBackground#E8E8E8
  • inputValidation.warningBorder#C97A0B
  • list.activeSelectionBackground#0000001a
  • list.activeSelectionForeground#55585E
  • list.dropBackground#0000000d
  • list.focusBackground#00000026
  • list.focusForeground#565A60
  • list.highlightForeground#F2590C
  • list.hoverBackground#0000000d
  • list.hoverForeground#5A5E64
  • list.inactiveFocusBackground#00000012
  • list.inactiveSelectionBackground#00000014
  • list.inactiveSelectionForeground#585C62
  • list.invalidItemForeground#ED515A
  • merge.border#E9313B
  • merge.currentContentBackground#268ABC1a
  • merge.currentHeaderBackground#268ABC
  • merge.incomingContentBackground#C97A0B1a
  • merge.incomingHeaderBackground#C97A0B
  • notificationCenter.border#9D3A08
  • notificationCenterHeader.background#9D3A08
  • notificationCenterHeader.foreground#ffffffe6
  • notificationLink.foreground#3fa6d9
  • notifications.background#E1E1E1
  • notifications.border#E1E1E1
  • notifications.foreground#61656B
  • notificationToast.border#EDEDED
  • panel.background#F9F9F9
  • panel.border#E1E1E1
  • panelTitle.activeBorder#9D3A08
  • panelTitle.activeForeground#61656B
  • panelTitle.inactiveForeground#575B61
  • peekView.border#EDEDED
  • peekViewEditor.background#F2F2F2
  • peekViewEditor.matchHighlightBackground#00000016
  • peekViewEditorGutter.background#F2F2F2
  • peekViewResult.background#F2F2F2
  • peekViewResult.fileForeground#5c6066
  • peekViewResult.lineForeground#5c6066
  • peekViewResult.matchHighlightBackground#00000016
  • peekViewResult.selectionBackground#0000001a
  • peekViewResult.selectionForeground#5c6066
  • peekViewTitle.background#E8E8E8
  • peekViewTitleDescription.foreground#575B61
  • peekViewTitleLabel.foreground#5E6268
  • pickerGroup.border#F2F2F2
  • pickerGroup.foreground#5A5E64
  • progressBar.background#F2590C
  • scrollbar.shadow#E8E8E8
  • scrollbarSlider.activeBackground#5c60664d
  • scrollbarSlider.background#5c60661a
  • scrollbarSlider.hoverBackground#5c606633
  • selection.background#41a6d9b3
  • sideBar.background#F9F9F9
  • sideBar.border#EDEDED
  • sideBar.foreground#5c6066
  • sideBarSectionHeader.background#EDEDED
  • sideBarSectionHeader.foreground#5c6066
  • sideBarTitle.foreground#5A5E64
  • statusBar.background#EDEDED
  • statusBar.border#E8E8E8
  • statusBar.debuggingBackground#B54309
  • statusBar.debuggingForeground#ffffffe6
  • statusBar.foreground#000000cc
  • statusBar.noFolderBackground#EDEDED
  • statusBar.noFolderForeground#575B61
  • statusBarItem.activeBackground#0000001a
  • statusBarItem.hoverBackground#0000000d
  • statusBarItem.prominentBackground#9D3A08
  • statusBarItem.prominentHoverBackground#C2470A
  • tab.activeBackground#F9F9F9
  • tab.activeBorder#9D3A08
  • tab.activeForeground#5c6066
  • tab.border#E1E1E1
  • tab.hoverBackground#F2F2F2
  • tab.inactiveBackground#E8E8E8
  • tab.inactiveForeground#5A5E64
  • tab.unfocusedActiveForeground#5A5E64
  • tab.unfocusedHoverBackground#F9F9F9
  • tab.unfocusedInactiveForeground#575B61
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#427ab3
  • terminal.ansiBrightBlack#686a66
  • terminal.ansiBrightBlue#84b0d8
  • terminal.ansiBrightCyan#37e6e8
  • terminal.ansiBrightGreen#99e343
  • terminal.ansiBrightMagenta#bc94b7
  • terminal.ansiBrightRed#f54235
  • terminal.ansiBrightWhite#f1f1f0
  • terminal.ansiBrightYellow#fdeb61
  • terminal.ansiCyan#00a7aa
  • terminal.ansiGreen#5ea702
  • terminal.ansiMagenta#89658e
  • terminal.ansiRed#d81e00
  • terminal.ansiWhite#dbded8
  • terminal.ansiYellow#cfae00
  • terminal.background#EDEDED
  • terminal.foreground#5c6066
  • terminal.selectionBackground#c1deff5a
  • titleBar.activeBackground#E8E8E8
  • titleBar.activeForeground#61656B
  • titleBar.border#E1E1E1
  • titleBar.inactiveBackground#EDEDED
  • titleBar.inactiveForeground#5A5E64
  • walkThrough.embeddedEditorBackground#EDEDED
  • welcomePage.buttonBackground#F2F2F2
  • welcomePage.buttonHoverBackground#F9F9F9
  • widget.shadow#E8E8E8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#5c6066—
comment, punctuation.definition.comment#aaafb5italic
variable, variable.other, variable.name#575B61—
variable.parameter#575B61—
variable.language, variable.scss, variable.less, variable.styl#f07076italic
punctuation.definition.variable#575B61italic
variable.other.constant#3fa6d9bold
constant, constant.other, constant.character#a37acd—
support.type.property-name, constant.numeric, support.constant#f4590b—
meta.object-literal.key#f29718—
constant.language#f07076italic
constant.character.escape, constant.other.placeholder#f29718italic
invalid, invalid.illegal#f07076—
keyword, storage.type#a37acd—
storage.modifier#f07076—
storage.modifier, storage.type, keyword.control—italic
keyword.operator, punctuation.accessor.#f37e12—
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#575B61—
entity.name#f29718—
entity.name.tag, meta.tag.sgml#f07076
entity.name.function, entity.name.label, meta.function-call, variable.function, keyword.other.special-method, support.function, support.type, support.class#3fa6d9
string, entity.other.inherited-class, markup.heading, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#86b300
meta.tag.attribute, entity.other.attribute-name#f4590bitalic
punctuation.terminator, punctuation.separator, meta.property-list.scss, meta.property-list.css, meta.property-list.styl, meta.property-list.less, punctuation.separator.inheritance#8f969e—
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class, source.styl entity.other.attribute-name.class, source.less entity.other.attribute-name.class#f37e12—
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id, source.styl entity.other.attribute-name.id, source.less entity.other.attribute-name.id#3fa6d9—
support.type.property-name.css#575B61—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#687078italic
*url*, *link*, *uri*#3fa6d9italic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#3fa6d9italic
source.json meta.structure.dictionary.json support.type.property-name.json#f29718—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f4590b—
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#a37acd—
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#575B61—
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#3fa6d9—
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#f37e12—
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#8f969e—
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#687078—
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#f07076—
text.html.markdown, punctuation.definition.list_item.markdown#8f969e—
text.html.markdown markup.inline.raw.markdown#a37acd—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#687078—
text.html.markdown meta.dummy.line-break—
markdown.heading, markup.heading.markdown entity.name.section.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#f07076—
beginning.punctuation.definition.list.markdown#f4590b—
markup.italic#f37e12italic
markup.bold, markup.bold string#f37e12bold
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#f37e12bold italic
markup.underline#3fa6d9underline
markup.strike#aaafb5strike
beginning.punctuation.definition.quote#00000013—
markup.quote#818992italic
string.other.link.title.markdown#f4590b—
string.other.link.description.title.markdown#86b300—
constant.other.reference.link.markdown#f37e12—
markup.raw.block#575B61—
markup.raw.block.fenced.markdown, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#575B61—
meta.separator#5c6066bold
markup.table#5c6066—
token.info-token#2178A4—
token.warn-token#B06B0A—
token.error-token#ED515A—
token.debug-token#3fa6d9—
markup.deleted, punctuation.definition.deleted#ED515A—
markup.inserted, punctuation.definition.inserted#5E7D00—
markup.changed, punctuation.definition.changed#2178A4—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php—italic
keyword.other.namespace.php, keyword.other.use.php—italic
meta.tag.sgml.doctype.html—italic