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#d8d8d8
  • activityBar.border#d8d8d8
  • activityBar.foreground#343a40
  • activityBarBadge.background#374785
  • activityBarBadge.foreground#ffffff
  • badge.background#ccd7da30
  • badge.foreground#50646e
  • breadcrumb.activeSelectionForeground#374785
  • breadcrumb.background#d8d8d8
  • breadcrumb.focusForeground#50646e
  • breadcrumb.foreground#7e939e
  • breadcrumbPicker.background#d8d8d8
  • button.background#37478540
  • debugToolBar.background#d8d8d8
  • diffEditor.insertedTextBackground#91b85915
  • diffEditor.removedTextBackground#e5393520
  • dropdown.background#d8d8d8
  • dropdown.border#00000010
  • editor.background#f0f0f0
  • editor.findMatchBackground#00000020
  • editor.findMatchBorder#00000030
  • editor.findMatchHighlightBackground#00000010
  • editor.findMatchHighlightBorder#00000010
  • editor.foreground#50646e
  • editor.lineHighlightBackground#00000010
  • editor.selectionBackground#00000020
  • editor.selectionHighlightBackground#00000020
  • editor.wordHighlightBackground#00000020
  • editor.wordHighlightStrongBackground#00000020
  • editorBracketMatch.background#27272720
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#272727
  • editorError.foreground#e5393570
  • editorGroup.border#00000010
  • editorGroupHeader.tabsBackground#d8d8d8
  • editorGutter.addedBackground#91b85960
  • editorGutter.deletedBackground#e5393560
  • editorGutter.modifiedBackground#6182b860
  • editorHoverWidget.background#d8d8d8
  • editorHoverWidget.border#00000010
  • editorIndentGuide.activeBackground#b0bec5
  • editorIndentGuide.background#b0bec570
  • editorInfo.foreground#6182b870
  • editorLineNumber.activeForeground#7e939e
  • editorLineNumber.foreground#cfd8dc
  • editorLink.activeForeground#50646e
  • editorMarkerNavigation.background#50646e05
  • editorOverviewRuler.border#d8d8d8
  • editorOverviewRuler.errorForeground#e5393540
  • editorOverviewRuler.findMatchForeground#374785
  • editorOverviewRuler.infoForeground#6182b840
  • editorOverviewRuler.warningForeground#ffb62c40
  • editorRuler.foreground#b0bec5
  • editorSuggestWidget.background#d8d8d8
  • editorSuggestWidget.border#00000010
  • editorSuggestWidget.foreground#50646e
  • editorSuggestWidget.highlightForeground#374785
  • editorSuggestWidget.selectedBackground#ccd7da50
  • editorWarning.foreground#ffb62c70
  • editorWhitespace.foreground#50646e40
  • editorWidget.background#d8d8d8
  • editorWidget.border#ff0000
  • editorWidget.resizeBorder#374785
  • extensionButton.prominentBackground#91b85990
  • extensionButton.prominentHoverBackground#91b859
  • focusBorder#ffffff00
  • gitDecoration.conflictingResourceForeground#ffb62c90
  • gitDecoration.deletedResourceForeground#e5393590
  • gitDecoration.ignoredResourceForeground#7e939e90
  • gitDecoration.modifiedResourceForeground#6182b890
  • gitDecoration.untrackedResourceForeground#91b85990
  • input.background#eeeeee
  • input.border#00000010
  • input.foreground#50646e
  • input.placeholderForeground#50646e10
  • inputOption.activeBackground#50646e30
  • inputOption.activeBorder#50646e30
  • inputValidation.errorBorder#e5393550
  • inputValidation.infoBorder#6182b850
  • inputValidation.warningBorder#ffb62c50
  • list.activeSelectionBackground#d8d8d8
  • list.activeSelectionForeground#374785
  • list.focusBackground#50646e20
  • list.focusForeground#50646e
  • list.highlightForeground#374785
  • list.hoverBackground#d8d8d8
  • list.hoverForeground#b1c7d3
  • list.inactiveSelectionBackground#ccd7da50
  • list.inactiveSelectionForeground#374785
  • listFilterWidget.background#ccd7da50
  • listFilterWidget.noMatchesOutline#ccd7da50
  • listFilterWidget.outline#ccd7da50
  • menu.background#d8d8d8
  • menu.foreground#50646e
  • menu.selectionBackground#ccd7da50
  • menu.selectionBorder#ccd7da50
  • menu.selectionForeground#374785
  • menu.separatorBackground#50646e
  • menubar.selectionBackground#ccd7da50
  • menubar.selectionBorder#ccd7da50
  • menubar.selectionForeground#374785
  • notificationLink.foreground#374785
  • notifications.background#d8d8d8
  • notifications.foreground#50646e
  • panel.background#d8d8d8
  • panel.border#d8d8d860
  • panelTitle.activeBorder#374785
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#50646e
  • peekView.border#00000020
  • peekViewEditor.background#50646e05
  • peekViewEditor.matchHighlightBackground#37478540
  • peekViewEditorGutter.background#50646e05
  • peekViewResult.background#50646e05
  • peekViewResult.matchHighlightBackground#37478540
  • peekViewResult.selectionBackground#7e939e70
  • peekViewTitle.background#50646e05
  • peekViewTitleDescription.foreground#50646e60
  • pickerGroup.foreground#374785
  • progressBar.background#374785
  • scrollbar.shadow#d8d8d800
  • scrollbarSlider.activeBackground#374785
  • scrollbarSlider.background#50646e20
  • scrollbarSlider.hoverBackground#50646e40
  • selection.background#374785
  • settings.checkboxBackground#d8d8d8
  • settings.checkboxForeground#50646e
  • settings.dropdownBackground#d8d8d8
  • settings.dropdownForeground#50646e
  • settings.headerForeground#374785
  • settings.modifiedItemIndicator#374785
  • settings.numberInputBackground#d8d8d8
  • settings.numberInputForeground#50646e
  • settings.textInputBackground#d8d8d8
  • settings.textInputForeground#50646e
  • sideBar.background#d8d8d8
  • sideBar.border#d8d8d860
  • sideBar.foreground#7e939e
  • sideBarSectionHeader.background#d8d8d8
  • sideBarSectionHeader.border#d8d8d860
  • sideBarTitle.foreground#50646e
  • statusBar.background#d8d8d8
  • statusBar.border#d8d8d860
  • statusBar.debuggingBackground#7c4dff
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#7e939e
  • statusBar.noFolderBackground#d8d8d8
  • statusBarItem.hoverBackground#50646e20
  • statusBarItem.remoteBackground#374785
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#374785
  • tab.activeForeground#000000
  • tab.activeModifiedBorder#7e939e
  • tab.border#d8d8d8
  • tab.inactiveBackground#d8d8d8
  • tab.inactiveForeground#7e939e
  • tab.unfocusedActiveBorder#50646e
  • tab.unfocusedActiveForeground#50646e
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6182b8
  • terminal.ansiBrightBlack#50646e
  • terminal.ansiBrightBlue#6182b8
  • terminal.ansiBrightCyan#39adb5
  • terminal.ansiBrightGreen#91b859
  • terminal.ansiBrightMagenta#7c4dff
  • terminal.ansiBrightRed#e53935
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb62c
  • terminal.ansiCyan#39adb5
  • terminal.ansiGreen#91b859
  • terminal.ansiMagenta#7c4dff
  • terminal.ansiRed#e53935
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffb62c
  • terminalCursor.background#000000
  • terminalCursor.foreground#ffb62c
  • textLink.activeForeground#50646e
  • textLink.foreground#374785
  • titleBar.activeBackground#d8d8d8
  • titleBar.activeForeground#50646e
  • titleBar.border#d8d8d860
  • titleBar.inactiveBackground#d8d8d8
  • titleBar.inactiveForeground#7e939e
  • tree.indentGuidesStroke#b0bec5
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#969896italic
variable, string constant.other.placeholder#373b41—
constant.other.color#ffffff—
invalid, invalid.illegal#db0025—
invalid.deprecated#4e5d94—
keyword, storage.type, storage.modifier#4e5d94—
Keyword, Storage—italic
keyword.control, constant.other.color, 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#125d90—
punctuation#414a4c—
keyword.control—italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178—
entity.name.function, variable.function, support.function, keyword.other.special-method#6b34b4—
variable.other.constant#125d90—
support.other.variable, string.other.link#125d90—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#de935f—
variable.parameter.function.language.special, variable.parameter#7289da—
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#6100ba
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#584053—
support.type#7289da—
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#B2CCD6—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#db0025—
variable.language#db0025italic
entity.name.method.js#7289daitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#7289da—
entity.other.attribute-name#5bb0eaitalic
entity.other.attribute-name.class#4b1833—
source.sass keyword.control#82AAFF—
markup.inserted#C3E88D—
markup.deleted#db0025—
markup.changed#4e5d94—
string.regexp#89DDFF—
constant.character.escape#89DDFF—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#db0025italic
source.json meta.structure.dictionary.json support.type.property-name.json#187a64—
text.html.markdown, punctuation.definition.list_item.markdown#373b41—
text.html.markdown markup.inline.raw.markdown#4e5d94—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#80869E50—
text.html.markdown meta.dummy.line-break#00000000—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D—
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#f07178bold
markup.underline#38716aunderline
markup.quote punctuation.definition.blockquote.markdown#80869E50—
markup.quote—italic
string.other.link.title.markdown#82AAFF—
string.other.link.description.title.markdown#4e5d94—
constant.other.reference.link.markdown#584053—
markup.raw.block#4e5d94—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#373b4190—
variable.language.fenced.markdown#80869E50—
meta.separator#80869E50bold
markup.table#373b41—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—