Purplest, Inc. UI and Syntax Theme for VSCode

Name: Purplest, Inc. UI and Syntax Theme for VSCode
Author: Purplest Inc.

Publisher: Purplest Inc.Themes in package: 1

A purple accented UI and Syntax theme for the Visual Studio Code text editor.

Open in VS Code GitHub

VS Code preview

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

Purplest, Inc. UI and Syntax Theme for VSCode — Purplest, Inc. UI and Syntax

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#1c1c1c
activityBar.foreground#aaaaaa
activityBarBadge.background#8b00f2
activityBarBadge.foreground#ffffff
button.background#6b00b9
button.foreground#ffffff
button.hoverBackground#8800ec
diffEditor.insertedTextBackground#80808033
dropdown.background#444444
dropdown.border#181818
editor.background#1a1a1a
editor.foreground#cda4ec
editor.inactiveSelectionBackground#2a2a2a
editor.lineHighlightBackground#2a2a2a
editor.selectionBackground#222
editor.selectionHighlightBackground#5A5A5A40
editorCursor.foreground#ffffff
editorGroup.background#222222
editorGroup.border#181818
editorGroupHeader.tabsBackground#222222
editorHoverWidget.background#222222
editorHoverWidget.border#181818
editorIndentGuide.background#3c3c3c
editorLineNumber.foreground#9a9a9a
editorSuggestWidget.background#222222
editorSuggestWidget.border#181818
editorSuggestWidget.selectedBackground#2a2a2a
editorWhitespace.foreground#3c3c3c
editorWidget.background#222222
focusBorder#6b00b9
input.background#222222
input.border#0a0a0a
list.activeSelectionBackground#2a2a2a
list.activeSelectionForeground#aaaaaa
list.dropBackground#383b3d
list.focusBackground#2a2a2a
list.highlightForeground#aaaaaa
list.hoverBackground#2a2a2a
list.inactiveSelectionBackground#2a2a2a
list.inactiveSelectionForeground#aaaaaa
notification.background#222222
pickerGroup.border#6b00b9
scrollbarSlider.activeBackground#75757580
scrollbarSlider.background#4e4e4e80
scrollbarSlider.hoverBackground#5a5a5a80
sideBar.background#222222
sideBarSectionHeader.background#222222
sideBarTitle.foreground#bbbbbb
statusBar.background#222222
statusBar.debuggingForeground#ffffff
statusBar.foreground#aaaaaa
statusBar.noFolderBackground#222222
statusBarItem.hoverBackground#2a2a2a
tab.activeBackground#1a1a1a
tab.border#6b00b9
tab.inactiveBackground#222222
titleBar.activeBackground#6b00b9
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#222222
titleBar.inactiveForeground#aaaaaa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#9A9A9A	—
markup.bold.markdown	—	bold
comment, punctuation.definition.comment, markup.italic.markdown	—	italic
url, link, uri, meta.function.url.css, support.function.any-method.builtin.url.css	—	underline
comment, punctuation.definition.comment	#5A5A5A	—
invalid, invalid.illegal	#FF4040	—
variable.parameter.function, meta.tag.block.any.html, text.html.basic, property-value.css, punctuation.section.embedded, variable.interpolation, source.php.embedded.block.html, meta.embedded.block.php, meta.delimiter, variable.interpolation, source.php.embedded.block.html, meta.brace.square, meta.brace.round, meta.brace.curly, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.function.begin.bracket.square.css, punctuation.section.function.end.bracket.square.css, punctuation.section.function.begin.bracket.curly.css, punctuation.section.function.end.bracket.curly.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.scope.begin.php, punctuation.section.scope.end.php, punctuation.terminator.rule.css, punctuation.bracket.round.java, punctuation.bracket.square.java, punctuation.definition.annotation-arguments.begin.bracket.round.java, punctuation.definition.annotation-arguments.end.bracket.round.java, punctuation.section.block.begin.bracket.curly.java, punctuation.section.block.end.bracket.curly.java, punctuation.section.catch.begin.bracket.curly.java, punctuation.section.catch.end.bracket.curly.java, punctuation.section.inner-class.begin.bracket.curly.java, punctuation.section.inner-class.end.bracket.curly.java, punctuation.section.method.begin.bracket.curly.java, punctuation.section.method.end.bracket.curly.java, punctuation.section.try.begin.bracket.curly.java, punctuation.section.try.end.bracket.curly.java, punctuation.section.class.begin.bracket.curly.java, punctuation.section.class.end.bracket.curly.java, punctuation.section.method.begin.bracket.curly.java, punctuation.section.method.end.bracket.curly.java, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.section.array.begin.php, punctuation.section.array.end.php, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, punctuation.definition.begin.bracket.curly.php, punctuation.definition.end.bracket.curly.php, punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, support.function.name.sass.no-completions, source.coffee, source.python, source.ruby, source.sass, source.sql, text.xml, punctuation.definition.tag.xml, meta.paragraph.markdown, markup.underline.link.markdown, markup.raw.block.markdown, variable.parameter.function.coffee	#cda4ec	—
meta.function.prototype, meta.block.js, meta.property-list.css.sass, punctuation.definition.block.js, punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array, punctuation.terminator.statement, punctuation.definition.tag, punctuation.section.embedded, punctuation.section.property-list.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.definition.entity.css, punctuation.separator.java, punctuation.separator.period.java, punctuation.terminator.java, storage.type.primitive.java, punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json, punctuation.separator.comma.js, punctuation.separator.parameter.js, punctuation.terminator.expression.php, punctuation.separator.delimiter.php, punctuation.separator.list.comma.css, punctuation.separator.element.python, punctuation.separator.colon.python, punctuation.section.function.begin.python, punctuation.section.function.end.python, punctuation.section.class.begin.python, punctuation.section.class.end.python, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python, punctuation.definition.constant.ruby, punctuation.separator.method.ruby, punctuation.definition.parameters.ruby, punctuation.separator.namespace.ruby, punctuation.section.array.begin.ruby, punctuation.section.array.end.ruby, punctuation.separator.arguments.ruby, string.quoted.single.sql, string, constant.other.symbol, entity.other.inherited-class, constant, support.constant.std.php, support.constant.media-type.media.css, support.type.property-name.media.css, meta.delimiter.method.period.coffee, storage.modifier.java, constant.other.symbol.ruby	#c28beb	—
keyword.operator, meta.function.arguments.php, meta.tag.inline.any.html, storage, storage.type, keyword.operator.assignment.python, meta.tag.xml, meta.tag.preprocessor.xml, meta.tag.any.html, storage.type.java, meta.class.identifier.java, punctuation.separator.key-value, keyword.operator.assignment.ruby, keyword.operator.logical.ruby, keyword.operator.other.ruby, keyword.operator.comparison.sql	#b871eb	—
entity.other.attribute-name, entity.other.attribute-name.html, constant.other.color, string.regexp, constant.character.escape, keyword.other.unit, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json, variable, variable.parameter.function.coffee, variable.parameter.function.ruby, constant.other.color.rgb-value.hex.css, entity.other.attribute-selector.sass, punctuation.definition.keyword.css, punctuation.definition.keyword.less, punctuation.definition.variable.less, punctuation.definition.variable.php, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.constant.markdown, punctuation.definition.markdown, punctuation.definition.raw.markdown, string.quoted.double.css.sass, punctuation.definition.string.begin.coffee, punctuation.definition.string.end.coffee, punctuation.definition.string.begin.css, punctuation.definition.string.end.css, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.begin.java, punctuation.definition.string.end.java, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.php, punctuation.definition.string.end.php, punctuation.definition.string.begin.python, punctuation.definition.string.end.python, punctuation.definition.string.begin.ruby, punctuation.definition.string.end.ruby, punctuation.definition.string.begin.sql, punctuation.definition.string.end.sql, punctuation.definition.metadata.markdown, punctuation.definition.begin.entity.css, punctuation.definition.end.entity.css, punctuation.definition.constant.xml, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, constant.character.entity.xml	#ad56ec	—
entity.other.attribute-name.id, punctuation.definition.entity, entity.name.function, meta.require, support.function.any-method, markup.heading.setext.1.markdown, markup.heading punctuation.definition.heading, punctuation.definition.heading.markdown, beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, entity.name.section, keyword.other.special-method, meta.property-name.css, support.type.property-name.css, support.function.misc.css, support.function, support.variable.dom.js, support.variable.property.dom.js, meta.function-call.js, support.variable.property.js, support.function.aggregate.sql	#a33aef	—
keyword, keyword.control, constant.language, support.type.property-name.json, keyword.control.coffee, keyword.control.java, keyword.control.class.ruby, keyword.other.DML.sql, keyword.control.at-rule.css.sass	#991df3	—
meta.class, support.class, entity.name.class, entity.name.type.class, meta.function-call.object.php, modifier.extends.php, entity.other.inherited-class.php, attribute-name.class.css, attribute-name.pseudo-element.css, entity.other.attribute-name.class.css, constant.numeric, entity.name.tag, meta.selector, meta.property-value.css, meta.separator, markup.changed, variable.argument.css, fenced_code.block.language, entity.name.section.markdown, constant.numeric.ruby, entity.other.inherited-class.ruby, entity.name.type.module.ruby	#8229c3	—

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}!`;
}