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#ffffff
  • activityBar.border#00000050
  • activityBar.foreground#000000
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#ffffff
  • badge.background#ffffff30
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#000000
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#000000
  • breadcrumb.foreground#000000
  • breadcrumbPicker.background#ffffff
  • button.background#00000050
  • contrastBorder#00000040
  • debugToolBar.background#ffffff
  • diffEditor.insertedTextBackground#00000015
  • diffEditor.removedTextBackground#00000020
  • dropdown.background#ffffff
  • dropdown.border#e1e1e110
  • editor.background#ffffff
  • editor.findMatchBackground#ffffff
  • editor.findMatchBorder#000000C1
  • editor.findMatchHighlightBackground#00000030
  • editor.findMatchHighlightBorder#e1e1e130
  • editor.foreground#000000
  • editor.lineHighlightBackground#ffffff50
  • editor.selectionBackground#00000030
  • editor.selectionHighlightBackground#00000020
  • editor.selectionHighlightBorder#00000050
  • editorBracketMatch.background#ffffff
  • editorBracketMatch.border#0000007f
  • editorCursor.foreground#000000
  • editorError.foreground#00000070
  • editorGroup.border#00000050
  • editorGroupHeader.tabsBackground#ffffff
  • editorGutter.addedBackground#00000050
  • editorGutter.deletedBackground#00000050
  • editorGutter.modifiedBackground#00000050
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#e1e1e110
  • editorIndentGuide.activeBackground1#00000070
  • editorIndentGuide.background1#00000015
  • editorInfo.foreground#00000070
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#000000c0
  • editorLink.activeForeground#000000
  • editorMarkerNavigation.background#00000005
  • editorOverviewRuler.border#ffffff
  • editorOverviewRuler.errorForeground#00000040
  • editorOverviewRuler.findMatchForeground#00000040
  • editorOverviewRuler.infoForeground#00000040
  • editorOverviewRuler.warningForeground#00000070
  • editorRuler.foreground#00000030
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#e1e1e110
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.highlightForeground#000000
  • editorSuggestWidget.selectedBackground#00000020
  • editorWarning.foreground#000000
  • editorWhitespace.foreground#00000040
  • editorWidget.background#ffffff
  • editorWidget.border#000000
  • editorWidget.resizeBorder#000000
  • extensionButton.prominentBackground#00000090
  • extensionButton.prominentHoverBackground#000000
  • focusBorder#e1e1e100
  • gitDecoration.conflictingResourceForeground#000000
  • gitDecoration.deletedResourceForeground#000000
  • gitDecoration.ignoredResourceForeground#000000A5
  • gitDecoration.modifiedResourceForeground#000000
  • gitDecoration.untrackedResourceForeground#000000A5
  • input.background#efefef
  • input.border#e1e1e110
  • input.foreground#000000
  • input.placeholderForeground#00000060
  • inputOption.activeBackground#00000030
  • inputOption.activeBorder#00000030
  • inputValidation.errorBorder#00000050
  • inputValidation.infoBorder#00000050
  • inputValidation.warningBorder#00000050
  • list.activeSelectionBackground#e1e1e1
  • list.activeSelectionForeground#000000
  • list.focusBackground#00000030
  • list.focusForeground#000000
  • list.highlightForeground#000000
  • list.hoverBackground#e1e1e1
  • list.hoverForeground#000
  • list.inactiveSelectionBackground#e1e1e1
  • list.inactiveSelectionForeground#000000
  • list.warningForeground#000000
  • listFilterWidget.background#ffffff30
  • listFilterWidget.noMatchesOutline#ffffff30
  • listFilterWidget.outline#ffffff30
  • menu.background#fffffff8
  • menu.border#00000050
  • menu.foreground#000000
  • menu.selectionBackground#efefef
  • menu.selectionBorder#00000050
  • menu.selectionForeground#000000
  • menu.separatorBackground#00000050
  • menubar.selectionBackground#efefef
  • menubar.selectionBorder#00000050
  • menubar.selectionForeground#000000
  • minimap.background#ffffff
  • minimapGutter.addedBackground#000000
  • minimapGutter.deletedBackground#000000
  • minimapGutter.modifiedBackground#000000
  • minimapSlider.activeBackground#000000b0
  • minimapSlider.background#00000080
  • minimapSlider.hoverBackground#000000a0
  • notificationLink.foreground#000000
  • notifications.background#ffffff
  • notifications.foreground#000000
  • panel.background#ffffff
  • panel.border#00000050
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#000
  • panelTitle.inactiveForeground#00000070
  • peekView.border#ffffff30
  • peekViewEditor.background#00000005
  • peekViewEditor.matchHighlightBackground#00000050
  • peekViewEditorGutter.background#00000005
  • peekViewResult.background#00000005
  • peekViewResult.matchHighlightBackground#00000050
  • peekViewResult.selectionBackground#00000070
  • peekViewTitle.background#00000005
  • peekViewTitleDescription.foreground#00000060
  • pickerGroup.foreground#000000
  • progressBar.background#000000
  • scrollbar.shadow#ffffff00
  • scrollbarSlider.activeBackground#000000cc
  • scrollbarSlider.background#000000bb
  • scrollbarSlider.hoverBackground#000000ee
  • selection.background#00000050
  • settings.checkboxBackground#ffffff
  • settings.checkboxForeground#000000
  • settings.dropdownBackground#ffffff
  • settings.dropdownForeground#000000
  • settings.headerForeground#000000
  • settings.modifiedItemIndicator#000000
  • settings.numberInputBackground#ffffff
  • settings.numberInputForeground#000000
  • settings.textInputBackground#ffffff
  • settings.textInputForeground#000000
  • sideBar.background#ffffff
  • sideBar.border#00000050
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#ffffff60
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#efefef
  • statusBar.border#00000050
  • statusBar.debuggingBackground#efefef
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.hoverBackground#00000020
  • statusBarItem.remoteBackground#ffffff
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#efefef
  • tab.activeBorder#000000
  • tab.activeForeground#000000
  • tab.activeModifiedBorder#000000
  • tab.border#00000050
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#000000
  • tab.unfocusedActiveBackground#ffffff
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveForeground#000000
  • tab.unfocusedInactiveBackground#ffffff
  • tab.unfocusedInactiveForeground#000000
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#000000
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#000000
  • terminal.ansiBrightCyan#000000
  • terminal.ansiBrightGreen#000000
  • terminal.ansiBrightMagenta#000000
  • terminal.ansiBrightRed#000000
  • terminal.ansiBrightWhite#e1e1e1
  • terminal.ansiBrightYellow#000000
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#000000
  • terminal.ansiMagenta#000000
  • terminal.ansiRed#000000
  • terminal.ansiWhite#e1e1e1
  • terminal.ansiYellow#000000
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#000000
  • textLink.activeForeground#000000
  • textLink.foreground#000000
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#000000
  • titleBar.border#00000050
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#000000
  • tree.indentGuidesStroke#00000030
  • widget.shadow#ffffff30
  • window.activeBorder#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#000000
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#000000
constant.other.php#000000
constant.other.color#e1e1e1
invalid, invalid.illegal#000000
Keyword, Storage
string.unquoted.argument, keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#000000
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#000000
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js#000000
punctuation.definition#000000
keyword.control
comment.line.scss, string, string.quoted.double.html, string.quoted.single.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html, comment, punctuation.definition.comment#808080
text.html.derivative#000000
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#000000
entity.name.tag.html
variable.parameter.js, variable.parameter.keyframe-list.css#000000
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#000000
variable.other.constant.js, variable.other.object.property.js, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#000000
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#000000
support.other.variable, string.other.link, markup.table#000000
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#000000
variable.parameter.function.language.special, variable.parameter#000000
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js#000000
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, entity.other.attribute-name.html#000000
support.type#000000
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#000000
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#000000
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#000000
entity.other.attribute-name, support.function#000000
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, string.unquoted.label.js, string.quoted.double.json, storage.type.function.js, meta.object-literal.key#000000
source.scss keyword.control#000000
markup.inserted#000000
markup.deleted#000000
markup.changed#000000
string.regexp#000000
constant.character.escape#000000
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#000000
support.type.property-name.json#000000
text.html.markdown, punctuation.definition.list_item.markdown#000000
text.html.markdown markup.inline.raw.markdown#000000
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#00000050
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#000000bold
markup.underline#000000underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#00000050
markup.quote
string.other.link.description.title.markdown#000000
constant.other.reference.link.markdown#000000
markup.raw.block#000000
punctuation.definition.raw.markdown, punctuation.definition.markdown#000000
variable.language.fenced.markdown#000000
meta.separator#000000
token.info-token#000000
token.warn-token#000000
token.error-token#FF293B
token.debug-token#000000