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#262626
  • activityBar.border#26262660
  • activityBar.foreground#E5E5E5
  • activityBarBadge.background#73B8FF
  • activityBarBadge.foreground#262626
  • badge.background#26262630
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#262626
  • breadcrumb.focusForeground#E5E5E5
  • breadcrumb.foreground#ffffff
  • breadcrumbPicker.background#262626
  • button.background#9159D950
  • contrastBorder#9159D940
  • debugToolBar.background#262626
  • diffEditor.insertedTextBackground#486EA815
  • diffEditor.removedTextBackground#22B9BA20
  • dropdown.background#262626
  • dropdown.border#FFFFFF10
  • editor.background#262626
  • editor.findMatchBackground#262626
  • editor.findMatchBorder#9159D9
  • editor.findMatchHighlightBackground#9159D993
  • editor.findMatchHighlightBorder#FFFFFF30
  • editor.foreground#E5E5E5
  • editor.lineHighlightBackground#26262650
  • editor.selectionBackground#73B8FF30
  • editor.selectionHighlightBackground#9159D96b
  • editor.selectionHighlightBorder#73B8FFf0
  • editorBracketMatch.background#262626
  • editorBracketMatch.border#2073D47f
  • editorCursor.foreground#2073D4
  • editorError.foreground#22B9BA70
  • editorGroup.border#26262630
  • editorGroupHeader.tabsBackground#262626
  • editorGutter.addedBackground#486EA860
  • editorGutter.deletedBackground#22B9BA60
  • editorGutter.modifiedBackground#73B8FF60
  • editorHoverWidget.background#262626
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#666666
  • editorIndentGuide.background#66666670
  • editorInfo.foreground#73B8FF70
  • editorLineNumber.activeForeground#73B8FF
  • editorLineNumber.foreground#82AAFF
  • editorLink.activeForeground#E5E5E5
  • editorMarkerNavigation.background#E5E5E505
  • editorOverviewRuler.border#262626
  • editorOverviewRuler.errorForeground#22B9BA40
  • editorOverviewRuler.findMatchForeground#9159D9
  • editorOverviewRuler.infoForeground#73B8FF40
  • editorOverviewRuler.warningForeground#2073D470
  • editorRuler.foreground#666666
  • editorSuggestWidget.background#262626
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#E5E5E5
  • editorSuggestWidget.highlightForeground#2073D4
  • editorSuggestWidget.selectedBackground#9159D920
  • editorWarning.foreground#486EA8
  • editorWhitespace.foreground#E5E5E540
  • editorWidget.background#262626
  • editorWidget.border#2073D4
  • editorWidget.resizeBorder#9159D9
  • extensionButton.prominentBackground#486EA890
  • extensionButton.prominentHoverBackground#22B9BA
  • focusBorder#FFFFFF00
  • gitDecoration.conflictingResourceForeground#2073D4
  • gitDecoration.deletedResourceForeground#22B9BA
  • gitDecoration.ignoredResourceForeground#9159D9
  • gitDecoration.modifiedResourceForeground#D170FF
  • gitDecoration.untrackedResourceForeground#73B8FF
  • input.background#444444
  • input.border#FFFFFF10
  • input.foreground#E5E5E5
  • input.placeholderForeground#E5E5E560
  • inputOption.activeBackground#E5E5E530
  • inputOption.activeBorder#E5E5E530
  • inputValidation.errorBorder#22B9BA50
  • inputValidation.infoBorder#73B8FF50
  • inputValidation.warningBorder#2073D450
  • list.activeSelectionBackground#262626
  • list.activeSelectionForeground#B2CCD6
  • list.focusBackground#444444
  • list.focusForeground#73B8FF
  • list.highlightForeground#9159D9
  • list.hoverBackground#666666
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#26262630
  • list.inactiveSelectionForeground#9159D9
  • list.warningForeground#2073D4
  • listFilterWidget.background#26262630
  • listFilterWidget.noMatchesOutline#26262630
  • listFilterWidget.outline#26262630
  • menu.background#262626f8
  • menu.border#9159D950
  • menu.foreground#E5E5E5
  • menu.selectionBackground#444444
  • menu.selectionBorder#26262630
  • menu.selectionForeground#E5E5E5
  • menu.separatorBackground#E5E5E5
  • menubar.selectionBackground#444444
  • menubar.selectionBorder#9159D950
  • menubar.selectionForeground#E5E5E5
  • minimap.background#262626
  • minimapGutter.addedBackground#22B9BA
  • minimapGutter.deletedBackground#2073D4
  • minimapGutter.modifiedBackground#486EA8
  • minimapSlider.activeBackground#486EA8b0
  • minimapSlider.background#486EA880
  • minimapSlider.hoverBackground#486EA8a0
  • notificationLink.foreground#9159D9
  • notifications.background#262626
  • notifications.foreground#E5E5E5
  • panel.background#262626
  • panel.border#26262660
  • panelTitle.activeBorder#9159D9
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#E5E5E5
  • peekView.border#26262630
  • peekViewEditor.background#E5E5E505
  • peekViewEditor.matchHighlightBackground#9159D950
  • peekViewEditorGutter.background#E5E5E505
  • peekViewResult.background#E5E5E505
  • peekViewResult.matchHighlightBackground#9159D950
  • peekViewResult.selectionBackground#9159D970
  • peekViewTitle.background#E5E5E505
  • peekViewTitleDescription.foreground#E5E5E560
  • pickerGroup.foreground#9159D9
  • progressBar.background#9159D9
  • scrollbar.shadow#26262600
  • scrollbarSlider.activeBackground#263238
  • scrollbarSlider.background#65737E
  • scrollbarSlider.hoverBackground#9159D9ee
  • selection.background#9159D9
  • settings.checkboxBackground#262626
  • settings.checkboxForeground#E5E5E5
  • settings.dropdownBackground#262626
  • settings.dropdownForeground#E5E5E5
  • settings.headerForeground#9159D9
  • settings.modifiedItemIndicator#9159D9
  • settings.numberInputBackground#262626
  • settings.numberInputForeground#E5E5E5
  • settings.textInputBackground#262626
  • settings.textInputForeground#E5E5E5
  • sideBar.background#262626
  • sideBar.border#9159D950
  • sideBar.foreground#73B8FF
  • sideBarSectionHeader.background#262626
  • sideBarSectionHeader.border#26262660
  • sideBarSectionHeader.foreground#73B8FF
  • sideBarTitle.foreground#E5E5E5
  • statusBar.background#353535
  • statusBar.border#26262660
  • statusBar.debuggingBackground#2073D4
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#262626
  • statusBarItem.hoverBackground#9159D920
  • statusBarItem.remoteBackground#9159D9
  • statusBarItem.remoteForeground#262626
  • tab.activeBackground#65737E
  • tab.activeBorder#89DDFF
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#9159D9
  • tab.border#262626
  • tab.inactiveBackground#263238
  • tab.inactiveForeground#E5E5E5af
  • tab.unfocusedActiveBackground#262626
  • tab.unfocusedActiveBorder#263238
  • tab.unfocusedActiveForeground#E5E5E5
  • tab.unfocusedInactiveBackground#262626
  • tab.unfocusedInactiveForeground#E5E5E57f
  • terminal.ansiBlack#262626
  • terminal.ansiBlue#73B8FF
  • terminal.ansiBrightBlack#9159D9
  • terminal.ansiBrightBlue#73B8FF
  • terminal.ansiBrightCyan#8FE0FF
  • terminal.ansiBrightGreen#486EA8
  • terminal.ansiBrightMagenta#2073D4
  • terminal.ansiBrightRed#22B9BA
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#2073D4
  • terminal.ansiCyan#8FE0FF
  • terminal.ansiGreen#486EA8
  • terminal.ansiMagenta#2073D4
  • terminal.ansiRed#22B9BA
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#2073D4
  • terminalCursor.background#262626
  • terminalCursor.foreground#2073D4
  • textLink.activeForeground#E5E5E5
  • textLink.foreground#9159D9
  • titleBar.activeBackground#262626
  • titleBar.activeForeground#E5E5E5
  • titleBar.border#26262660
  • titleBar.inactiveBackground#262626
  • titleBar.inactiveForeground#9159D9
  • tree.indentGuidesStroke#666666
  • widget.shadow#26262630

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#2073D4
entity.name.tag.html#22B9BA
entity.name.tag.js.jsx#2073D4
entity.name.tag.js#2073D4
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#486EA8
constant.other.php#2073D4
constant.other.color#FFFFFF
invalid, invalid.illegal#22B9BA
Keyword, Storageitalic
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#A7A8AF
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#D170FF
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#E5E5E5
punctuation.definition, string.quoted.single.scss#A7A8AF
keyword.controlbold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#6D6F7C
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#E5E5E5
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#2073D4
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#D170FF
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, 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#73B8FF
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#8FE0FF
support.other.variable, string.other.link, markup.table#E5E5E5
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#2073D4
variable.parameter.function.language.special, variable.parameter#22B9BA
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, string.unquoted.label.js#486EA8
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#2073D4
support.type#B2CCD6
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#D170FF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#22B9BA
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#73B8FFitalic
entity.other.attribute-name, support.function#2073D4
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, storage.type.function.js, meta.object-literal.key#E5E5E5
source.scss keyword.control#2073D4
markup.inserted#486EA8
markup.deleted#22B9BA
markup.changed#2073D4
string.regexp#8FE0FF
constant.character.escape#8FE0FF
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#E5E5E5italic
support.type.property-name.json#E5E5E5
text.html.markdown, punctuation.definition.list_item.markdown#E5E5E5
text.html.markdown markup.inline.raw.markdown#2073D4
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#9159D950
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#D170FFbold
markup.underline#73B8FFunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#9159D950
markup.quoteitalic
string.other.link.description.title.markdown#2073D4
constant.other.reference.link.markdown#2073D4
markup.raw.block#2073D4
punctuation.definition.raw.markdown, punctuation.definition.markdown#8FE0FF
variable.language.fenced.markdown#9159D9
meta.separator#A7A8AFbold
token.info-token#9159D9
token.warn-token#2073D4
token.error-token#FF293B
token.debug-token#8FE0FF