Pillirioen

Name: Pillirioen
Author: Benjamin Vasquez

Publisher: Benjamin VasquezThemes in package: 2

Colorful Visual Studio Code Dark Theme.

Open in VS Code GitHub

Color themes

VS Code preview

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

Pillirioen — Pillirioen

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.activeBorder#FF206E
activityBar.background#21262D
activityBar.border#101316
activityBar.foreground#9199A1
activityBar.inactiveForeground#484c50
activityBarBadge.background#bf1852
activityBarBadge.foreground#21262D
badge.background#FF206E
badge.foreground#21262D
breadcrumb.activeSelectionForeground#b5bfc9
breadcrumb.focusForeground#9199A1
breadcrumb.foreground#6c7278
breadcrumbPicker.background#181c21
button.background#bf1852
button.foreground#21262D
button.hoverBackground#ff2889
button.secondaryBackground#7f1037
button.secondaryForeground#21262D
button.secondaryHoverBackground#FF206E
checkbox.background#181c21
checkbox.border#101316
debugToolBar.background#101316
descriptionForeground#9199A1
diffEditor.insertedTextBackground#7DDE9226
diffEditor.removedTextBackground#B80C0926
dropdown.background#181c21
dropdown.border#101316
dropdown.foreground#9199A1
dropdown.listBackground#181c21
editor.background#21262D
editor.findMatchBackground#6c7278
editor.findMatchHighlightBackground#484c50
editor.focusedStackFrameHighlightBackground#75621a
editor.foldBackground#181c21
editor.foreground#9199A1
editor.inactiveSelectionBackground#484c50
editor.lineHighlightBackground#292f38
editor.linkedEditingBackground#FFFFFF00
editor.selectionBackground#484c50
editor.selectionHighlightBackground#FFFFFF00
editor.selectionHighlightBorder#9199A1
editor.stackFrameHighlightBackground#3a310d
editor.wordHighlightBackground#FFFFFF00
editor.wordHighlightBorder#9199A13f
editor.wordHighlightStrongBackground#FFFFFF00
editor.wordHighlightStrongBorder#9199A17f
editorBracketMatch.background#484c50
editorBracketMatch.border#FFFFFF00
editorCursor.foreground#9199A1
editorError.foreground#B80C09
editorGroup.border#292f38
editorGroupHeader.tabsBackground#08090b
editorGroupHeader.tabsBorder#101316
editorGutter.addedBackground#7DDE92
editorGutter.deletedBackground#B80C09
editorGutter.modifiedBackground#7F7EFF
editorIndentGuide.activeBackground#484c50
editorIndentGuide.background#313943
editorLineNumber.activeForeground#9199A1
editorLineNumber.foreground#484c50
editorOverviewRuler.border#FFFFFF00
editorWarning.foreground#EAC435
editorWhitespace.foreground#484c50
editorWidget.background#08090b
errorForeground#B80C09
focusBorder#FFFFFF00
foreground#9199A1
gitDecoration.addedResourceForeground#7DDE92
gitDecoration.conflictingResourceForeground#EAC435
gitDecoration.deletedResourceForeground#B80C09
gitDecoration.ignoredResourceForeground#484c50
gitDecoration.modifiedResourceForeground#7F7EFF
gitDecoration.submoduleResourceForeground#7DDE92
gitDecoration.untrackedResourceForeground#EAC435
input.background#181c21
input.border#101316
input.foreground#9199A1
input.placeholderForeground#484c50
list.activeSelectionBackground#21262D
list.activeSelectionForeground#9199A1
list.focusBackground#313943
list.hoverBackground#21262D
list.hoverForeground#d9e5f1
list.inactiveFocusBackground#101316
list.inactiveSelectionBackground#292f38
list.inactiveSelectionForeground#484c50
notificationCenterHeader.background#181c21
notificationCenterHeader.foreground#b5bfc9
notifications.background#08090b
notifications.border#FFFFFF00
notifications.foreground#9199A1
notificationsErrorIcon.foreground#B80C09
notificationsInfoIcon.foreground#7F7EFF
notificationsWarningIcon.foreground#EAC435
panel.background#181c21
panel.border#101316
panelInput.border#FFFFFF00
panelTitle.activeBorder#9199A1
panelTitle.activeForeground#9199A1
panelTitle.inactiveForeground#484c50
peekViewEditor.background#181c21
peekViewEditor.matchHighlightBackground#FF206E3f
peekViewResult.background#101316
peekViewResult.matchHighlightBackground#FF206E
pickerGroup.border#313943
pickerGroup.foreground#484c50
progressBar.background#FF206E
quickInput.background#101316
quickInput.foreground#484c50
scrollbar.shadow#FFFFFF00
scrollbarSlider.activeBackground#FF206E3f
scrollbarSlider.background#7f10373f
scrollbarSlider.hoverBackground#bf18523f
settings.headerForeground#9199A1
settings.modifiedItemIndicator#7f1037
sideBar.background#181c21
sideBar.border#101316
sideBar.foreground#9199A1
sideBarSectionHeader.background#21262D
sideBarSectionHeader.border#101316
sideBarSectionHeader.foreground#9199A1
sideBarTitle.foreground#9199A1
statusBar.background#313943
statusBar.border#101316
statusBar.debuggingBackground#FF206E
statusBar.debuggingForeground#9199A1
statusBar.foreground#9199A1
statusBar.noFolderBackground#FF206E
statusBarItem.prominentBackground#39424e
statusBarItem.remoteBackground#7F7EFF
statusBarItem.remoteForeground#9199A1
tab.activeBackground#21262D
tab.activeBorder#6c7278
tab.activeBorderTop#FF206E
tab.activeForeground#9199A1
tab.border#21262D
tab.hoverBackground#21262D
tab.inactiveBackground#101316
tab.inactiveForeground#484c50
tab.unfocusedActiveBorder#FFFFFF00
tab.unfocusedActiveBorderTop#7f1037
tab.unfocusedHoverBackground#181c21
terminal.ansiBlack#545d68
terminal.ansiBlue#316dca
terminal.ansiBrightBlack#697482
terminal.ansiBrightBlue#3d88fc
terminal.ansiBrightCyan#3f92a2
terminal.ansiBrightGreen#419c47
terminal.ansiBrightMagenta#d95fa2
terminal.ansiBrightRed#fb4b44
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#bb7f00
terminal.ansiCyan#337582
terminal.ansiGreen#347d39
terminal.ansiMagenta#ae4c82
terminal.ansiRed#c93c37
terminal.ansiWhite#cdd9e5
terminal.ansiYellow#966600
terminal.foreground#9199A1
terminal.tab.activeBorder#FFFFFF00
terminalCursor.background#181c21
terminalCursor.foreground#9199A1
textBlockQuote.background#181c21
textBlockQuote.border#FF206E
textCodeBlock.background#181c21
textLink.activeForeground#FF206E
textLink.foreground#bf1852
textPreformat.foreground#9199A1
textSeparator.foreground#9199A1
titleBar.activeBackground#21262D
titleBar.activeForeground#9199A1
titleBar.border#FFFFFF00
titleBar.inactiveBackground#181c21
titleBar.inactiveForeground#484c50
tree.indentGuidesStroke#292f38
welcomePage.buttonBackground#bf1852
welcomePage.buttonHoverBackground#7f1037

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid.broken, message.error, invalid.deprecated, invalid.unimplemented, invalid.illegal, brackethighlighter.unmatched, markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#99FF85	—
storage, storage.type, keyword	#FF7070	—
entity.name.function, meta.diff.range	#FF99FF	—
entity.name.tag, support.class.component, markup.quote, string.regexp constant.character.escape, markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#70A7FF	—
constant, entity.name.constant, variable.other.constant, variable.language, entity, meta.output, support, meta.property-name, string variable, source.regexp, string.regexp, support.constant, meta.separator, meta.diff.header, markup.ignored, markup.untracked, support.variable, meta.module-reference, markup.heading, markup.heading entity.name, markup.raw	#9785FF	—
source.json meta.structure.dictionary.json support.type.property-name.json	#9785FF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#a692ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b59fff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#c4acff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#d3baff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#e2c7ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f1d4ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffe2ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffefff	—
entity.name, meta.export.default, meta.definition.variable, variable, punctuation.definition.list.begin.markdown, markup.changed, punctuation.definition.changed	#FBFF85	—
string, punctuation.definition.string, string punctuation.section.embedded source, constant.other.reference.link, string.other.link, string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#FFBF70	—
meta.export.default.tsx, storage.type.java, variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression, storage.modifier.package, storage.modifier.import, variable.other, support.type.property-name.css	#97AFC3	—
string source, markup.italic, markup.bold	#75818B	—
comment, punctuation.definition.comment, string.comment, brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#646A6F	—
markup.bold, string.regexp constant.character.escape, markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted, meta.diff.range	—	bold
constant.other.reference.link, string.other.link	—	underline

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