Aira Theme

Name: Aira Theme
Author: Talison Cardoso

Publisher: Talison CardosoThemes in package: 2

Official Aira Theme 🇧🇷

Open in VS Code GitHub

Color themes

VS Code preview

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

Aira Theme — Aira Hope

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.

actionBar.toggledBackground#ff0000
activityBar.activeBackground#131C24
activityBar.activeBorder#50E191
activityBar.activeFocusBorder#50E191
activityBar.background#131C24
activityBar.border#1C2834
activityBar.dropBorder#50E191
activityBar.foreground#E5E5E5CF
activityBar.inactiveForeground#909CC380
activityBarBadge.background#50E191
activityBarBadge.foreground#131C24
badge.background#50E191
badge.foreground#131C24
breadcrumb.activeSelectionForeground#B69EFF
breadcrumb.background#17212B
breadcrumb.focusForeground#63ACFF
button.background#50E191
button.foreground#131C24
button.secondaryBackground#17212B
commandCenter.activeBackground#1C2834
commandCenter.activeBorder#909CC380
commandCenter.background#17212B
commandCenter.border#909CC359
commandCenter.foreground#E5E5E5C0
debugIcon.breakpointForeground#FF5050
debugIcon.continueForeground#50E191
debugIcon.restartForeground#D8C451
debugIcon.stepOverForeground#B69EFF
debugIcon.stopForeground#EF4E5B
debugToolBar.background#1C2936
debugToolBar.border#909CC380
diffEditor.insertedTextBackground#50e19323
diffEditor.removedTextBackground#FF505028
dropdown.background#1C2834
dropdown.foreground#E5E5E5
dropdown.listBackground#1C2834
editor.background#131C24
editor.findMatchBackground#909CC344
editor.findMatchHighlightBackground#909CC328
editor.findMatchHighlightBorder#909CC323
editor.foreground#E5E5E5
editor.hoverHighlightBackground#909CC328
editor.inactiveSelectionBackground#909CC324
editor.lineHighlightBackground#17212B
editor.lineHighlightBorder#1C2936
editor.selectionBackground#909CC334
editor.selectionHighlightBackground#909CC348
editor.wordHighlightBackground#909CC346
editor.wordHighlightStrongBackground#909CC324
editor.wordHighlightStrongBorder#909CC388
editorBracketHighlight.foreground1#E5E5E5
editorBracketHighlight.foreground2#50E191
editorBracketHighlight.foreground3#B69EFF
editorBracketHighlight.foreground4#63ACFF
editorBracketHighlight.foreground5#D8C451
editorBracketHighlight.foreground6#909CC3
editorBracketHighlight.unexpectedBracket.foreground#EF4E5B
editorCursor.foreground#FF916E
editorError.foreground#FF5050
editorGhostText.background#909CC324
editorGroup.border#50E191A8
editorGroup.dropBackground#909CC323
editorGroupHeader.noTabsBackground#1C2834
editorGroupHeader.tabsBackground#131C24
editorGroupHeader.tabsBorder#1C2834
editorGutter.addedBackground#50e19199
editorGutter.deletedBackground#FF5050C0
editorGutter.modifiedBackground#63ACFFC0
editorHoverWidget.background#1C2936
editorIndentGuide.activeBackground1#50E1918A
editorIndentGuide.background1#50E19128
editorInfo.foreground#63ACFF
editorLineNumber.activeForeground#50E191
editorLineNumber.dimmedForeground#FF916E
editorLineNumber.foreground#909CC380
editorLink.activeForeground#63ACFF
editorRuler.foreground#1C2936
editorStickyScroll.background#17212B
editorStickyScrollHover.background#909CC322
editorSuggestWidget.background#17212B
editorSuggestWidget.focusHighlightForeground#50E191
editorSuggestWidget.highlightForeground#63ACFF
editorWarning.foreground#D8C451
editorWhitespace.foreground#50E19128
editorWidget.background#1C2936
editorWidget.border#909CC380
editorWidget.foreground#E5E5E5
editorWidget.resizeBorder#909CC3
errorForeground#EF4E5B
extensionIcon.starForeground#D8C451FE
focusBorder#909CC324
foreground#E5E5E5
gitDecoration.addedResourceForeground#50E191
gitDecoration.conflictingResourceForeground#B69EFF
gitDecoration.deletedResourceForeground#FF5050
gitDecoration.ignoredResourceForeground#909cc3e0
gitDecoration.modifiedResourceForeground#63ACFF
gitDecoration.untrackedResourceForeground#50E191
input.background#17212B
input.border#909CC380
inputOption.activeBackground#404657
inputOption.activeBorder#909CC3
keybindingLabel.background#17212B
keybindingLabel.border#131C24
keybindingLabel.bottomBorder#50E191C0
keybindingLabel.foreground#E5E5E5
keybindingTable.headerBackground#1C2834
keybindingTable.rowsBackground#17212B
list.activeSelectionBackground#909CC324
list.activeSelectionForeground#E5E5E5
list.dropBackground#909CC323
list.errorForeground#FF5050
list.focusBackground#909CC323
list.hoverBackground#909CC323
list.inactiveFocusOutline#131C24
list.inactiveSelectionBackground#909CC324
list.warningForeground#D8C451
menu.foreground#E5E5E5
menubar.selectionBackground#909CC324
menubar.selectionBorder#131C24
notificationCenter.border#909CC359
notificationCenterHeader.background#17212B
notificationCenterHeader.foreground#E5E5E5
notificationLink.foreground#63ACFF
notifications.background#1C2834
notifications.border#17212B
notifications.foreground#E5E5E5
notificationsErrorIcon.foreground#EF4E5B
notificationsInfoIcon.foreground#63ACFF
notificationsWarningIcon.foreground#D8C451
notificationToast.border#17212B
panel.background#131C24
panel.border#1C2834
panel.dropBorder#50E191
panelInput.border#50E19144
panelSection.border#909CC380
panelSection.dropBackground#909CC359
panelSectionHeader.background#17212B
panelSectionHeader.foreground#E5E5E5
panelTitle.activeBorder#50E191
panelTitle.activeForeground#E5E5E5
peekView.border#909CC3
peekViewEditor.background#17212B
peekViewEditor.matchHighlightBackground#909CC359
peekViewEditorStickyScroll.background#1C2936
peekViewResult.background#1C2936
peekViewResult.matchHighlightBackground#B69EFF80
peekViewResult.selectionBackground#909CC324
peekViewTitle.background#1C2936
pickerGroup.border#909CC3C0
pickerGroup.foreground#63ACFF
profileBadge.background#50E191
profileBadge.foreground#131C24
progressBar.background#50E191
quickInput.background#1C2834
scrollbar.shadow#1C2834
scrollbarSlider.activeBackground#909CC333
scrollbarSlider.background#909CC333
scrollbarSlider.hoverBackground#909CC344
search.resultsInfoForeground#50E191
selection.background#404657
settings.checkboxForeground#50E191
settings.dropdownBackground#1C2834
settings.dropdownBorder#909CC380
settings.modifiedItemIndicator#B69EFFC0
settings.numberInputForeground#B69EFF
settings.rowHoverBackground#17212B
settings.sashBorder#50E191C0
sideBar.background#17212B
sideBar.border#1C2834
sideBar.foreground#FFFFFF
sideBarSectionHeader.background#131C2488
sideBarSectionHeader.border#1C2834
sideBarSectionHeader.foreground#e5e5e5
statusBar.background#17212B
statusBar.border#909CC324
statusBar.debuggingBackground#EF4E5B
statusBar.debuggingForeground#131C24
statusBar.focusBorder#909CC3
statusBar.foreground#E5E5E5
statusBar.noFolderBackground#17212B
statusBar.noFolderForeground#E5E5E5
tab.activeBackground#131C24
tab.activeBorderTop#50E191
tab.activeForeground#E5E5E5
tab.inactiveBackground#17212B
terminal.ansiBlack#131C24
terminal.ansiBlue#63ACFF
terminal.ansiBrightBlack#0d141a
terminal.ansiBrightBlue#51a2ff
terminal.ansiBrightCyan#49fffc
terminal.ansiBrightGreen#50ff9f
terminal.ansiBrightMagenta#a789ff
terminal.ansiBrightRed#ff4a59
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffe65c
terminal.ansiCyan#43dad7
terminal.ansiGreen#50E191
terminal.ansiMagenta#B69EFF
terminal.ansiRed#EF4E5B
terminal.ansiWhite#E5E5E5
terminal.ansiYellow#D8C451
terminal.findMatchBackground#EF4E5BD0
terminal.findMatchHighlightBackground#909CC359
textBlockQuote.background#17212B
textBlockQuote.border#909CC3
textLink.foreground#63ACFF
textPreformat.foreground#50E191
titleBar.activeBackground#131C24
titleBar.activeForeground#E5E5E5
titleBar.inactiveBackground#17212B
toolbar.hoverBackground#404657
tree.inactiveIndentGuidesStroke#50E19134
tree.indentGuidesStroke#50E19180
welcomePage.progress.background#1C2834
welcomePage.progress.foreground#50E191
welcomePage.tileBackground#17212B
welcomePage.tileHoverBackground#1C2834

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid	#EF4E5B	—
invalid.deprecated	#EF4E5B	—
source	#E5E5E5	—
variable	#E5E5E5	—
constant	#B69EFF	—
comment	#787A88	—
string	#D8C451	—
keyword	#50E191	—
keyword.operator.new, keyword.control.new	#50E191	—
entity.name.type.class	#FF916E
entity.other.inherited-class	#FF916E	italic
variable.language	#B69EFF	italic
entity.name.function	#63ACFF	—
variable.parameter	—	—
storage.type.annotation	#63ACFF	italic
support	#FF916E	—
support.variable	#B69EFF	—
support.function	#FF916E	—
support.type	#FF916E	—
support.constant	#B69EFF	—
punctuation.separator.key-value	#909CC3	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#50E191	—
punctuation.separator.inheritance	#50E191	—
storage	#50E191	—
entity.name.type	#FF916E	italic
comment.block.documentation	#787A88	—
comment.block.documentation variable	—	italic
entity.name.type.instance	#FF916E	italic
comment.block.documentation storage.type.class	#50E191	italic
constant.character.escape	#50E191	—
constant.numeric	#B69EFF	—
meta.embedded.line	—	—
variable.other.constant	#B69EFF	—
variable.other.readwrite.alias	#E5E5E5	—
text.html	#E5E5E5	—
entity.name.tag	#50E191	—
entity.other.attribute-name	#63ACFF	—
entity.other.attribute-name.class	#63ACFF	—
entity.other.attribute-name.css	#63ACFF	italic
support.type.property-name.css	#E5E5E5
support.constant.property-value	#B69EFF	—
support.function.calc.css, support.function.misc.css	#63ACFF
keyword.operator.pattern.css	#909CC3	—
support.type.property-name.json	#50E191
entity.name.section.markdown	#50E191	—
punctuation.definition.heading.markdown	#909CC3	—
punctuation.definition.list.begin.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.table.markdown, punctuation.separator.table.markdown, punctuation.definition.strikethrough.markdown, punctuation.definition.math.begin.markdown, punctuation.definition.math.end.markdown, punctuation.definition.quote.begin.markdown	#FF916E	—
text.html.markdown	#E5E5E5	—
markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
markup.underline.link	#63ACFF	italic
string.other.link	#50E191	italic
markup.strikethrough.markdown	—	strikethrough
meta.embedded.math.markdown	#909CC3	italic
string.other.link.description.title.markdown, string.other.link.description.markdown, string.other.link.title.markdown	#909CC3	italic
meta.interpolation.rust	#50E191	—
entity.name.type.rust, entity.name.type.enum.rust, entity.name.type.struct.rust	#FF916E	—
variable.parameter.function.language.special.self.python	#FF916E	—
support.class.1, support.other.namespace.php	#FF916E	italic
variable.other.property.php	#E5E5E5	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.section.embedded.end.php source.php	#50E191	—
entity.name.type.interface.php, entity.name.type.trait.php	#FF916E	—