Astro by Mike

Name: Astro by Mike
Author: Michael Andreuzza

Publisher: Michael AndreuzzaThemes in package: 2

My own version of Astro Build theme

Open in VS Code GitHub

Color themes

VS Code preview

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

Astro by Mike — Astro Light

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#4E5377
activityBar.background#FDFDFE
activityBar.dropBorder#D8DAE4
activityBar.foreground#4E5377
activityBar.inactiveForeground#5F6488
activityBarBadge.background#de8601
activityBarBadge.foreground#FDFDFE
badge.background#de8601
badge.foreground#FDFDFE
banner.background#F1F1F4
banner.foreground#4E5377
banner.iconForeground#5F6488
breadcrumb.activeSelectionForeground#de8601
breadcrumb.background#FDFDFE
breadcrumb.focusForeground#5F6488
breadcrumb.foreground#8388AD
breadcrumbPicker.background#F1F1F4
button.background#de8601
button.foreground#FDFDFE
button.hoverBackground#de8601e6
button.secondaryBackground#F1F1F4
button.secondaryForeground#4E5377
button.secondaryHoverBackground#D8DAE4
charts.blue#787cd5
charts.foreground#4E5377
charts.green#1585b3
charts.lines#5F6488
charts.orange#de8601
charts.purple#b81ae6
charts.red#686974
charts.yellow#10a380
checkbox.background#F1F1F4
checkbox.border#6e6a8614
checkbox.foreground#4E5377
debugExceptionWidget.background#F1F1F4
debugExceptionWidget.border#6e6a8614
debugIcon.breakpointCurrentStackframeForeground#5F6488
debugIcon.breakpointDisabledForeground#5F6488
debugIcon.breakpointForeground#5F6488
debugIcon.breakpointStackframeForeground#5F6488
debugIcon.breakpointUnverifiedForeground#5F6488
debugIcon.continueForeground#5F6488
debugIcon.disconnectForeground#5F6488
debugIcon.pauseForeground#5F6488
debugIcon.restartForeground#5F6488
debugIcon.startForeground#5F6488
debugIcon.stepBackForeground#5F6488
debugIcon.stepIntoForeground#5F6488
debugIcon.stepOutForeground#5F6488
debugIcon.stepOverForeground#5F6488
debugIcon.stopForeground#686974
debugToolBar.background#F1F1F4
debugToolBar.border#D8DAE4
descriptionForeground#5F6488
diffEditor.border#D8DAE4
diffEditor.diagonalFill#6e6a8626
diffEditor.insertedTextBackground#787cd520
diffEditor.insertedTextBorder#FDFDFEB0
diffEditor.removedTextBackground#68697429
diffEditor.removedTextBorder#FDFDFEB0
dropdown.background#F1F1F4
dropdown.border#6e6a8614
dropdown.foreground#4E5377
dropdown.listBackground#F1F1F4
editor.background#FDFDFE
editor.findMatchBackground#6e6a8626
editor.findMatchHighlightBackground#6e6a8626
editor.findRangeHighlightBackground#6e6a8626
editor.findRangeHighlightBorder#00000010
editor.focusedStackFrameHighlightBackground#6e6a8614
editor.foldBackground#F1F1F4
editor.foreground#4E5377
editor.hoverHighlightBackground#00000010
editor.inactiveSelectionBackground#6e6a860d
editor.inlineValuesBackground#00000010
editor.inlineValuesForeground#5F6488
editor.lineHighlightBackground#6e6a860d
editor.lineHighlightBorder#00000010
editor.linkedEditingBackground#F1F1F4
editor.rangeHighlightBackground#6e6a860d
editor.rangeHighlightBorder#00000010
editor.selectionBackground#6e6a8614
editor.selectionForeground#4E5377
editor.selectionHighlightBackground#6e6a8614
editor.selectionHighlightBorder#00000010
editor.snippetFinalTabstopHighlightBackground#6e6a8614
editor.snippetFinalTabstopHighlightBorder#F1F1F4
editor.snippetTabstopHighlightBackground#6e6a8614
editor.snippetTabstopHighlightBorder#F1F1F4
editor.stackFrameHighlightBackground#6e6a8614
editor.symbolHighlightBackground#6e6a8614
editor.symbolHighlightBorder#00000010
editor.wordHighlightBackground#6e6a8614
editor.wordHighlightBorder#00000010
editor.wordHighlightStrongBackground#6e6a8614
editor.wordHighlightStrongBorder#6e6a8614
editorBracketHighlight.foreground1#68697480
editorBracketHighlight.foreground2#1585b380
editorBracketHighlight.foreground3#10a38080
editorBracketHighlight.foreground4#787cd580
editorBracketHighlight.foreground5#de860180
editorBracketHighlight.foreground6#b81ae680
editorBracketMatch.background#00000010
editorBracketMatch.border#5F6488
editorBracketPairGuide.activeBackground1#1585b3
editorBracketPairGuide.activeBackground2#de8601
editorBracketPairGuide.activeBackground3#b81ae6
editorBracketPairGuide.activeBackground4#787cd5
editorBracketPairGuide.activeBackground5#10a380
editorBracketPairGuide.activeBackground6#686974
editorBracketPairGuide.background1#1585b380
editorBracketPairGuide.background2#de860180
editorBracketPairGuide.background3#b81ae680
editorBracketPairGuide.background4#787cd580
editorBracketPairGuide.background5#10a38080
editorBracketPairGuide.background6#68697480
editorCodeLens.foreground#de8601
editorCursor.background#4E5377
editorCursor.foreground#da68fb
editorError.border#00000010
editorError.foreground#686974
editorGhostText.foreground#5F6488
editorGroup.border#00000010
editorGroup.dropBackground#F1F1F4
editorGroup.emptyBackground#00000010
editorGroup.focusedEmptyBorder#00000010
editorGroupHeader.noTabsBackground#00000010
editorGroupHeader.tabsBackground#00000010
editorGroupHeader.tabsBorder#00000010
editorGutter.addedBackground#787cd5
editorGutter.background#00000010
editorGutter.commentRangeForeground#5F6488
editorGutter.deletedBackground#686974
editorGutter.foldingControlForeground#b81ae6
editorGutter.modifiedBackground#de8601
editorHint.border#00000010
editorHint.foreground#5F6488
editorHoverWidget.background#F1F1F4
editorHoverWidget.border#8388AD80
editorHoverWidget.foreground#5F6488
editorHoverWidget.highlightForeground#4E5377
editorHoverWidget.statusBarBackground#00000010
editorIndentGuide.activeBackground#8388AD
editorIndentGuide.background#6e6a8626
editorInfo.border#D8DAE4
editorInfo.foreground#787cd5
editorInlayHint.background#D8DAE4
editorInlayHint.foreground#5F6488
editorInlayHint.parameterBackground#D8DAE4
editorInlayHint.parameterForeground#b81ae6
editorInlayHint.typeBackground#D8DAE4
editorInlayHint.typeForeground#787cd5
editorLightBulb.foreground#1585b3
editorLightBulbAutoFix.foreground#de8601
editorLineNumber.activeForeground#4E5377
editorLineNumber.foreground#5F6488
editorLink.activeForeground#de8601
editorMarkerNavigation.background#F1F1F4
editorMarkerNavigationError.background#F1F1F4
editorMarkerNavigationInfo.background#F1F1F4
editorMarkerNavigationWarning.background#F1F1F4
editorOverviewRuler.addedForeground#787cd580
editorOverviewRuler.background#FDFDFE
editorOverviewRuler.border#6e6a8626
editorOverviewRuler.bracketMatchForeground#5F6488
editorOverviewRuler.commonContentForeground#6e6a860d
editorOverviewRuler.currentContentForeground#6e6a8614
editorOverviewRuler.deletedForeground#68697480
editorOverviewRuler.errorForeground#68697480
editorOverviewRuler.findMatchForeground#6e6a8626
editorOverviewRuler.incomingContentForeground#b81ae680
editorOverviewRuler.infoForeground#787cd580
editorOverviewRuler.modifiedForeground#de860180
editorOverviewRuler.rangeHighlightForeground#6e6a8626
editorOverviewRuler.selectionHighlightForeground#6e6a8626
editorOverviewRuler.warningForeground#10a38080
editorOverviewRuler.wordHighlightForeground#6e6a8614
editorOverviewRuler.wordHighlightStrongForeground#6e6a8626
editorPane.background#00000010
editorRuler.foreground#6e6a8626
editorSuggestWidget.background#F1F1F4
editorSuggestWidget.border#00000010
editorSuggestWidget.focusHighlightForeground#de8601
editorSuggestWidget.foreground#5F6488
editorSuggestWidget.highlightForeground#de8601
editorSuggestWidget.selectedBackground#6e6a8614
editorSuggestWidget.selectedForeground#4E5377
editorSuggestWidget.selectedIconForeground#4E5377
editorUnnecessaryCode.border#00000010
editorUnnecessaryCode.opacity#00000080
editorWarning.border#00000010
editorWarning.foreground#10a380
editorWhitespace.foreground#8388AD
editorWidget.background#F1F1F4
editorWidget.border#D8DAE4
editorWidget.foreground#5F6488
editorWidget.resizeBorder#8388AD
errorForeground#686974
extensionBadge.remoteBackground#b81ae6
extensionBadge.remoteForeground#FDFDFE
extensionButton.prominentBackground#de8601
extensionButton.prominentForeground#FDFDFE
extensionButton.prominentHoverBackground#de8601e6
extensionIcon.starForeground#de8601
extensionIcon.verifiedForeground#b81ae6
focusBorder#6e6a8614
foreground#4E5377
gitDecoration.addedResourceForeground#787cd5
gitDecoration.conflictingResourceForeground#686974
gitDecoration.deletedResourceForeground#5F6488
gitDecoration.ignoredResourceForeground#8388AD
gitDecoration.modifiedResourceForeground#de8601
gitDecoration.renamedResourceForeground#1585b3
gitDecoration.stageDeletedResourceForeground#686974
gitDecoration.stageModifiedResourceForeground#b81ae6
gitDecoration.submoduleResourceForeground#10a380
gitDecoration.untrackedResourceForeground#10a380
icon.foreground#5F6488
input.background#D8DAE480
input.border#6e6a8614
input.foreground#4E5377
input.placeholderForeground#5F6488
inputOption.activeBackground#de8601
inputOption.activeBorder#00000010
inputOption.activeForeground#FDFDFE
inputValidation.errorBackground#00000010
inputValidation.errorBorder#00000010
inputValidation.errorForeground#686974
inputValidation.infoBackground#00000010
inputValidation.infoBorder#00000010
inputValidation.infoForeground#787cd5
inputValidation.warningBackground#00000010
inputValidation.warningBorder#00000010
inputValidation.warningForeground#787cd580
keybindingLabel.background#D8DAE4
keybindingLabel.border#6e6a8626
keybindingLabel.bottomBorder#6e6a8626
keybindingLabel.foreground#b81ae6
keybindingTable.headerBackground#D8DAE4
keybindingTable.rowsBackground#F1F1F4
list.activeSelectionBackground#6e6a8614
list.activeSelectionForeground#4E5377
list.activeSelectionIconForeground#4E5377
list.deemphasizedForeground#5F6488
list.dropBackground#F1F1F4
list.errorForeground#686974
list.filterMatchBackground#F1F1F4
list.filterMatchBorder#de8601
list.focusBackground#6e6a8626
list.focusForeground#4E5377
list.focusOutline#6e6a8614
list.highlightForeground#de8601
list.hoverBackground#6e6a860d
list.hoverForeground#4E5377
list.inactiveFocusBackground#6e6a860d
list.inactiveSelectionBackground#F1F1F4
list.inactiveSelectionForeground#4E5377
list.inactiveSelectionIconForeground#5F6488
list.invalidItemForeground#686974
list.warningForeground#10a380
listFilterWidget.background#F1F1F4
listFilterWidget.noMatchesOutline#686974
listFilterWidget.outline#D8DAE4
menu.background#F1F1F4
menu.border#6e6a860d
menu.foreground#4E5377
menu.selectionBackground#6e6a8614
menu.selectionBorder#D8DAE4
menu.selectionForeground#4E5377
menu.separatorBackground#4E5377
menubar.selectionBackground#6e6a8614
menubar.selectionBorder#6e6a860d
menubar.selectionForeground#4E5377
merge.border#D8DAE4
merge.commonContentBackground#6e6a8614
merge.commonHeaderBackground#6e6a8614
merge.currentContentBackground#10a38080
merge.currentHeaderBackground#10a38080
merge.incomingContentBackground#787cd580
merge.incomingHeaderBackground#787cd580
minimap.background#F1F1F4
minimap.errorHighlight#68697480
minimap.findMatchHighlight#6e6a8614
minimap.selectionHighlight#6e6a8614
minimap.warningHighlight#10a38080
minimapGutter.addedBackground#787cd5
minimapGutter.deletedBackground#686974
minimapGutter.modifiedBackground#de8601
minimapSlider.activeBackground#6e6a8626
minimapSlider.background#6e6a8614
minimapSlider.hoverBackground#6e6a8614
notificationCenter.border#6e6a8614
notificationCenterHeader.background#F1F1F4
notificationCenterHeader.foreground#5F6488
notificationLink.foreground#b81ae6
notifications.background#F1F1F4
notifications.border#6e6a8614
notifications.foreground#4E5377
notificationsErrorIcon.foreground#686974
notificationsInfoIcon.foreground#787cd5
notificationsWarningIcon.foreground#10a380
notificationToast.border#6e6a8614
panel.background#F1F1F4
panel.border#00000010
panel.dropBorder#D8DAE4
panelInput.border#F1F1F4
panelSection.dropBackground#6e6a8614
panelSectionHeader.background#F1F1F4
panelSectionHeader.foreground#4E5377
panelTitle.activeBorder#6e6a8626
panelTitle.activeForeground#4E5377
panelTitle.inactiveForeground#5F6488
peekView.border#D8DAE4
peekViewEditor.background#F1F1F4
peekViewEditor.matchHighlightBackground#6e6a8626
peekViewResult.background#F1F1F4
peekViewResult.fileForeground#5F6488
peekViewResult.lineForeground#5F6488
peekViewResult.matchHighlightBackground#6e6a8626
peekViewResult.selectionBackground#6e6a8614
peekViewResult.selectionForeground#4E5377
peekViewTitle.background#D8DAE4
peekViewTitleDescription.foreground#5F6488
pickerGroup.border#6e6a8626
pickerGroup.foreground#b81ae6
ports.iconRunningProcessForeground#de8601
problemsErrorIcon.foreground#686974
problemsInfoIcon.foreground#787cd5
problemsWarningIcon.foreground#10a380
progressBar.background#de8601
quickInput.background#F1F1F4
quickInput.foreground#5F6488
quickInputList.focusBackground#6e6a8614
quickInputList.focusForeground#4E5377
quickInputList.focusIconForeground#4E5377
scrollbar.shadow#00000010
scrollbarSlider.activeBackground#6e6a8626
scrollbarSlider.background#6e6a860d
scrollbarSlider.hoverBackground#6e6a8614
searchEditor.findMatchBackground#6e6a8614
selection.background#6e6a8626
settings.focusedRowBackground#F1F1F4
settings.focusedRowBorder#6e6a8614
settings.headerForeground#4E5377
settings.modifiedItemIndicator#de8601
settings.rowHoverBackground#F1F1F4
sideBar.background#FDFDFE
sideBar.dropBackground#F1F1F4
sideBar.foreground#5F6488
sideBarSectionHeader.background#00000010
sideBarSectionHeader.border#6e6a8614
statusBar.background#FDFDFE
statusBar.debuggingBackground#b81ae6
statusBar.debuggingForeground#FDFDFE
statusBar.foreground#5F6488
statusBar.noFolderBackground#FDFDFE
statusBar.noFolderForeground#5F6488
statusBarItem.activeBackground#6e6a8626
statusBarItem.errorBackground#FDFDFE
statusBarItem.errorForeground#686974
statusBarItem.hoverBackground#6e6a8614
statusBarItem.prominentBackground#D8DAE4
statusBarItem.prominentForeground#4E5377
statusBarItem.prominentHoverBackground#6e6a8614
statusBarItem.remoteBackground#FDFDFE
statusBarItem.remoteForeground#10a380
symbolIcon.arrayForeground#5F6488
symbolIcon.classForeground#5F6488
symbolIcon.colorForeground#5F6488
symbolIcon.constantForeground#5F6488
symbolIcon.constructorForeground#5F6488
symbolIcon.enumeratorForeground#5F6488
symbolIcon.enumeratorMemberForeground#5F6488
symbolIcon.eventForeground#5F6488
symbolIcon.fieldForeground#5F6488
symbolIcon.fileForeground#5F6488
symbolIcon.folderForeground#5F6488
symbolIcon.functionForeground#5F6488
symbolIcon.interfaceForeground#5F6488
symbolIcon.keyForeground#5F6488
symbolIcon.keywordForeground#5F6488
symbolIcon.methodForeground#5F6488
symbolIcon.moduleForeground#5F6488
symbolIcon.namespaceForeground#5F6488
symbolIcon.nullForeground#5F6488
symbolIcon.numberForeground#5F6488
symbolIcon.objectForeground#5F6488
symbolIcon.operatorForeground#5F6488
symbolIcon.packageForeground#5F6488
symbolIcon.propertyForeground#5F6488
symbolIcon.referenceForeground#5F6488
symbolIcon.snippetForeground#5F6488
symbolIcon.stringForeground#5F6488
symbolIcon.structForeground#5F6488
symbolIcon.textForeground#5F6488
symbolIcon.typeParameterForeground#5F6488
symbolIcon.unitForeground#5F6488
symbolIcon.variableForeground#5F6488
tab.activeBackground#6e6a860d
tab.activeBorderTop#da68fb
tab.activeForeground#4E5377
tab.activeModifiedBorder#787cd5
tab.border#00000010
tab.hoverBackground#6e6a8614
tab.inactiveBackground#00000010
tab.inactiveForeground#5F6488
tab.inactiveModifiedBorder#787cd580
tab.lastPinnedBorder#8388AD
tab.unfocusedActiveBackground#00000010
tab.unfocusedHoverBackground#00000010
tab.unfocusedInactiveBackground#00000010
tab.unfocusedInactiveModifiedBorder#787cd580
terminal.ansiBlack#D8DAE4
terminal.ansiBlue#787cd5
terminal.ansiBrightBlack#5F6488
terminal.ansiBrightBlue#787cd5
terminal.ansiBrightCyan#de8601
terminal.ansiBrightGreen#1585b3
terminal.ansiBrightMagenta#b81ae6
terminal.ansiBrightRed#686974
terminal.ansiBrightWhite#4E5377
terminal.ansiBrightYellow#10a380
terminal.ansiCyan#de8601
terminal.ansiGreen#1585b3
terminal.ansiMagenta#b81ae6
terminal.ansiRed#686974
terminal.ansiWhite#4E5377
terminal.ansiYellow#10a380
terminal.dropBackground#6e6a8614
terminal.foreground#4E5377
terminal.selectionBackground#6e6a8614
terminal.tab.activeBorder#4E5377
terminalCursor.background#4E5377
terminalCursor.foreground#8388AD
textBlockQuote.background#F1F1F4
textBlockQuote.border#6e6a8614
textCodeBlock.background#F1F1F4
textLink.activeForeground#b81ae6e6
textLink.foreground#b81ae6
textPreformat.foreground#10a380
textSeparator.foreground#5F6488
titleBar.activeBackground#FDFDFE
titleBar.activeForeground#5F6488
titleBar.inactiveBackground#F1F1F4
titleBar.inactiveForeground#5F6488
toolbar.activeBackground#6e6a8626
toolbar.hoverBackground#6e6a8614
tree.indentGuidesStroke#5F6488
walkThrough.embeddedEditorBackground#FDFDFE
welcomePage.background#FDFDFE
welcomePage.buttonBackground#F1F1F4
welcomePage.buttonHoverBackground#D8DAE4
widget.shadow#D8DAE44d
window.activeBorder#F1F1F4
window.inactiveBorder#F1F1F4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8388AD	italic
constant	#1585b3	—
constant.numeric, constant.language, constant.charcter.escape	#de8601	—
entity.name	#de8601	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#787cd5	—
entity.other.attribute-name, entity.other.inherited-class	#b81ae6	italic
invalid	#686974	—
invalid.deprecated	#5F6488	—
keyword	#1585b3	—
meta.tag, meta.brace	#4E5377	—
meta.import, meta.export	#1585b3	—
meta.directive.vue	#b81ae6	italic
meta.property-name.css	#787cd5	—
meta.property-value.css	#10a380	—
meta.tag.other.html	#5F6488	—
punctuation	#5F6488	—
punctuation.accessor	#1585b3	—
punctuation.definition.string	#10a380	—
punctuation.definition.tag	#8388AD	—
storage.type, storage.modifier	#1585b3	—
string	#10a380	—
support	#787cd5	—
support.constant	#10a380	—
support.function	#686974	italic
variable	#de8601	italic
variable.other, variable.language, variable.function, variable.argument	#4E5377	—
variable.parameter	#b81ae6	—

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