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#111111
  • activityBar.border#11111160
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#79FFE1
  • activityBarBadge.foreground#111111
  • badge.background#11111130
  • badge.foreground#7928CA
  • breadcrumb.activeSelectionForeground#7928CA
  • breadcrumb.background#111111
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#50E3C2
  • breadcrumbPicker.background#111111
  • button.background#7928CA50
  • contrastBorder#7928CA40
  • debugToolBar.background#111111
  • diffEditor.insertedTextBackground#00C80615
  • diffEditor.removedTextBackground#FF008020
  • dropdown.background#111111
  • dropdown.border#88888810
  • editor.background#111111
  • editor.findMatchBackground#111111
  • editor.findMatchBorder#7928CA
  • editor.findMatchHighlightBackground#7928CA93
  • editor.findMatchHighlightBorder#88888830
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#11111150
  • editor.selectionBackground#79FFE130
  • editor.selectionHighlightBackground#7928CA6b
  • editor.selectionHighlightBorder#79FFE1f0
  • editorBracketMatch.background#111111
  • editorBracketMatch.border#FFF5007f
  • editorCursor.foreground#FFF500
  • editorError.foreground#FF008070
  • editorGroup.border#11111130
  • editorGroupHeader.tabsBackground#111111
  • editorGutter.addedBackground#00C80660
  • editorGutter.deletedBackground#FF008060
  • editorGutter.modifiedBackground#79FFE160
  • editorHoverWidget.background#111111
  • editorHoverWidget.border#88888810
  • editorIndentGuide.activeBackground#444444
  • editorIndentGuide.background#44444470
  • editorInfo.foreground#79FFE170
  • editorLineNumber.activeForeground#79FFE1
  • editorLineNumber.foreground#7928CAc0
  • editorLink.activeForeground#FFFFFF
  • editorMarkerNavigation.background#FFFFFF05
  • editorOverviewRuler.border#111111
  • editorOverviewRuler.errorForeground#FF008040
  • editorOverviewRuler.findMatchForeground#7928CA
  • editorOverviewRuler.infoForeground#79FFE140
  • editorOverviewRuler.warningForeground#FFF50070
  • editorRuler.foreground#444444
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#88888810
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#FFF500
  • editorSuggestWidget.selectedBackground#7928CA20
  • editorWarning.foreground#00C806
  • editorWhitespace.foreground#FFFFFF40
  • editorWidget.background#111111
  • editorWidget.border#FFF500
  • editorWidget.resizeBorder#7928CA
  • extensionButton.prominentBackground#00C80690
  • extensionButton.prominentHoverBackground#FF0080
  • focusBorder#88888800
  • gitDecoration.conflictingResourceForeground#FFF500
  • gitDecoration.deletedResourceForeground#FF0080
  • gitDecoration.ignoredResourceForeground#7928CA
  • gitDecoration.modifiedResourceForeground#50E3C2
  • gitDecoration.untrackedResourceForeground#79FFE1
  • input.background#333333
  • input.border#88888810
  • input.foreground#FFFFFF
  • input.placeholderForeground#FFFFFF60
  • inputOption.activeBackground#FFFFFF30
  • inputOption.activeBorder#FFFFFF30
  • inputValidation.errorBorder#FF008050
  • inputValidation.infoBorder#79FFE150
  • inputValidation.warningBorder#FFF50050
  • list.activeSelectionBackground#111111
  • list.activeSelectionForeground#7928CA
  • list.focusBackground#333333
  • list.focusForeground#79FFE1
  • list.highlightForeground#7928CA
  • list.hoverBackground#444444
  • list.hoverForeground#888888
  • list.inactiveSelectionBackground#11111130
  • list.inactiveSelectionForeground#7928CA
  • list.warningForeground#FFF500
  • listFilterWidget.background#11111130
  • listFilterWidget.noMatchesOutline#11111130
  • listFilterWidget.outline#11111130
  • menu.background#111111f8
  • menu.border#7928CA50
  • menu.foreground#FFFFFF
  • menu.selectionBackground#333333
  • menu.selectionBorder#11111130
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#FFFFFF
  • menubar.selectionBackground#333333
  • menubar.selectionBorder#7928CA50
  • menubar.selectionForeground#FFFFFF
  • minimap.background#111111
  • minimapGutter.addedBackground#FF0080
  • minimapGutter.deletedBackground#FFF500
  • minimapGutter.modifiedBackground#00C806
  • minimapSlider.activeBackground#00C806b0
  • minimapSlider.background#00C80680
  • minimapSlider.hoverBackground#00C806a0
  • notificationLink.foreground#7928CA
  • notifications.background#111111
  • notifications.foreground#FFFFFF
  • panel.background#111111
  • panel.border#11111160
  • panelTitle.activeBorder#7928CA
  • panelTitle.activeForeground#888888
  • panelTitle.inactiveForeground#FFFFFF
  • peekView.border#11111130
  • peekViewEditor.background#FFFFFF05
  • peekViewEditor.matchHighlightBackground#7928CA50
  • peekViewEditorGutter.background#FFFFFF05
  • peekViewResult.background#FFFFFF05
  • peekViewResult.matchHighlightBackground#7928CA50
  • peekViewResult.selectionBackground#7928CA70
  • peekViewTitle.background#FFFFFF05
  • peekViewTitleDescription.foreground#FFFFFF60
  • pickerGroup.foreground#7928CA
  • progressBar.background#7928CA
  • scrollbar.shadow#11111100
  • scrollbarSlider.activeBackground#7928CAcc
  • scrollbarSlider.background#7928CAbb
  • scrollbarSlider.hoverBackground#7928CAee
  • selection.background#7928CA
  • settings.checkboxBackground#111111
  • settings.checkboxForeground#FFFFFF
  • settings.dropdownBackground#111111
  • settings.dropdownForeground#FFFFFF
  • settings.headerForeground#7928CA
  • settings.modifiedItemIndicator#7928CA
  • settings.numberInputBackground#111111
  • settings.numberInputForeground#FFFFFF
  • settings.textInputBackground#111111
  • settings.textInputForeground#FFFFFF
  • sideBar.background#111111
  • sideBar.border#7928CA50
  • sideBar.foreground#79FFE1
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.border#11111160
  • sideBarSectionHeader.foreground#79FFE1
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#444444
  • statusBar.border#11111160
  • statusBar.debuggingBackground#FFF500
  • statusBar.debuggingForeground#888888
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#7928CA20
  • statusBarItem.remoteBackground#7928CA
  • statusBarItem.remoteForeground#111111
  • tab.activeBackground#7928CA50
  • tab.activeBorder#7928CA
  • tab.activeForeground#888888
  • tab.activeModifiedBorder#7928CA
  • tab.border#111111
  • tab.inactiveBackground#7928CA20
  • tab.inactiveForeground#FFFFFFaf
  • tab.unfocusedActiveBackground#7928CA40
  • tab.unfocusedActiveBorder#7928CA
  • tab.unfocusedActiveForeground#FFFFFF
  • tab.unfocusedInactiveBackground#7928CA10
  • tab.unfocusedInactiveForeground#FFFFFF7f
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#79FFE1
  • terminal.ansiBrightBlack#7928CA
  • terminal.ansiBrightBlue#79FFE1
  • terminal.ansiBrightCyan#AAFFEC
  • terminal.ansiBrightGreen#00C806
  • terminal.ansiBrightMagenta#FFF500
  • terminal.ansiBrightRed#FF0080
  • terminal.ansiBrightWhite#888888
  • terminal.ansiBrightYellow#FFF500
  • terminal.ansiCyan#AAFFEC
  • terminal.ansiGreen#00C806
  • terminal.ansiMagenta#FFF500
  • terminal.ansiRed#FF0080
  • terminal.ansiWhite#888888
  • terminal.ansiYellow#FFF500
  • terminalCursor.background#111111
  • terminalCursor.foreground#FFF500
  • textLink.activeForeground#FFFFFF
  • textLink.foreground#7928CA
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#11111160
  • titleBar.inactiveBackground#111111
  • titleBar.inactiveForeground#7928CA
  • tree.indentGuidesStroke#444444
  • widget.shadow#11111130

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#FFF500
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#00C806
constant.other.php#FFF500
constant.other.color#888888
invalid, invalid.illegal#FF0080
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#50E3C2
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#FFFFFF
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#FFFFFF
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#FFF500
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#50E3C2
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#79FFE1
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#AAFFEC
support.other.variable, string.other.link, markup.table#FFFFFF
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#FFF500
variable.parameter.function.language.special, variable.parameter#FF0080
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#00C806
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#FFF500
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#50E3C2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF0080
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#79FFE1italic
entity.other.attribute-name, support.function#FFF500
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#FFFFFF
source.scss keyword.control#FFF500
markup.inserted#00C806
markup.deleted#FF0080
markup.changed#FFF500
string.regexp#AAFFEC
constant.character.escape#AAFFEC
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#FFFFFFitalic
support.type.property-name.json#FFFFFF
text.html.markdown, punctuation.definition.list_item.markdown#FFFFFF
text.html.markdown markup.inline.raw.markdown#FFF500
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#7928CA50
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#50E3C2bold
markup.underline#79FFE1underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#7928CA50
markup.quoteitalic
string.other.link.description.title.markdown#FFF500
constant.other.reference.link.markdown#FFF500
markup.raw.block#FFF500
punctuation.definition.raw.markdown, punctuation.definition.markdown#AAFFEC
variable.language.fenced.markdown#7928CA
meta.separator#A7A8AFbold
token.info-token#7928CA
token.warn-token#FFF500
token.error-token#FF293B
token.debug-token#AAFFEC