Pi Etsy Theme

Name: Pi Etsy Theme
Author: Andres Billini

Publisher: Andres BilliniThemes in package: 1

Pi Etsy Dark Theme for VS Code

GitHub

VS Code preview

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

Pi Etsy Theme — Pi Etsy Theme

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#3E1C53
activityBar.border#FAA077
activityBar.foreground#F8EBE6
activityBarBadge.background#E5E1F0
activityBarBadge.foreground#3E1C53
badge.background#3E1C5330
badge.foreground#FAA077
breadcrumb.activeSelectionForeground#FAA077
breadcrumb.background#3E1C53
breadcrumb.focusForeground#F8EBE6
breadcrumb.foreground#E5E1F0
breadcrumbPicker.background#3E1C53
button.background#FAA07750
contrastBorder#FAA077AA
debugToolBar.background#3E1C53
diffEditor.insertedTextBackground#FAA07715
diffEditor.removedTextBackground#F592B820
dropdown.background#3E1C53
dropdown.border#FAA077
editor.background#654B77
editor.findMatchBackground#3E1C53
editor.findMatchBorder#FAA077
editor.findMatchHighlightBackground#FAA07793
editor.findMatchHighlightBorder#FAA077
editor.foreground#F8EBE6
editor.lineHighlightBackground#3E1C5350
editor.selectionBackground#E5E1F030
editor.selectionHighlightBackground#FAA0776b
editor.selectionHighlightBorder#E5E1F0f0
editorBracketMatch.background#3E1C53
editorBracketMatch.border#FAA077
editorCursor.foreground#FAA129
editorError.foreground#F592B870
editorGroup.border#FAA077
editorGroupHeader.tabsBackground#3E1C53
editorGutter.addedBackground#FAA07760
editorGutter.deletedBackground#F592B8
editorGutter.modifiedBackground#E5E1F060
editorHoverWidget.background#3E1C53
editorHoverWidget.border#FAA077
editorIndentGuide.activeBackground#3E1C53
editorIndentGuide.background#3E1C5370
editorInfo.foreground#E5E1F070
editorLineNumber.activeForeground#E5E1F0
editorLineNumber.foreground#FAA077c0
editorLink.activeForeground#F8EBE6
editorMarkerNavigation.background#F8EBE605
editorOverviewRuler.border#FAA077
editorOverviewRuler.errorForeground#F592B840
editorOverviewRuler.findMatchForeground#FAA077
editorOverviewRuler.infoForeground#E5E1F040
editorOverviewRuler.warningForeground#FAA12970
editorRuler.foreground#3E1C53
editorSuggestWidget.background#3E1C53
editorSuggestWidget.border#FAA077
editorSuggestWidget.foreground#F8EBE6
editorSuggestWidget.highlightForeground#FAA129
editorSuggestWidget.selectedBackground#FAA07720
editorWarning.foreground#FAA077
editorWhitespace.foreground#F8EBE640
editorWidget.background#3E1C53
editorWidget.border#FAA129
editorWidget.resizeBorder#FAA077
extensionButton.prominentBackground#FAA07790
extensionButton.prominentHoverBackground#F592B8
focusBorder#F8EBE600
gitDecoration.conflictingResourceForeground#FAA129
gitDecoration.deletedResourceForeground#F592B8
gitDecoration.ignoredResourceForeground#FAA077
gitDecoration.modifiedResourceForeground#E5E1F0
gitDecoration.untrackedResourceForeground#E5E1F0
input.background#654B77
input.border#F8EBE610
input.foreground#F8EBE6
input.placeholderForeground#F8EBE660
inputOption.activeBackground#F8EBE630
inputOption.activeBorder#F8EBE630
inputValidation.errorBorder#F592B850
inputValidation.infoBorder#E5E1F050
inputValidation.warningBorder#FAA12950
list.activeSelectionBackground#3E1C53
list.activeSelectionForeground#FAA077
list.focusBackground#FAA077
list.focusForeground#E5E1F0
list.highlightForeground#FAA077
list.hoverBackground#3E1C53
list.hoverForeground#F8EBE6
list.inactiveSelectionBackground#3E1C5330
list.inactiveSelectionForeground#FAA077
list.warningForeground#FAA129
listFilterWidget.background#3E1C5330
listFilterWidget.noMatchesOutline#3E1C5330
listFilterWidget.outline#3E1C5330
menu.background#3E1C53f8
menu.border#FAA077
menu.foreground#F8EBE6
menu.selectionBackground#FAA077
menu.selectionBorder#FAA077
menu.selectionForeground#F8EBE6
menu.separatorBackground#F8EBE6
menubar.selectionBackground#FAA077
menubar.selectionBorder#FAA07750
menubar.selectionForeground#F8EBE6
minimap.background#3E1C53
minimapGutter.addedBackground#F592B8
minimapGutter.deletedBackground#FAA129
minimapGutter.modifiedBackground#FAA077
minimapSlider.activeBackground#FAA077b0
minimapSlider.background#FAA07780
minimapSlider.hoverBackground#FAA077a0
notificationLink.foreground#FAA077
notifications.background#3E1C53
notifications.foreground#F8EBE6
panel.background#3E1C53
panel.border#FAA077
panelTitle.activeBorder#FAA077
panelTitle.activeForeground#F8EBE6
panelTitle.inactiveForeground#F8EBE6
peekView.border#3E1C5330
peekViewEditor.background#F8EBE605
peekViewEditor.matchHighlightBackground#FAA077
peekViewEditorGutter.background#F8EBE605
peekViewResult.background#F8EBE605
peekViewResult.matchHighlightBackground#FAA077
peekViewResult.selectionBackground#FAA07770
peekViewTitle.background#F8EBE605
peekViewTitleDescription.foreground#F8EBE660
pickerGroup.foreground#FAA077
progressBar.background#FAA077
scrollbar.shadow#3E1C5300
scrollbarSlider.activeBackground#FAA077cc
scrollbarSlider.background#FAA077bb
scrollbarSlider.hoverBackground#FAA077ee
selection.background#FAA077
settings.checkboxBackground#3E1C53
settings.checkboxForeground#F8EBE6
settings.dropdownBackground#3E1C53
settings.dropdownForeground#F8EBE6
settings.headerForeground#FAA077
settings.modifiedItemIndicator#FAA077
settings.numberInputBackground#3E1C53
settings.numberInputForeground#F8EBE6
settings.textInputBackground#3E1C53
settings.textInputForeground#F8EBE6
sideBar.background#3E1C53
sideBar.border#FAA077
sideBar.foreground#E5E1F0
sideBarSectionHeader.background#3E1C53
sideBarSectionHeader.border#FAA077
sideBarSectionHeader.foreground#E5E1F0
sideBarTitle.foreground#F8EBE6
statusBar.background#F8EBE6
statusBar.border#FAA077
statusBar.debuggingBackground#FAA129
statusBar.debuggingForeground#F8EBE6
statusBar.foreground#654B77
statusBar.noFolderBackground#3E1C53
statusBarItem.hoverBackground#FAA07720
statusBarItem.remoteBackground#FAA077
statusBarItem.remoteForeground#3E1C53
tab.activeBackground#654B77
tab.activeBorder#FAA077
tab.activeForeground#F8EBE6
tab.activeModifiedBorder#FAA077
tab.border#3E1C53
tab.inactiveBackground#FAA07720
tab.inactiveForeground#F8EBE6af
tab.unfocusedActiveBackground#FAA07740
tab.unfocusedActiveBorder#FAA077
tab.unfocusedActiveForeground#F8EBE6
tab.unfocusedInactiveBackground#FAA07710
tab.unfocusedInactiveForeground#F8EBE67f
terminal.ansiBlack#3E1C53
terminal.ansiBlue#E5E1F0
terminal.ansiBrightBlack#FAA077
terminal.ansiBrightBlue#E5E1F0
terminal.ansiBrightCyan#E5E1F0
terminal.ansiBrightGreen#FAA077
terminal.ansiBrightMagenta#FAA129
terminal.ansiBrightRed#F592B8
terminal.ansiBrightWhite#F8EBE6
terminal.ansiBrightYellow#FAA129
terminal.ansiCyan#E5E1F0
terminal.ansiGreen#FAA077
terminal.ansiMagenta#FAA129
terminal.ansiRed#F592B8
terminal.ansiWhite#F8EBE6
terminal.ansiYellow#FAA129
terminalCursor.background#3E1C53
terminalCursor.foreground#FAA129
textLink.activeForeground#F8EBE6
textLink.foreground#FAA077
titleBar.activeBackground#3E1C53
titleBar.activeForeground#F8EBE6
titleBar.border#FAA077
titleBar.inactiveBackground#3E1C53
titleBar.inactiveForeground#FAA077
tree.indentGuidesStroke#3E1C53
widget.shadow#3E1C5330

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier	#FAA129	—
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	—	italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#FAA077	—
constant.other.php	#FAA129	—
constant.other.color	#F8EBE6	—
invalid, invalid.illegal	#F592B8	—
Keyword, Storage	—	italic
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	#E5E1F0	—
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	#F8EBE6	—
punctuation.definition, string.quoted.single.scss	#A7A8AF	—
keyword.control	—	bold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html	#6D6F7C	italic
text.html.derivative	#A7A8AF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#F8EBE6	—
entity.name.tag.html	—	bold
variable.parameter.js, variable.parameter.keyframe-list.css	#FAA129	—
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js	#E5E1F0
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	#E5E1F0	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#E5E1F0	—
support.other.variable, string.other.link, markup.table	#F8EBE6	—
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html	#FAA129	—
variable.parameter.function.language.special, variable.parameter	#F592B8	—
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	#FAA077
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	#FAA129	—
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	#E5E1F0	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#F592B8	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#E5E1F0	italic
entity.other.attribute-name, support.function	#FAA129	—
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	#F8EBE6	—
source.scss keyword.control	#FAA129	—
markup.inserted	#FAA077	—
markup.deleted	#F592B8	—
markup.changed	#FAA129	—
string.regexp	#E5E1F0	—
constant.character.escape	#E5E1F0	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js	#F8EBE6	italic
support.type.property-name.json	#F8EBE6	—
text.html.markdown, punctuation.definition.list_item.markdown	#F8EBE6	—
text.html.markdown markup.inline.raw.markdown	#FAA129	—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown	#FAA07750	—
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	#E5E1F0	bold
markup.underline	#E5E1F0	underline
markup.strike	—
markup.quote punctuation.definition.blockquote.markdown	#FAA07750	—
markup.quote	—	italic
string.other.link.description.title.markdown	#FAA129	—
constant.other.reference.link.markdown	#FAA129	—
markup.raw.block	#FAA129	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#E5E1F0	—
variable.language.fenced.markdown	#FAA077	—
meta.separator	#A7A8AF	bold
token.info-token	#FAA077	—
token.warn-token	#FAA129	—
token.error-token	#FF293B	—
token.debug-token	#E5E1F0	—

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