Functional Purple

Name: Functional Purple
Author: Josh Davies

Publisher: Josh DaviesThemes in package: 3

Functional Purple theme for VS Code

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Functional Purple — Functional Purple

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#Eb345C13
activityBar.activeBorder#Eb345C
activityBar.activeFocusBorder#Eb345C
activityBar.background#130f1a
activityBar.dropBorder#Eb345C
activityBar.inactiveForeground#cccccc
activityBarBadge.background#b36ae2
activityBarBadge.foreground#000000
badge.background#b36ae2
badge.foreground#000000
button.background#b36ae2
button.foreground#000000
button.hoverBackground#9558bc
checkbox.background#261f34
diffEditor.insertedTextBackground#78BD6530
diffEditor.removedTextBackground#F0717135
dropdown.background#261f34
dropdown.border#2d253e
editor.background#1d1727
editor.findMatchBorder#Eb345C
editor.findMatchHighlightBackground#ffffff30
editor.foldBackground#b36ae230
editor.foreground#ffffff
editor.lineHighlightBackground#261f34
editor.selectionBackground#Eb345C30
editorBracketMatch.background#191422
editorBracketMatch.border#b82947
editorCursor.background#ffffff
editorCursor.foreground#Eb345C
editorError.foreground#F07171
editorGroup.border#130f1a
editorGroup.dropBackground#Eb345C30
editorGroupHeader.noTabsBackground#261f34
editorGroupHeader.tabsBackground#261f34
editorGutter.addedBackground#78BD65
editorGutter.deletedBackground#F07171
editorGutter.modifiedBackground#EB4D5C
editorHoverWidget.border#302641
editorIndentGuide.activeBackground#Eb345C
editorIndentGuide.background#302641
editorInfo.foreground#399EE6
editorLineNumber.activeForeground#9886b7
editorLineNumber.foreground#4d3d67
editorLink.activeForeground#Eb345C
editorMarkerNavigation.background#1d1727
editorMarkerNavigationError.background#F07171
editorMarkerNavigationInfo.background#399EE6
editorMarkerNavigationWarning.background#EF7C2A
editorOverviewRuler.addedForeground#EB4D5C
editorOverviewRuler.border#302641
editorOverviewRuler.bracketMatchForeground#Eb345C
editorOverviewRuler.deletedForeground#EB4D5C
editorOverviewRuler.errorForeground#F07171
editorOverviewRuler.infoForeground#399EE6
editorOverviewRuler.modifiedForeground#EB4D5C
editorOverviewRuler.selectionHighlightForeground#Eb345C
editorOverviewRuler.warningForeground#EF7C2A
editorPane.background#15111d
editorRuler.foreground#302641
editorSuggestWidget.background#261f34
editorSuggestWidget.border#302641
editorSuggestWidget.highlightForeground#b36ae2
editorWarning.foreground#EF7C2A
editorWhitespace.foreground#43355a
editorWidget.background#1d1727
editorWidget.resizeBorder#302641
errorForeground#F07171
extensionButton.prominentBackground#b36ae2
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#8a52af
focusBorder#Eb345C
foreground#ffffff
gitDecoration.addedResourceForeground#78BD65
gitDecoration.deletedResourceForeground#F07171
gitDecoration.modifiedResourceForeground#EB4D5C
gitDecoration.stageDeletedResourceForeground#F07171
gitDecoration.stageModifiedResourceForeground#EB4D5C
input.background#261f34
input.border#2d253e
inputValidation.errorBackground#F0717190
inputValidation.errorBorder#F07171
inputValidation.errorForeground#000000
inputValidation.infoBackground#399EE690
inputValidation.infoBorder#399EE6
inputValidation.infoForeground#000000
inputValidation.warningBackground#EF7C2A90
inputValidation.warningBorder#EF7C2A
inputValidation.warningForeground#000000
list.activeSelectionBackground#Eb345C20
list.errorForeground#F07171
list.focusBackground#Eb345C30
list.highlightForeground#b36ae2
list.hoverBackground#292037
list.inactiveSelectionBackground#Eb345C25
list.warningForeground#EF7C2A
menu.background#1d1727
menu.foreground#ffffff
menu.selectionBackground#Eb345CDD
menu.selectionForeground#ffffff
menu.separatorBackground#43355a
minimap.errorHighlight#F07171
minimap.selectionHighlight#Eb345C80
minimap.warningHighlight#EF7C2A
minimapGutter.addedBackground#78BD65
minimapGutter.deletedBackground#F07171
minimapGutter.modifiedBackground#EB4D5C
notebook.focusedRowBorder#Eb345C
notifications.background#1d1727
notificationsErrorIcon.foreground#F07171
notificationsInfoIcon.foreground#399EE6
notificationsWarningIcon.foreground#EF7C2A
panel.dropBorder#Eb345C
panelTitle.activeBorder#Eb345C
peekViewResult.background#261f34
peekViewTitle.background#130f1a
pickerGroup.border#0a080e
pickerGroup.foreground#Eb345C
problemsErrorIcon.foreground#F07171
problemsInfoIcon.foreground#399EE6
problemsWarningIcon.foreground#EF7C2A
progressBar.background#Eb345C
scrollbar.shadow#050407
scrollbarSlider.activeBackground#43355a40
scrollbarSlider.background#56447450
scrollbarSlider.hoverBackground#69538d40
selection.background#Eb345C80
settings.modifiedItemIndicator#EB4D5C
sideBar.background#181321
sideBarSectionHeader.background#211a2e
statusBar.background#130f1a
statusBarItem.hoverBackground#261e33
statusBarItem.prominentBackground#Eb345C
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#d22e51
tab.activeBackground#1d1727
tab.activeBorder#Eb345C
tab.activeModifiedBorder#EB4D5C
tab.border#302641
tab.hoverBackground#302641
tab.inactiveBackground#261f34
tab.lastPinnedBorder#Eb345C50
terminal.selectionBackground#Eb345C
terminalCursor.background#ffffff
terminalCursor.foreground#Eb345C
textLink.activeForeground#b36ae2
textLink.foreground#b36ae2
textPreformat.foreground#b36ae2
textSeparator.foreground#0a080e
titleBar.activeBackground#261f34
titleBar.border#2a2239
titleBar.inactiveBackground#1d1727
widget.shadow#050407

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid	#F07171	—
meta.embedded, source.groovy.embedded, meta.template.expression	#ffffff	—
variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable	#ffffff	—
comment, punctuation.definition.comment	#5f4c80	—
string, punctuation.definition.string	#Eb345C	—
constant.character.escape	#b36ae2	—
keyword, constant.language.import-export-all	#b36ae2	—
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type	#b36ae2	—
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new	#b36ae2	—
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class	#b36ae2	—
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded	#b36ae2	—
constant	#b36ae2	—
constant.numeric, constant.language	#b36ae2	—
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust	#b36ae2	—
punctuation, meta.brace	#a6a6a6	—
comment.block.documentation entity.name.type	#b36ae2	—
variable.language.this, variable.language.special.self	#b36ae2	—
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype	#a6a6a6	—
entity.name.tag	#b36ae2	—
meta.tag string	#Eb345C	—
meta.attribute punctuation.definition.string	#a6a6a6	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#b36ae2	—
constant.character.entity, punctuation.definition.entity	#b36ae2	—
entity.name.section.markdown, markup.heading.setext	#b36ae2	—
punctuation.definition.list	#b36ae2	—
meta.separator.markdown	#b36ae2	—
markup.inline.raw	#b36ae2	—
markup.bold	—	bold
markup.italic	—	italic
meta.link punctuation.definition.string, meta.image punctuation.definition.string	#a6a6a6	—
link, markup.underline.link, constant.other.reference.link.markdown	#b36ae2	—
markup.quote	#b36ae2	—
entity.name.tag.css, entity.name.tag.wildcard	#Eb345C	—
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity	#b36ae2	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color	#b36ae2	—
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity	#b36ae2	—
source.css constant.numeric	#Eb345C	—
meta.property-name, support.type.property-name	#b36ae2	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#b36ae2	—
variable.parameter.url	#b36ae2	—
punctuation.definition.variable	#ffffff	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#b36ae2	—
entity.name.section	#b36ae2	—
support.type.property-name.json	#b36ae2	—
markup.inserted	#78BD65	—
markup.changed	#EB4D5C	—
markup.deleted	#F07171	—
meta.diff.header	#EB4D5C	italic
meta.diff.range	#b36ae2	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}