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#000000
  • activityBar.border#C8A2C87f
  • activityBar.foreground#ffd3ff
  • activityBarBadge.background#dbbddb
  • activityBarBadge.foreground#654565fe
  • badge.background#00000030
  • badge.foreground#C8B6FF
  • breadcrumb.activeSelectionForeground#C8B6FF
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#BBD0FF
  • breadcrumb.foreground#9285BA
  • breadcrumbPicker.background#000000
  • button.background#C8B6FF50
  • contrastBorder#C8B6FF40
  • debugToolBar.background#000000
  • diffEditor.insertedTextBackground#E7C6FF15
  • diffEditor.removedTextBackground#FFD6FF20
  • dropdown.background#000000
  • dropdown.border#B8C0FF10
  • editor.background#000000
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#C8B6FF
  • editor.findMatchHighlightBackground#C8B6FF93
  • editor.findMatchHighlightBorder#B8C0FF30
  • editor.foreground#BBD0FF
  • editor.lineHighlightBackground#bbd0ff2f
  • editor.selectionBackground#b8c0ffbf
  • editor.selectionHighlightBackground#C8B6FF6b
  • editor.selectionHighlightBorder#B1A1E2f0
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#E7C6FF7f
  • editorCursor.foreground#E7C6FF
  • editorError.foreground#FFD6FF70
  • editorGroup.border#c5b7fad6
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#E7C6FF60
  • editorGutter.deletedBackground#FFD6FF60
  • editorGutter.modifiedBackground#B1A1E260
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#b8c0ff
  • editorIndentGuide.activeBackground#966592
  • editorIndentGuide.background#96659270
  • editorInfo.foreground#B1A1E270
  • editorLineNumber.activeForeground#bbd0ff
  • editorLineNumber.foreground#C8B6FFc0
  • editorLink.activeForeground#BBD0FF
  • editorMarkerNavigation.background#BBD0FF05
  • editorOverviewRuler.border#C5B7FA
  • editorOverviewRuler.errorForeground#FFD6FF40
  • editorOverviewRuler.findMatchForeground#C8B6FF
  • editorOverviewRuler.infoForeground#B1A1E240
  • editorOverviewRuler.warningForeground#E7C6FF70
  • editorRuler.foreground#966592
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#bbd0ff
  • editorSuggestWidget.foreground#BBD0FF
  • editorSuggestWidget.highlightForeground#E7C6FF
  • editorSuggestWidget.selectedBackground#C8B6FF20
  • editorWarning.foreground#E7C6FF
  • editorWhitespace.foreground#BBD0FF40
  • editorWidget.background#000000
  • editorWidget.border#E7C6FF
  • editorWidget.resizeBorder#C8B6FF
  • extensionButton.prominentBackground#E7C6FF90
  • extensionButton.prominentHoverBackground#FFD6FF
  • focusBorder#B8C0FF00
  • gitDecoration.conflictingResourceForeground#E7C6FF
  • gitDecoration.deletedResourceForeground#FFD6FF
  • gitDecoration.ignoredResourceForeground#C8B6FF
  • gitDecoration.modifiedResourceForeground#9285BA
  • gitDecoration.untrackedResourceForeground#B1A1E2
  • input.background#452a45
  • input.border#0a25f610
  • input.foreground#BBD0FF
  • input.placeholderForeground#BBD0FF60
  • inputOption.activeBackground#BBD0FF30
  • inputOption.activeBorder#BBD0FF30
  • inputValidation.errorBorder#FFD6FF50
  • inputValidation.infoBorder#B1A1E250
  • inputValidation.warningBorder#E7C6FF50
  • keybindingLabel.background#1f1443
  • keybindingLabel.border#C5B7FA
  • keybindingLabel.bottomBorder#C5B7FA
  • keybindingLabel.foreground#C5B7FA
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#C8B6FF
  • list.focusBackground#7E7E7E
  • list.focusForeground#B1A1E2
  • list.highlightForeground#C8B6FF
  • list.hoverBackground#966592
  • list.hoverForeground#B8C0FF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#C8B6FF
  • list.warningForeground#E7C6FF
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#000000f8
  • menu.border#bbd0ff
  • menu.foreground#BBD0FF
  • menu.selectionBackground#7E7E7E
  • menu.selectionBorder#00000030
  • menu.selectionForeground#BBD0FF
  • menu.separatorBackground#BBD0FF
  • menubar.selectionBackground#7E7E7E
  • menubar.selectionBorder#C8B6FF50
  • menubar.selectionForeground#BBD0FF
  • merge.currentContentBackground#c8b6ff77
  • merge.currentHeaderBackground#c8b6ff
  • merge.incomingContentBackground#bbd0ff4d
  • merge.incomingHeaderBackground#bbd0ff
  • minimap.background#000000
  • minimapGutter.addedBackground#FFD6FF
  • minimapGutter.deletedBackground#E7C6FF
  • minimapGutter.modifiedBackground#E7C6FF
  • minimapSlider.activeBackground#E7C6FFb0
  • minimapSlider.background#E7C6FF80
  • minimapSlider.hoverBackground#E7C6FFa0
  • notebook.cellBorderColor#C5B7FA
  • notebook.cellEditorBackground#000000
  • notebook.cellHoverBackground#ffd6ff5e
  • notebook.cellToolbarSeparator#ffd6ff
  • notebook.focusedCellBorder#bbd0ff
  • notebook.outputContainerBorderColor#b8c0ffaf
  • notificationCenter.border#000000b0
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#C5B7FA
  • notificationLink.foreground#C8B6FF
  • notifications.background#000000
  • notifications.foreground#BBD0FF
  • notificationsWarningIcon.foreground#ff0000
  • panel.background#000000
  • panel.border#C5B7FA7f
  • panelTitle.activeBorder#C8B6FF
  • panelTitle.activeForeground#B8C0FF
  • panelTitle.inactiveForeground#BBD0FF
  • peekView.border#ff000030
  • peekViewEditor.background#BBD0FF05
  • peekViewEditor.matchHighlightBackground#C8B6FF50
  • peekViewEditorGutter.background#BBD0FF05
  • peekViewResult.background#BBD0FF05
  • peekViewResult.matchHighlightBackground#C8B6FF50
  • peekViewResult.selectionBackground#C8B6FF70
  • peekViewTitle.background#BBD0FF05
  • peekViewTitleDescription.foreground#BBD0FF60
  • pickerGroup.foreground#C8B6FF
  • progressBar.background#C8B6FF
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#C8B6FFcc
  • scrollbarSlider.background#C8B6FFbb
  • scrollbarSlider.hoverBackground#C8B6FFee
  • selection.background#C8B6FF
  • settings.checkboxBackground#000000
  • settings.checkboxForeground#BBD0FF
  • settings.dropdownBackground#000000
  • settings.dropdownForeground#BBD0FF
  • settings.headerForeground#C8B6FF
  • settings.modifiedItemIndicator#C8B6FF
  • settings.numberInputBackground#000000
  • settings.numberInputForeground#BBD0FF
  • settings.textInputBackground#000000
  • settings.textInputForeground#BBD0FF
  • sideBar.background#000000
  • sideBar.border#c8b6ff7f
  • sideBar.foreground#b1a1e2c7
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#C8A2C8
  • sideBarSectionHeader.foreground#B1A1E2
  • sideBarTitle.foreground#BBD0FF
  • statusBar.background#c5b7faf3
  • statusBar.border#00000060
  • statusBar.debuggingBackground#b463ee
  • statusBar.debuggingForeground#B8C0FF
  • statusBar.foreground#382838
  • statusBar.noFolderBackground#000000
  • statusBarItem.hoverBackground#483f6420
  • statusBarItem.remoteBackground#C8B6FF
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#C8B6FF50
  • tab.activeBorder#C8B6FF
  • tab.activeForeground#B8C0FF
  • tab.activeModifiedBorder#C8B6FF
  • tab.border#3d3939
  • tab.inactiveBackground#C8B6FF20
  • tab.inactiveForeground#BBD0FFaf
  • tab.unfocusedActiveBackground#C8B6FF40
  • tab.unfocusedActiveBorder#C8B6FF
  • tab.unfocusedActiveForeground#BBD0FF
  • tab.unfocusedInactiveBackground#C8B6FF10
  • tab.unfocusedInactiveForeground#BBD0FF7f
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#B1A1E2
  • terminal.ansiBrightBlack#C8B6FF
  • terminal.ansiBrightBlue#B1A1E2
  • terminal.ansiBrightCyan#C8B6FF
  • terminal.ansiBrightGreen#E7C6FF
  • terminal.ansiBrightMagenta#E7C6FF
  • terminal.ansiBrightRed#FFD6FF
  • terminal.ansiBrightWhite#B8C0FF
  • terminal.ansiBrightYellow#E7C6FF
  • terminal.ansiCyan#C8B6FF
  • terminal.ansiGreen#E7C6FF
  • terminal.ansiMagenta#E7C6FF
  • terminal.ansiRed#FFD6FF
  • terminal.ansiWhite#B8C0FF
  • terminal.ansiYellow#E7C6FF
  • terminalCursor.background#000000
  • terminalCursor.foreground#E7C6FF
  • textLink.activeForeground#BBD0FF
  • textLink.foreground#C8B6FF
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#BBD0FF
  • titleBar.border#C5B7FA
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#C8B6FF
  • tree.indentGuidesStroke#966592
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#ba5df7
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#E7C6FF
constant.other.php#E7C6FF
constant.other.color#B8C0FF
invalid, invalid.illegal#FFD6FF
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#9285BA
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#BBD0FF
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, comment.line.number-sign.python#d26a79
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#BBD0FF
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#E7C6FF
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#9285BA
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, keyword.control.flow.python#B1A1E2
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#C8B6FF
support.other.variable, string.other.link, markup.table#BBD0FF
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#E7C6FF
variable.parameter.function.language.special, variable.parameter#FFD6FF
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#E7C6FF
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#E7C6FF
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#9285BA
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FFD6FF
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#B1A1E2italic
entity.other.attribute-name, support.function#E7C6FF
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#ffb8d3
source.scss keyword.control#E7C6FF
markup.inserted#E7C6FF
markup.deleted#FFD6FF
markup.changed#E7C6FF
string.regexp#C8B6FF
constant.character.escape#C8B6FF
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#BBD0FFitalic
support.type.property-name.json#BBD0FF
text.html.markdown, punctuation.definition.list_item.markdown#BBD0FF
text.html.markdown markup.inline.raw.markdown#E7C6FF
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#C8B6FF50
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#9285BAbold
markup.underline#B1A1E2underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#C8B6FF50
markup.quoteitalic
string.other.link.description.title.markdown#E7C6FF
constant.other.reference.link.markdown#E7C6FF
markup.raw.block#E7C6FF
punctuation.definition.raw.markdown, punctuation.definition.markdown#C8B6FF
variable.language.fenced.markdown#C8B6FF
meta.separator#A7A8AFbold
token.info-token#C8B6FF
token.warn-token#E7C6FF
token.error-token#FF293B
token.debug-token#C8B6FF