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#02010A
  • activityBar.border#02010A60
  • activityBar.foreground#BE95C4
  • activityBarBadge.background#CDB4DB
  • activityBarBadge.foreground#02010A
  • badge.background#02010A30
  • badge.foreground#6D597A
  • breadcrumb.activeSelectionForeground#6D597A
  • breadcrumb.background#02010A
  • breadcrumb.focusForeground#BE95C4
  • breadcrumb.foreground#FB6F92
  • breadcrumbPicker.background#02010A
  • button.background#6D597A50
  • contrastBorder#6D597A40
  • debugToolBar.background#02010A
  • diffEditor.insertedTextBackground#6D597A15
  • diffEditor.removedTextBackground#BFDBF720
  • dropdown.background#02010A
  • dropdown.border#BE95C410
  • editor.background#02010A
  • editor.findMatchBackground#02010A
  • editor.findMatchBorder#6D597A
  • editor.findMatchHighlightBackground#6D597A93
  • editor.findMatchHighlightBorder#BE95C430
  • editor.foreground#BE95C4
  • editor.lineHighlightBackground#02010A50
  • editor.selectionBackground#CDB4DB30
  • editor.selectionHighlightBackground#6D597A6b
  • editor.selectionHighlightBorder#CDB4DBf0
  • editorBracketMatch.background#02010A
  • editorBracketMatch.border#FB6F927f
  • editorCursor.foreground#FB6F92
  • editorError.foreground#BFDBF770
  • editorGroup.border#02010A30
  • editorGroupHeader.tabsBackground#02010A
  • editorGutter.addedBackground#6D597A60
  • editorGutter.deletedBackground#BFDBF760
  • editorGutter.modifiedBackground#CDB4DB60
  • editorHoverWidget.background#02010A
  • editorHoverWidget.border#BE95C410
  • editorIndentGuide.activeBackground#5E548E
  • editorIndentGuide.background#5E548E70
  • editorInfo.foreground#CDB4DB70
  • editorLineNumber.activeForeground#CDB4DB
  • editorLineNumber.foreground#6D597Ac0
  • editorLink.activeForeground#BE95C4
  • editorMarkerNavigation.background#BE95C405
  • editorOverviewRuler.border#02010A
  • editorOverviewRuler.errorForeground#BFDBF740
  • editorOverviewRuler.findMatchForeground#6D597A
  • editorOverviewRuler.infoForeground#CDB4DB40
  • editorOverviewRuler.warningForeground#FB6F9270
  • editorRuler.foreground#5E548E
  • editorSuggestWidget.background#02010A
  • editorSuggestWidget.border#BE95C410
  • editorSuggestWidget.foreground#BE95C4
  • editorSuggestWidget.highlightForeground#FB6F92
  • editorSuggestWidget.selectedBackground#6D597A20
  • editorWarning.foreground#6D597A
  • editorWhitespace.foreground#BE95C440
  • editorWidget.background#02010A
  • editorWidget.border#FB6F92
  • editorWidget.resizeBorder#6D597A
  • extensionButton.prominentBackground#6D597A90
  • extensionButton.prominentHoverBackground#BFDBF7
  • focusBorder#BE95C400
  • gitDecoration.conflictingResourceForeground#FB6F92
  • gitDecoration.deletedResourceForeground#BFDBF7
  • gitDecoration.ignoredResourceForeground#6D597A
  • gitDecoration.modifiedResourceForeground#FB6F92
  • gitDecoration.untrackedResourceForeground#CDB4DB
  • input.background#231942
  • input.border#BE95C410
  • input.foreground#BE95C4
  • input.placeholderForeground#BE95C460
  • inputOption.activeBackground#BE95C430
  • inputOption.activeBorder#BE95C430
  • inputValidation.errorBorder#BFDBF750
  • inputValidation.infoBorder#CDB4DB50
  • inputValidation.warningBorder#FB6F9250
  • list.activeSelectionBackground#02010A
  • list.activeSelectionForeground#6D597A
  • list.focusBackground#231942
  • list.focusForeground#CDB4DB
  • list.highlightForeground#6D597A
  • list.hoverBackground#5E548E
  • list.hoverForeground#BE95C4
  • list.inactiveSelectionBackground#02010A30
  • list.inactiveSelectionForeground#6D597A
  • list.warningForeground#FB6F92
  • listFilterWidget.background#02010A30
  • listFilterWidget.noMatchesOutline#02010A30
  • listFilterWidget.outline#02010A30
  • menu.background#02010Af8
  • menu.border#6D597A50
  • menu.foreground#BE95C4
  • menu.selectionBackground#231942
  • menu.selectionBorder#02010A30
  • menu.selectionForeground#BE95C4
  • menu.separatorBackground#BE95C4
  • menubar.selectionBackground#231942
  • menubar.selectionBorder#6D597A50
  • menubar.selectionForeground#BE95C4
  • minimap.background#02010A
  • minimapGutter.addedBackground#BFDBF7
  • minimapGutter.deletedBackground#FB6F92
  • minimapGutter.modifiedBackground#6D597A
  • minimapSlider.activeBackground#6D597Ab0
  • minimapSlider.background#6D597A80
  • minimapSlider.hoverBackground#6D597Aa0
  • notificationLink.foreground#6D597A
  • notifications.background#02010A
  • notifications.foreground#BE95C4
  • panel.background#02010A
  • panel.border#02010A60
  • panelTitle.activeBorder#6D597A
  • panelTitle.activeForeground#BE95C4
  • panelTitle.inactiveForeground#BE95C4
  • peekView.border#02010A30
  • peekViewEditor.background#BE95C405
  • peekViewEditor.matchHighlightBackground#6D597A50
  • peekViewEditorGutter.background#BE95C405
  • peekViewResult.background#BE95C405
  • peekViewResult.matchHighlightBackground#6D597A50
  • peekViewResult.selectionBackground#6D597A70
  • peekViewTitle.background#BE95C405
  • peekViewTitleDescription.foreground#BE95C460
  • pickerGroup.foreground#6D597A
  • progressBar.background#6D597A
  • scrollbar.shadow#02010A00
  • scrollbarSlider.activeBackground#6D597Acc
  • scrollbarSlider.background#6D597Abb
  • scrollbarSlider.hoverBackground#6D597Aee
  • selection.background#6D597A
  • settings.checkboxBackground#02010A
  • settings.checkboxForeground#BE95C4
  • settings.dropdownBackground#02010A
  • settings.dropdownForeground#BE95C4
  • settings.headerForeground#6D597A
  • settings.modifiedItemIndicator#6D597A
  • settings.numberInputBackground#02010A
  • settings.numberInputForeground#BE95C4
  • settings.textInputBackground#02010A
  • settings.textInputForeground#BE95C4
  • sideBar.background#02010A
  • sideBar.border#6D597A50
  • sideBar.foreground#CDB4DB
  • sideBarSectionHeader.background#02010A
  • sideBarSectionHeader.border#02010A60
  • sideBarSectionHeader.foreground#CDB4DB
  • sideBarTitle.foreground#BE95C4
  • statusBar.background#04052E
  • statusBar.border#02010A60
  • statusBar.debuggingBackground#FB6F92
  • statusBar.debuggingForeground#BE95C4
  • statusBar.foreground#BFDBF7
  • statusBar.noFolderBackground#02010A
  • statusBarItem.hoverBackground#6D597A20
  • statusBarItem.remoteBackground#6D597A
  • statusBarItem.remoteForeground#02010A
  • tab.activeBackground#6D597A50
  • tab.activeBorder#6D597A
  • tab.activeForeground#BE95C4
  • tab.activeModifiedBorder#6D597A
  • tab.border#02010A
  • tab.inactiveBackground#6D597A20
  • tab.inactiveForeground#BE95C4af
  • tab.unfocusedActiveBackground#6D597A40
  • tab.unfocusedActiveBorder#6D597A
  • tab.unfocusedActiveForeground#BE95C4
  • tab.unfocusedInactiveBackground#6D597A10
  • tab.unfocusedInactiveForeground#BE95C47f
  • terminal.ansiBlack#02010A
  • terminal.ansiBlue#CDB4DB
  • terminal.ansiBrightBlack#6D597A
  • terminal.ansiBrightBlue#CDB4DB
  • terminal.ansiBrightCyan#CDB4DB
  • terminal.ansiBrightGreen#6D597A
  • terminal.ansiBrightMagenta#FB6F92
  • terminal.ansiBrightRed#BFDBF7
  • terminal.ansiBrightWhite#BE95C4
  • terminal.ansiBrightYellow#FB6F92
  • terminal.ansiCyan#CDB4DB
  • terminal.ansiGreen#6D597A
  • terminal.ansiMagenta#FB6F92
  • terminal.ansiRed#BFDBF7
  • terminal.ansiWhite#BE95C4
  • terminal.ansiYellow#FB6F92
  • terminalCursor.background#02010A
  • terminalCursor.foreground#FB6F92
  • textLink.activeForeground#BE95C4
  • textLink.foreground#6D597A
  • titleBar.activeBackground#02010A
  • titleBar.activeForeground#BE95C4
  • titleBar.border#02010A60
  • titleBar.inactiveBackground#02010A
  • titleBar.inactiveForeground#6D597A
  • tree.indentGuidesStroke#5E548E
  • widget.shadow#02010A30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#FB6F92
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#6D597A
constant.other.php#FB6F92
constant.other.color#BE95C4
invalid, invalid.illegal#BFDBF7
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#FB6F92
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#BE95C4
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#BE95C4
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#FB6F92
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#FB6F92
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#CDB4DB
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#CDB4DB
support.other.variable, string.other.link, markup.table#BE95C4
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#FB6F92
variable.parameter.function.language.special, variable.parameter#BFDBF7
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#6D597A
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#FB6F92
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#FB6F92
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#BFDBF7
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#CDB4DBitalic
entity.other.attribute-name, support.function#FB6F92
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#BE95C4
source.scss keyword.control#FB6F92
markup.inserted#6D597A
markup.deleted#BFDBF7
markup.changed#FB6F92
string.regexp#CDB4DB
constant.character.escape#CDB4DB
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#BE95C4italic
support.type.property-name.json#BE95C4
text.html.markdown, punctuation.definition.list_item.markdown#BE95C4
text.html.markdown markup.inline.raw.markdown#FB6F92
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#6D597A50
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#FB6F92bold
markup.underline#CDB4DBunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#6D597A50
markup.quoteitalic
string.other.link.description.title.markdown#FB6F92
constant.other.reference.link.markdown#FB6F92
markup.raw.block#FB6F92
punctuation.definition.raw.markdown, punctuation.definition.markdown#CDB4DB
variable.language.fenced.markdown#6D597A
meta.separator#A7A8AFbold
token.info-token#6D597A
token.warn-token#FB6F92
token.error-token#FF293B
token.debug-token#CDB4DB