Pão's themes

Name: Pão's themes
Author: Paulera

Publisher: PauleraThemes in package: 4

temas do pao

Open in VS Code GitHub

Color themes

VS Code preview

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

Pão's themes — Pão's Lyo

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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.activeFocusBorder#5ad4e6
activityBar.background#151515
activityBar.border#151515
activityBar.foreground#bab6c0
activityBar.inactiveForeground#ffffff
activityBarBadge.background#151515
activityBarBadge.foreground#151515
badge.background#5ad4e6
badge.foreground#141414
banner.background#363537
banner.foreground#bab6c0
banner.iconForeground#bab6c0
breadcrumb.activeSelectionForeground#f7f1ff
breadcrumb.focusForeground#bab6c0
breadcrumb.foreground#8b888f
button.background#363537
button.foreground#bab6c0
button.hoverBackground#525053
button.secondaryBackground#363537
button.secondaryForeground#bab6c0
button.secondaryHoverBackground#525053
button.separator#141414
charts.blue#5ad4e6
charts.foreground#f7f1ff
charts.green#7bd88f
charts.lines#69676c
charts.orange#fd9353
charts.purple#5ad4e6
charts.red#fc618d
charts.yellow#5ad4e6
checkbox.background#363537
checkbox.border#363537
checkbox.foreground#f7f1ff
commandCenter.activeBackground#141414
commandCenter.activeForeground#bab6c0
commandCenter.background#191919
commandCenter.border#141414
commandCenter.foreground#8b888f
debugConsole.errorForeground#fc618d
debugConsole.infoForeground#5ad4e6
debugConsole.sourceForeground#f7f1ff
debugConsole.warningForeground#fd9353
debugConsoleInputIcon.foreground#5ad4e6
debugExceptionWidget.background#363537
debugExceptionWidget.border#141414
debugIcon.breakpointCurrentStackframeForeground#5ad4e6
debugIcon.breakpointDisabledForeground#bab6c0
debugIcon.breakpointForeground#fc618d
debugIcon.breakpointStackframeForeground#f7f1ff
debugIcon.breakpointUnverifiedForeground#fd9353
debugIcon.continueForeground#f7f1ff
debugIcon.disconnectForeground#f7f1ff
debugIcon.pauseForeground#f7f1ff
debugIcon.restartForeground#7bd88f
debugIcon.startForeground#7bd88f
debugIcon.stepBackForeground#f7f1ff
debugIcon.stepIntoForeground#f7f1ff
debugIcon.stepOutForeground#f7f1ff
debugIcon.stepOverForeground#f7f1ff
debugIcon.stopForeground#fc618d
debugTokenExpression.boolean#fd9353
debugTokenExpression.error#fc618d
debugTokenExpression.name#5ad4e6
debugTokenExpression.number#5ad4e6
debugTokenExpression.string#5ad4e6
debugTokenExpression.value#f7f1ff
debugToolBar.background#363537
debugView.exceptionLabelBackground#fc618d
debugView.exceptionLabelForeground#141414
debugView.stateLabelBackground#7bd88f
debugView.stateLabelForeground#141414
debugView.valueChangedHighlight#5ad4e6
descriptionForeground#8b888f
diffEditor.diagonalFill#363537
diffEditor.insertedLineBackground#7bd88f19
diffEditor.insertedTextBackground#7bd88f19
diffEditor.removedLineBackground#fc618d19
diffEditor.removedTextBackground#fc618d19
diffEditorGutter.insertedLineBackground#7bd88f19
diffEditorGutter.removedLineBackground#fc618d19
diffEditorOverview.insertedForeground#7bd88fa5
diffEditorOverview.removedForeground#fc618da5
dropdown.background#151515
dropdown.border#141414
dropdown.foreground#8b888f
dropdown.listBackground#363537
editor.background#151515
editor.findMatchBackground#f7f1ff26
editor.findMatchBorder#5ad4e6
editor.findMatchHighlightBackground#f7f1ff26
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#f7f1ff0c
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#bab6c026
editor.foldBackground#f7f1ff0c
editor.foreground#f7f1ff
editor.hoverHighlightBackground#f7f1ff0c
editor.inactiveSelectionBackground#f7f1ff0c
editor.inlineValuesBackground#525053
editor.inlineValuesForeground#bab6c0
editor.lineHighlightBackground#f7f1ff0c
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#363537
editor.rangeHighlightBackground#363537
editor.rangeHighlightBorder#363537
editor.selectionBackground#bab6c026
editor.selectionHighlightBackground#f7f1ff26
editor.selectionHighlightBorder#00000000
editor.stackFrameHighlightBackground#bab6c026
editor.wordHighlightBackground#f7f1ff26
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#f7f1ff26
editor.wordHighlightStrongBorder#00000000
editorBracketHighlight.foreground1#fc618d
editorBracketHighlight.foreground2#fd9353
editorBracketHighlight.foreground3#5ad4e6
editorBracketHighlight.foreground4#7bd88f
editorBracketHighlight.foreground5#5ad4e6
editorBracketHighlight.foreground6#5ad4e6
editorBracketMatch.background#141414
editorBracketMatch.border#69676c
editorCodeLens.foreground#69676c
editorCursor.background#141414
editorCursor.foreground#f7f1ff
editorError.background#00000000
editorError.border#00000000
editorError.foreground#fc618d
editorGroup.border#191919
editorGroup.dropBackground#191919bf
editorGroup.emptyBackground#131313
editorGroup.focusedEmptyBorder#191919
editorGroupHeader.noTabsBackground#141414
editorGroupHeader.tabsBackground#141414
editorGroupHeader.tabsBorder#141414
editorGutter.addedBackground#7bd88f
editorGutter.background#161616
editorGutter.deletedBackground#fc618d
editorGutter.foldingControlForeground#bab6c0
editorGutter.modifiedBackground#fd9353
editorHint.border#141414
editorHint.foreground#5ad4e6
editorHoverWidget.background#363537
editorHoverWidget.border#141414
editorIndentGuide.background#363537
editorInfo.background#00000000
editorInfo.border#141414
editorInfo.foreground#5ad4e6
editorLightBulb.foreground#5ad4e6
editorLightBulbAutoFix.foreground#7bd88f
editorLineNumber.activeForeground#7a5bb5
editorLineNumber.foreground#232323
editorLink.activeForeground#5ad4e6
editorMarkerNavigation.background#363537
editorMarkerNavigationError.background#fc618d
editorMarkerNavigationInfo.background#5ad4e6
editorMarkerNavigationWarning.background#fd9353
editorOverviewRuler.addedForeground#7bd88f
editorOverviewRuler.border#141414
editorOverviewRuler.currentContentForeground#363537
editorOverviewRuler.deletedForeground#fc618d
editorOverviewRuler.errorForeground#fc618d
editorOverviewRuler.findMatchForeground#f7f1ff26
editorOverviewRuler.incomingContentForeground#363537
editorOverviewRuler.infoForeground#5ad4e6
editorOverviewRuler.modifiedForeground#fd9353
editorOverviewRuler.rangeHighlightForeground#f7f1ff26
editorOverviewRuler.selectionHighlightForeground#f7f1ff26
editorOverviewRuler.warningForeground#fd9353
editorOverviewRuler.wordHighlightForeground#f7f1ff26
editorOverviewRuler.wordHighlightStrongForeground#f7f1ff26
editorPane.background#141414
editorRuler.foreground#525053
editorSuggestWidget.background#202020
editorSuggestWidget.border#222222
editorSuggestWidget.foreground#bab6c0
editorSuggestWidget.highlightForeground#f7f1ff
editorSuggestWidget.selectedBackground#171717
editorUnnecessaryCode.opacity#000000a5
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#fd9353
editorWhitespace.foreground#525053
editorWidget.background#363537
editorWidget.border#363537
errorForeground#fc618d
extensionBadge.remoteForeground#7bd88f
extensionButton.prominentBackground#363537
extensionButton.prominentForeground#f7f1ff
extensionButton.prominentHoverBackground#525053
extensionIcon.preReleaseForeground#5ad4e6
extensionIcon.sponsorForeground#5ad4e6
extensionIcon.starForeground#5ad4e6
extensionIcon.verifiedForeground#7bd88f
focusBorder#69676c
foreground#f7f1ff
gitDecoration.addedResourceForeground#7bd88f
gitDecoration.conflictingResourceForeground#fd9353
gitDecoration.deletedResourceForeground#fc618d
gitDecoration.ignoredResourceForeground#525053
gitDecoration.modifiedResourceForeground#5ad4e6
gitDecoration.stageDeletedResourceForeground#fc618d
gitDecoration.stageModifiedResourceForeground#5ad4e6
gitDecoration.untrackedResourceForeground#bab6c0
icon.foreground#8b888f
input.background#363537
input.border#363537
input.foreground#f7f1ff
input.placeholderForeground#69676c
inputOption.activeBackground#525053
inputOption.activeBorder#525053
inputOption.activeForeground#f7f1ff
inputOption.hoverBackground#525053
inputValidation.errorBackground#363537
inputValidation.errorBorder#fc618d
inputValidation.errorForeground#fc618d
inputValidation.infoBackground#363537
inputValidation.infoBorder#5ad4e6
inputValidation.infoForeground#5ad4e6
inputValidation.warningBackground#363537
inputValidation.warningBorder#fd9353
inputValidation.warningForeground#fd9353
keybindingLabel.background#525053
keybindingLabel.border#525053
keybindingLabel.bottomBorder#363537
keybindingLabel.foreground#bab6c0
list.activeSelectionBackground#f7f1ff0c
list.activeSelectionForeground#5ad4e6
list.dropBackground#191919bf
list.errorForeground#fc618d
list.focusBackground#141414
list.focusForeground#f7f1ff
list.highlightForeground#f7f1ff
list.hoverBackground#181818
list.hoverForeground#f7f1ff
list.inactiveFocusBackground#141414
list.inactiveSelectionBackground#bab6c00c
list.inactiveSelectionForeground#5ad4e6
list.invalidItemForeground#fc618d
list.warningForeground#fd9353
listFilterWidget.background#141414
listFilterWidget.noMatchesOutline#fc618d
listFilterWidget.outline#141414
menu.background#141414
menu.border#191919
menu.foreground#f7f1ff
menu.selectionForeground#5ad4e6
menu.separatorBackground#363537
menubar.selectionForeground#f7f1ff
merge.border#141414
merge.commonContentBackground#f7f1ff19
merge.commonHeaderBackground#f7f1ff26
merge.currentContentBackground#fc618d19
merge.currentHeaderBackground#fc618d26
merge.incomingContentBackground#7bd88f19
merge.incomingHeaderBackground#7bd88f26
mergeEditor.change.background#f7f1ff19
mergeEditor.change.word.background#f7f1ff19
mergeEditor.conflict.handled.minimapOverViewRuler#7bd88f
mergeEditor.conflict.handledFocused.border#7bd88f
mergeEditor.conflict.handledUnfocused.border#7bd88f
mergeEditor.conflict.unhandled.minimapOverViewRuler#fc618d
mergeEditor.conflict.unhandledFocused.border#fc618d
mergeEditor.conflict.unhandledUnfocused.border#fc618d
minimap.errorHighlight#fc618da5
minimap.findMatchHighlight#8b888fa5
minimap.selectionHighlight#bab6c026
minimap.selectionOccurrenceHighlight#69676ca5
minimap.warningHighlight#fd9353a5
minimapGutter.addedBackground#7bd88f
minimapGutter.deletedBackground#fc618d
minimapGutter.modifiedBackground#5ad4e6
notebook.cellBorderColor#363537
notebook.cellEditorBackground#1919197f
notebook.cellInsertionIndicator#f7f1ff
notebook.cellStatusBarItemHoverBackground#69676c
notebook.cellToolbarSeparator#363537
notebook.editorBackground#141414
notebook.focusedEditorBorder#69676c
notebookStatusErrorIcon.foreground#fc618d
notebookStatusRunningIcon.foreground#f7f1ff
notebookStatusSuccessIcon.foreground#7bd88f
notificationCenter.border#363537
notificationCenterHeader.background#ffffff
notificationCenterHeader.foreground#8b888f
notificationLink.foreground#5ad4e6
notifications.background#ffffff
notifications.border#ffffff
notifications.foreground#bab6c0
notificationsErrorIcon.foreground#fc618d
notificationsInfoIcon.foreground#5ad4e6
notificationsWarningIcon.foreground#fd9353
notificationToast.border#363537
panel.background#151515
panel.border#5ad4e6
panel.dropBackground#191919bf
panelTitle.activeBorder#5ad4e6
panelTitle.activeForeground#5ad4e6
panelTitle.inactiveForeground#8b888f
peekView.border#141414
peekViewEditor.background#363537
peekViewEditor.matchHighlightBackground#525053
peekViewEditorGutter.background#363537
peekViewResult.background#363537
peekViewResult.fileForeground#8b888f
peekViewResult.lineForeground#8b888f
peekViewResult.matchHighlightBackground#525053
peekViewResult.selectionBackground#363537
peekViewResult.selectionForeground#f7f1ff
peekViewTitle.background#363537
peekViewTitleDescription.foreground#8b888f
peekViewTitleLabel.foreground#f7f1ff
pickerGroup.border#141414
pickerGroup.foreground#525053
ports.iconRunningProcessForeground#7bd88f
problemsErrorIcon.foreground#fc618d
problemsInfoIcon.foreground#5ad4e6
problemsWarningIcon.foreground#fd9353
profileBadge.background#363537
profileBadge.foreground#bab6c0
progressBar.background#363537
sash.hoverBorder#69676c
scrollbar.shadow#141414
scrollbarSlider.activeBackground#f7f1ff59
scrollbarSlider.background#bab6c026
scrollbarSlider.hoverBackground#f7f1ff26
selection.background#bab6c026
settings.checkboxBackground#363537
settings.checkboxBorder#363537
settings.checkboxForeground#f7f1ff
settings.dropdownBackground#363537
settings.dropdownBorder#363537
settings.dropdownForeground#f7f1ff
settings.dropdownListBorder#8b888f
settings.headerForeground#5ad4e6
settings.modifiedItemForeground#5ad4e6
settings.modifiedItemIndicator#5ad4e6
settings.numberInputBackground#363537
settings.numberInputBorder#363537
settings.numberInputForeground#f7f1ff
settings.rowHoverBackground#69676c0c
settings.textInputBackground#363537
settings.textInputBorder#363537
settings.textInputForeground#f7f1ff
sideBar.background#101010
sideBar.border#131313
sideBar.dropBackground#191919bf
sideBar.foreground#8b888f
sideBarSectionHeader.background#101010
sideBarSectionHeader.foreground#69676c
sideBarTitle.foreground#525053
statusBar.background#151515
statusBar.border#131313
statusBar.debuggingBackground#69676c
statusBar.debuggingBorder#191919
statusBar.debuggingForeground#f7f1ff
statusBar.focusBorder#363537
statusBar.foreground#69676c
statusBar.noFolderBackground#191919
statusBar.noFolderBorder#131313
statusBar.noFolderForeground#69676c
statusBarItem.activeBackground#141414
statusBarItem.errorBackground#141414
statusBarItem.errorForeground#fc618d
statusBarItem.focusBorder#69676c
statusBarItem.hoverBackground#f7f1ff0c
statusBarItem.prominentBackground#363537
statusBarItem.prominentHoverBackground#363537
statusBarItem.remoteBackground#191919
statusBarItem.remoteForeground#7bd88f
statusBarItem.warningBackground#141414
statusBarItem.warningForeground#fd9353
symbolIcon.arrayForeground#fc618d
symbolIcon.booleanForeground#fc618d
symbolIcon.classForeground#5ad4e6
symbolIcon.colorForeground#5ad4e6
symbolIcon.constantForeground#5ad4e6
symbolIcon.constructorForeground#7bd88f
symbolIcon.enumeratorForeground#fd9353
symbolIcon.enumeratorMemberForeground#fd9353
symbolIcon.eventForeground#fd9353
symbolIcon.fieldForeground#fd9353
symbolIcon.fileForeground#bab6c0
symbolIcon.folderForeground#bab6c0
symbolIcon.functionForeground#7bd88f
symbolIcon.interfaceForeground#5ad4e6
symbolIcon.keyForeground#fd9353
symbolIcon.keywordForeground#fc618d
symbolIcon.methodForeground#7bd88f
symbolIcon.moduleForeground#5ad4e6
symbolIcon.namespaceForeground#5ad4e6
symbolIcon.nullForeground#5ad4e6
symbolIcon.numberForeground#5ad4e6
symbolIcon.objectForeground#5ad4e6
symbolIcon.operatorForeground#fc618d
symbolIcon.packageForeground#5ad4e6
symbolIcon.propertyForeground#fd9353
symbolIcon.referenceForeground#5ad4e6
symbolIcon.snippetForeground#7bd88f
symbolIcon.stringForeground#5ad4e6
symbolIcon.structForeground#fc618d
symbolIcon.textForeground#5ad4e6
symbolIcon.typeParameterForeground#fd9353
symbolIcon.unitForeground#5ad4e6
symbolIcon.variableForeground#5ad4e6
tab.activeBackground#141414
tab.activeBorder#5ad4e6
tab.activeForeground#5ad4e6
tab.activeModifiedBorder#525053
tab.border#151515
tab.hoverBackground#181818
tab.hoverBorder#525053
tab.hoverForeground#f7f1ff
tab.inactiveBackground#151515
tab.inactiveForeground#8b888f
tab.inactiveModifiedBorder#525053
tab.lastPinnedBorder#525053
tab.unfocusedActiveBorder#8b888f
tab.unfocusedActiveForeground#bab6c0
tab.unfocusedActiveModifiedBorder#363537
tab.unfocusedHoverBackground#141414
tab.unfocusedHoverBorder#141414
tab.unfocusedHoverForeground#bab6c0
tab.unfocusedInactiveForeground#8b888f
tab.unfocusedInactiveModifiedBorder#363537
terminal.ansiBlack#363537
terminal.ansiBlue#fd9353
terminal.ansiBrightBlack#69676c
terminal.ansiBrightBlue#fd9353
terminal.ansiBrightCyan#5ad4e6
terminal.ansiBrightGreen#7bd88f
terminal.ansiBrightMagenta#5ad4e6
terminal.ansiBrightRed#fc618d
terminal.ansiBrightWhite#f7f1ff
terminal.ansiBrightYellow#5ad4e6
terminal.ansiCyan#5ad4e6
terminal.ansiGreen#7bd88f
terminal.ansiMagenta#5ad4e6
terminal.ansiRed#fc618d
terminal.ansiWhite#f7f1ff
terminal.ansiYellow#5ad4e6
terminal.background#101010
terminal.foreground#f7f1ff
terminal.selectionBackground#f7f1ff26
terminalCommandDecoration.defaultBackground#f7f1ff
terminalCommandDecoration.errorBackground#fc618d
terminalCommandDecoration.successBackground#7bd88f
terminalCursor.background#00000000
terminalCursor.foreground#f7f1ff
testing.iconErrored#fc618d
testing.iconFailed#fc618d
testing.iconPassed#7bd88f
testing.iconQueued#f7f1ff
testing.iconSkipped#fd9353
testing.iconUnset#8b888f
testing.message.error.decorationForeground#fc618d
testing.message.error.lineBackground#fc618d19
testing.message.info.decorationForeground#f7f1ff
testing.message.info.lineBackground#f7f1ff19
testing.runAction#5ad4e6
textBlockQuote.background#363537
textBlockQuote.border#363537
textCodeBlock.background#363537
textLink.activeForeground#f7f1ff
textLink.foreground#5ad4e6
textPreformat.foreground#f7f1ff
textSeparator.foreground#69676c
titleBar.activeBackground#151515
titleBar.activeForeground#8b888f
titleBar.border#131313
titleBar.inactiveBackground#191919
titleBar.inactiveForeground#525053
walkThrough.embeddedEditorBackground#191919
welcomePage.buttonBackground#363537
welcomePage.buttonHoverBackground#525053
welcomePage.progress.background#69676c
welcomePage.progress.foreground#8b888f
welcomePage.tileBackground#363537
welcomePage.tileHoverBackground#525053
welcomePage.tileShadow#131313
widget.shadow#131313

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#b392f0	—
support.function, keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block	#b392f0	—
emphasis	—	italic
strong, markup.heading.markdown, markup.bold.markdown	#FF7A84	bold
markup.italic.markdown	—	italic
meta.link.inline.markdown	#1976D2	underline
string, markup.fenced_code, markup.inline	#9db1c5	—
comment, string.quoted.docstring.multi	#6b737c	—
constant.language, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown	#79b8ff	—
constant.numeric, constant.other.placeholder, constant.character.format.placeholder, meta.property-value, keyword.other.unit, keyword.other.template, entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name.json	#f8f8f8	—
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, punctuation.separator.key-value, punctuation.definition.template-expression	#f97583	—
variable.parameter.function	#FF9800	—
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure	#b392f0	—
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template	#ffab70	—
token.info-token	#316bcd	—
token.warn-token	#cd9731	—
token.error-token	#cd3131	—
token.debug-token	#800080	—
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments	#bbbbbb	—
markup.underline.link	#ffab70	—
beginning.punctuation.definition.list.markdown	#FF7A84	—
punctuation.definition.metadata.markdown	#ffab70	—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#79b8ff	—

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