Papilio

Name: Papilio
Author: Felipe Lazzarini

Publisher: Felipe LazzariniThemes in package: 2

A warm dark theme built on deep red-brown, crimson and antique gold. Fan-made and unaffiliated with HoYoverse; inspired by Hu Tao's palette from Genshin Impact.

Open in VS Code GitHub

Color themes

VS Code preview

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

Papilio — Papilio

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

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#211918
activityBar.foreground#ece0d1
activityBar.inactiveForeground#897987
activityBarBadge.background#ea5356
activityBarBadge.foreground#191313
badge.background#ea5356
badge.foreground#191313
breadcrumb.activeSelectionForeground#ea5356
breadcrumb.background#191313
breadcrumb.focusForeground#ece0d1
breadcrumb.foreground#897987
breadcrumbPicker.background#211918
button.background#ea5356
button.foreground#191313
button.hoverBackground#f0a068
button.secondaryBackground#3a2b28
button.secondaryForeground#ece0d1
button.secondaryHoverBackground#4a2f2d
checkbox.background#2d2120
checkbox.border#3a2b28
checkbox.foreground#ece0d1
debugConsole.errorForeground#f2493b
debugConsole.infoForeground#90d0e1
debugConsole.sourceForeground#897987
debugConsole.warningForeground#d8b851
debugConsoleInputIcon.foreground#ea5356
debugIcon.breakpointDisabledForeground#897987
debugIcon.breakpointForeground#f2493b
debugTokenExpression.boolean#c796d3
debugTokenExpression.error#f2493b
debugTokenExpression.name#ece0d1
debugTokenExpression.number#c796d3
debugTokenExpression.string#ffaea9
debugTokenExpression.value#a39187
debugToolBar.background#2d2120
debugToolBar.border#3a2b28
descriptionForeground#897987
diffEditor.border#3a2b28
diffEditor.diagonalFill#3a2b2880
diffEditor.insertedLineBackground#5e8b5814
diffEditor.insertedTextBackground#5e8b581f
diffEditor.removedLineBackground#f2493b14
diffEditor.removedTextBackground#f2493b1f
diffEditor.unchangedRegionBackground#211918
diffEditor.unchangedRegionForeground#897987
diffEditorGutter.insertedLineBackground#5e8b581f
diffEditorGutter.removedLineBackground#f2493b1f
dropdown.background#2d2120
dropdown.border#3a2b28
dropdown.foreground#ece0d1
editor.background#191313
editor.findMatchBackground#c49a5d36
editor.findMatchBorder#c49a5d
editor.findMatchHighlightBackground#c49a5d29
editor.findMatchHighlightBorder#c49a5d80
editor.focusedStackFrameHighlightBackground#5e8b5833
editor.foreground#ece0d1
editor.hoverHighlightBackground#90d0e11f
editor.lineHighlightBackground#2d212080
editor.lineHighlightBorder#2d212000
editor.rangeHighlightBackground#2d212099
editor.selectionBackground#4a2f2d
editor.selectionHighlightBackground#4a2f2d99
editor.stackFrameHighlightBackground#c49a5d2e
editor.wordHighlightBackground#3a2b28b3
editorBracketHighlight.foreground1#6d84c4
editorBracketHighlight.foreground2#c49a5d
editorBracketHighlight.foreground3#90d0e1
editorBracketHighlight.foreground4#ffaea9
editorBracketHighlight.foreground5#c796d3
editorBracketHighlight.foreground6#a39187
editorBracketHighlight.unexpectedBracket.foreground#f2493b
editorBracketMatch.background#90d0e126
editorBracketMatch.border#90d0e1
editorCodeLens.foreground#897987
editorCursor.foreground#ea5356
editorError.foreground#f2493b
editorGroup.border#3a2b28
editorGroupHeader.noTabsBackground#211918
editorGroupHeader.tabsBackground#211918
editorGutter.addedBackground#5e8b58
editorGutter.deletedBackground#f2493b
editorGutter.foldingControlForeground#897987
editorGutter.modifiedBackground#c49a5d
editorHoverWidget.background#211918
editorHoverWidget.border#3a2b28
editorHoverWidget.foreground#a39187
editorIndentGuide.activeBackground1#897987
editorIndentGuide.background1#3a2b28
editorInfo.foreground#90d0e1
editorInlayHint.background#2d2120b3
editorInlayHint.foreground#a39187
editorInlayHint.parameterBackground#2d2120b3
editorInlayHint.parameterForeground#a39187
editorInlayHint.typeBackground#2d2120b3
editorInlayHint.typeForeground#f0a068
editorLightBulb.foreground#c49a5d
editorLightBulbAi.foreground#c796d3
editorLightBulbAutoFix.foreground#5e8b58
editorLineNumber.activeForeground#a39187
editorLineNumber.foreground#897987
editorLink.activeForeground#90d0e1
editorOverviewRuler.addedForeground#5e8b58
editorOverviewRuler.border#3a2b28
editorOverviewRuler.commonContentForeground#89798799
editorOverviewRuler.currentContentForeground#ea535699
editorOverviewRuler.deletedForeground#f2493b
editorOverviewRuler.errorForeground#f2493b
editorOverviewRuler.findMatchForeground#c49a5d99
editorOverviewRuler.incomingContentForeground#6d84c499
editorOverviewRuler.infoForeground#90d0e1
editorOverviewRuler.modifiedForeground#c49a5d
editorOverviewRuler.warningForeground#d8b851
editorStickyScroll.background#211918
editorStickyScrollHover.background#2d2120
editorSuggestWidget.background#211918
editorSuggestWidget.border#3a2b28
editorSuggestWidget.focusHighlightForeground#ea5356
editorSuggestWidget.foreground#a39187
editorSuggestWidget.highlightForeground#ea5356
editorSuggestWidget.selectedBackground#2d2120
editorSuggestWidget.selectedForeground#ece0d1
editorWarning.foreground#d8b851
editorWhitespace.foreground#3a2b28
editorWidget.background#211918
editorWidget.border#3a2b28
editorWidget.foreground#a39187
errorForeground#f2493b
extensionButton.prominentBackground#ea5356
extensionButton.prominentForeground#191313
extensionButton.prominentHoverBackground#f0a068
focusBorder#ea5356
foreground#a39187
gitDecoration.addedResourceForeground#5e8b58
gitDecoration.conflictingResourceForeground#f0a068
gitDecoration.deletedResourceForeground#f2493b
gitDecoration.ignoredResourceForeground#897987
gitDecoration.modifiedResourceForeground#c49a5d
gitDecoration.renamedResourceForeground#5e8b58
gitDecoration.stageDeletedResourceForeground#f2493b
gitDecoration.stageModifiedResourceForeground#c49a5d
gitDecoration.submoduleResourceForeground#c796d3
gitDecoration.untrackedResourceForeground#90d0e1
icon.foreground#a39187
input.background#2d2120
input.border#3a2b28
input.foreground#ece0d1
input.placeholderForeground#978995
inputOption.activeBackground#ea535640
inputOption.activeBorder#ea5356
inputOption.activeForeground#ece0d1
inputValidation.errorBackground#2d2120
inputValidation.errorBorder#f2493b
inputValidation.infoBackground#2d2120
inputValidation.infoBorder#90d0e1
inputValidation.warningBackground#2d2120
inputValidation.warningBorder#d8b851
keybindingLabel.background#2d2120
keybindingLabel.border#3a2b28
keybindingLabel.bottomBorder#3a2b28
keybindingLabel.foreground#ece0d1
list.activeSelectionBackground#2d2120
list.activeSelectionForeground#ece0d1
list.dropBackground#2d2120cc
list.errorForeground#f2493b
list.focusBackground#2d2120
list.focusForeground#ece0d1
list.focusHighlightForeground#f0a068
list.focusOutline#ea5356
list.highlightForeground#f0a068
list.hoverBackground#2d212080
list.hoverForeground#ece0d1
list.inactiveSelectionBackground#2d2120b3
list.inactiveSelectionForeground#ece0d1
list.warningForeground#d8b851
menu.background#211918
menu.border#3a2b28
menu.foreground#a39187
menu.selectionBackground#2d2120
menu.selectionForeground#ece0d1
menu.separatorBackground#3a2b28
menubar.selectionBackground#2d2120
menubar.selectionForeground#ece0d1
merge.border#3a2b28
merge.commonContentBackground#3a2b2859
merge.commonHeaderBackground#3a2b28b3
merge.currentContentBackground#ea535624
merge.currentHeaderBackground#ea535642
merge.incomingContentBackground#6d84c424
merge.incomingHeaderBackground#6d84c442
mergeEditor.change.background#c49a5d24
mergeEditor.change.word.background#c49a5d36
mergeEditor.conflict.handledFocused.border#5e8b58
mergeEditor.conflict.handledUnfocused.border#5e8b5866
mergeEditor.conflict.unhandledFocused.border#f2493b
mergeEditor.conflict.unhandledUnfocused.border#f2493b80
minimap.errorHighlight#f2493bb3
minimap.findMatchHighlight#c49a5d80
minimap.selectionHighlight#4a2f2d
minimap.warningHighlight#d8b851b3
minimapSlider.activeBackground#89798780
minimapSlider.background#3a2b2866
minimapSlider.hoverBackground#3a2b2899
notebook.cellBorderColor#3a2b28
notebook.cellEditorBackground#191313
notebook.focusedCellBorder#ea5356
notificationCenterHeader.background#2d2120
notificationLink.foreground#90d0e1
notifications.background#211918
notifications.border#3a2b28
notificationsErrorIcon.foreground#f2493b
notificationsInfoIcon.foreground#90d0e1
notificationsWarningIcon.foreground#d8b851
panel.background#211918
panel.border#3a2b28
panelInput.border#3a2b28
panelTitle.activeBorder#ea5356
panelTitle.activeForeground#ece0d1
panelTitle.inactiveForeground#897987
peekView.border#ea5356
peekViewEditor.background#211918
peekViewEditor.matchHighlightBackground#c49a5d2b
peekViewResult.background#211918
peekViewResult.fileForeground#ece0d1
peekViewResult.lineForeground#a39187
peekViewResult.matchHighlightBackground#c49a5d2b
peekViewResult.selectionBackground#2d2120
peekViewResult.selectionForeground#ece0d1
peekViewTitle.background#2d2120
peekViewTitleDescription.foreground#897987
peekViewTitleLabel.foreground#ece0d1
pickerGroup.border#3a2b28
pickerGroup.foreground#ea5356
progressBar.background#ea5356
quickInput.background#211918
quickInput.foreground#a39187
quickInputList.focusBackground#2d2120
quickInputList.focusForeground#ece0d1
quickInputTitle.background#2d2120
sash.hoverBorder#ea5356
scrollbarSlider.activeBackground#89798799
scrollbarSlider.background#3a2b2880
scrollbarSlider.hoverBackground#3a2b28cc
selection.background#4a2f2d
settings.focusedRowBackground#2d212080
settings.headerForeground#ece0d1
settings.modifiedItemIndicator#c49a5d
settings.rowHoverBackground#2d21204d
sideBar.background#211918
sideBar.border#3a2b28
sideBar.foreground#a39187
sideBarSectionHeader.background#211918
sideBarSectionHeader.border#3a2b28
sideBarSectionHeader.foreground#a39187
sideBarTitle.foreground#ece0d1
statusBar.background#211918
statusBar.border#3a2b28
statusBar.debuggingBackground#f0a068
statusBar.debuggingForeground#191313
statusBar.foreground#a39187
statusBar.noFolderBackground#211918
statusBarItem.activeBackground#3a2b28e6
statusBarItem.errorBackground#f2493b
statusBarItem.errorForeground#191313
statusBarItem.hoverBackground#3a2b2899
statusBarItem.remoteBackground#ea5356
statusBarItem.remoteForeground#191313
statusBarItem.warningBackground#d8b851
statusBarItem.warningForeground#191313
symbolIcon.arrayForeground#a39187
symbolIcon.booleanForeground#c796d3
symbolIcon.classForeground#f0a068
symbolIcon.colorForeground#a39187
symbolIcon.constantForeground#c796d3
symbolIcon.constructorForeground#90d0e1
symbolIcon.enumeratorForeground#f0a068
symbolIcon.enumeratorMemberForeground#c796d3
symbolIcon.eventForeground#90d0e1
symbolIcon.fieldForeground#ece0d1
symbolIcon.fileForeground#a39187
symbolIcon.folderForeground#a39187
symbolIcon.functionForeground#90d0e1
symbolIcon.interfaceForeground#f0a068
symbolIcon.keyForeground#ece0d1
symbolIcon.keywordForeground#ea5356
symbolIcon.methodForeground#90d0e1
symbolIcon.moduleForeground#f0a068
symbolIcon.namespaceForeground#f0a068
symbolIcon.nullForeground#c796d3
symbolIcon.numberForeground#c796d3
symbolIcon.objectForeground#ece0d1
symbolIcon.operatorForeground#a39187
symbolIcon.packageForeground#f0a068
symbolIcon.propertyForeground#ece0d1
symbolIcon.referenceForeground#a39187
symbolIcon.snippetForeground#a39187
symbolIcon.stringForeground#ffaea9
symbolIcon.structForeground#f0a068
symbolIcon.textForeground#ece0d1
symbolIcon.typeParameterForeground#f0a068
symbolIcon.unitForeground#a39187
symbolIcon.variableForeground#ece0d1
tab.activeBackground#191313
tab.activeBorderTop#ea5356
tab.activeForeground#ece0d1
tab.activeModifiedBorder#c49a5d
tab.border#211918
tab.hoverBackground#2d2120
tab.inactiveBackground#211918
tab.inactiveForeground#897987
tab.unfocusedActiveForeground#a39187
tab.unfocusedInactiveForeground#897987
terminal.ansiBlack#3a2b28
terminal.ansiBlue#6d84c4
terminal.ansiBrightBlack#897987
terminal.ansiBrightBlue#8d9fd1
terminal.ansiBrightCyan#a8dae8
terminal.ansiBrightGreen#81a57d
terminal.ansiBrightMagenta#d3addd
terminal.ansiBrightRed#ef797b
terminal.ansiBrightWhite#b7a9a1
terminal.ansiBrightYellow#d1b081
terminal.ansiCyan#90d0e1
terminal.ansiGreen#5e8b58
terminal.ansiMagenta#c796d3
terminal.ansiRed#ea5356
terminal.ansiWhite#a39187
terminal.ansiYellow#c49a5d
terminal.background#191313
terminal.border#3a2b28
terminal.foreground#ece0d1
terminal.selectionBackground#4a2f2db3
terminalCommandDecoration.defaultBackground#897987
terminalCommandDecoration.errorBackground#f2493b
terminalCommandDecoration.successBackground#5e8b58
terminalCursor.foreground#ea5356
testing.iconFailed#f2493b
testing.iconPassed#5e8b58
testing.iconQueued#d8b851
testing.iconSkipped#897987
textBlockQuote.background#211918
textBlockQuote.border#ea5356
textLink.activeForeground#ece0d1
textLink.foreground#90d0e1
textPreformat.foreground#ffaea9
textSeparator.foreground#3a2b28
titleBar.activeBackground#211918
titleBar.activeForeground#a39187
titleBar.inactiveBackground#211918
titleBar.inactiveForeground#897987
tree.inactiveIndentGuidesStroke#3a2b2880
tree.indentGuidesStroke#3a2b28
welcomePage.progress.background#3a2b28
welcomePage.progress.foreground#ea5356
welcomePage.tileBackground#211918
welcomePage.tileBorder#3a2b28
welcomePage.tileHoverBackground#2d2120
widget.shadow#19131399

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#897987	italic
keyword, keyword.control, storage.type, storage.modifier	#ea5356	—
string, string.quoted, punctuation.definition.string	#ffaea9	—
constant.numeric	#c796d3	—
constant.language, constant.character, variable.other.constant, support.constant	#c796d3	—
entity.name.function, support.function, meta.function-call entity.name.function	#90d0e1	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#f0a068	—
variable, meta.definition.variable	#ece0d1	—
variable.language	#ea5356	—
entity.name.namespace, entity.name.module, storage.modifier.package	#f0a068	—
meta.decorator, entity.name.function.decorator, punctuation.decorator	#c796d3	—
variable.parameter	#ece0d1	italic
variable.other.property, support.variable.property, meta.object-literal.key	#ece0d1	—
keyword.operator	#a39187	—
punctuation, meta.brace	#a39187	—
entity.name.tag	#ea5356	—
entity.other.attribute-name	#6d84c4	italic
string.regexp	#f0a068	—
constant.character.escape	#f0a068	—
punctuation.definition.template-expression, punctuation.section.embedded	#f0a068	—
meta.embedded, meta.template.expression	#ece0d1	—
markup.heading, entity.name.section	#ea5356	bold
markup.bold	—	bold
markup.italic	—	italic
markup.inline.raw, markup.fenced_code	#ffaea9	—
markup.underline.link	#90d0e1	—
markup.quote	#897987	—
markup.list punctuation.definition.list, beginning.punctuation.definition.list	#ea5356	—
markup.inserted, meta.diff.header.to-file	#5e8b58	—
markup.deleted, meta.diff.header.from-file	#f2493b	—
markup.changed	#c49a5d	—
meta.diff.range, punctuation.definition.range.diff	#90d0e1	—
support.type.property-name.json	#90d0e1	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.placeholder.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.class.less, entity.other.attribute-name.id.less, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-class.extend.less, entity.other.attribute-name.parent.less	#f0a068
support.type.property-name.css	#ece0d1	—
keyword.other.unit.css, constant.numeric.css	#c796d3	—
invalid, invalid.illegal	#f2493b	—