Ayu

Name: Ayu
Author: teabyii

Publisher: teabyiiThemes in package: 6

A simple theme with bright colors and comes in three versions — dark, light and mirage for all day long comfortable work.

GitHub

Color themes

VS Code preview

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

Ayu — Ayu Mirage

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.

actionBar.toggledBackground#63759926
activityBar.activeBorder#ffcc66
activityBar.background#1f2430
activityBar.border#1f2430
activityBar.foreground#707a8ccc
activityBar.inactiveForeground#707a8c99
activityBarBadge.background#ffcc66
activityBarBadge.foreground#735923
activityBarTop.activeBorder#ffcc66
activityBarTop.foreground#808999
badge.background#ffcc6633
badge.foreground#ffcc66
button.background#ffcc66
button.border#7359231a
button.foreground#735923
button.hoverBackground#f9c55d
button.secondaryBackground#707a8c33
button.secondaryForeground#cccac2
button.secondaryHoverBackground#707a8c80
button.separator#7359234d
chat.checkpointSeparator#6e7c8f
chat.editedFileForeground#80bfff
chat.requestBackground#1f2430
chat.requestBorder#63759926
chat.requestBubbleBackground#69758c1f
chat.requestBubbleHoverBackground#63759926
chat.slashCommandBackground#5ccfe633
chat.slashCommandForeground#5ccfe6
commandCenter.activeBackground#63759926
commandCenter.activeBorder#63759900
commandCenter.activeForeground#707a8c
commandCenter.background#242936
commandCenter.border#171b24
commandCenter.foreground#707a8c
commandCenter.inactiveBorder#171b24
debugConsoleInputIcon.foreground#ffcc66
debugExceptionWidget.background#282e3b
debugExceptionWidget.border#171b24
debugIcon.breakpointDisabledForeground#f29e7480
debugIcon.breakpointForeground#f29e74
debugToolBar.background#282e3b
descriptionForeground#707a8c
diffEditor.diagonalFill#171b24
diffEditor.insertedTextBackground#87d96c1f
diffEditor.removedTextBackground#f279831f
disabledForeground#707a8c80
dropdown.background#282e3b
dropdown.border#171b24
dropdown.foreground#707a8c
editor.background#1f2430
editor.findMatchBackground#736950
editor.findMatchHighlightBackground#73695066
editor.foreground#cccac2
editor.inactiveSelectionBackground#409fff21
editor.lineHighlightBackground#1a1f29
editor.rangeHighlightBackground#73695033
editor.selectionBackground#409fff40
editor.selectionHighlightBackground#87d96c26
editor.selectionHighlightBorder#87d96c00
editor.snippetTabstopHighlightBackground#87d96c33
editor.wordHighlightBackground#80bfff14
editor.wordHighlightBorder#80bfff80
editor.wordHighlightStrongBackground#87d96c14
editor.wordHighlightStrongBorder#87d96c80
editorBracketMatch.background#707a8c4d
editorBracketMatch.border#707a8c4d
editorCodeLens.foreground#6e7c8f
editorCursor.foreground#ffcc66
editorError.foreground#ff6666
editorGroup.background#282e3b
editorGroup.border#171b24
editorGroupHeader.noTabsBackground#1f2430
editorGroupHeader.tabsBackground#1f2430
editorGroupHeader.tabsBorder#1f2430
editorGutter.addedBackground#87d96c
editorGutter.deletedBackground#f27983
editorGutter.modifiedBackground#80bfff
editorHoverWidget.background#282e3b
editorHoverWidget.border#171b24
editorIndentGuide.activeBackground#707a8c70
editorIndentGuide.background#707a8c3b
editorInlayHint.foreground#cccac280
editorLineNumber.activeForeground#707a8c
editorLineNumber.foreground#707a8c80
editorLink.activeForeground#ffcc66
editorMarkerNavigation.background#282e3b
editorOverviewRuler.addedForeground#87d96c
editorOverviewRuler.border#171b24
editorOverviewRuler.bracketMatchForeground#707a8cb3
editorOverviewRuler.deletedForeground#f27983
editorOverviewRuler.errorForeground#ff6666
editorOverviewRuler.findMatchForeground#736950
editorOverviewRuler.modifiedForeground#80bfff
editorOverviewRuler.warningForeground#ffcc66
editorOverviewRuler.wordHighlightForeground#80bfff66
editorOverviewRuler.wordHighlightStrongForeground#87d96c66
editorRuler.foreground#707a8c3b
editorStickyScroll.border#171b24
editorStickyScroll.shadow#00000033
editorStickyScrollHover.background#69758c1f
editorSuggestWidget.background#282e3b
editorSuggestWidget.border#171b24
editorSuggestWidget.highlightForeground#ffcc66
editorSuggestWidget.selectedBackground#63759926
editorWarning.foreground#ffcc66
editorWhitespace.foreground#707a8c80
editorWidget.background#282e3b
editorWidget.border#171b24
editorWidget.resizeBorder#282e3b
errorForeground#ff6666
extensionButton.prominentBackground#ffcc66
extensionButton.prominentForeground#735923
extensionButton.prominentHoverBackground#fcc85f
focusBorder#ffcc66
foreground#707a8c
gitDecoration.conflictingResourceForeground
gitDecoration.deletedResourceForeground#f27983
gitDecoration.ignoredResourceForeground#707a8c80
gitDecoration.modifiedResourceForeground#80bfff
gitDecoration.submoduleResourceForeground#dfbfff
gitDecoration.untrackedResourceForeground#87d96c
icon.foreground#707a8c
inlineChat.background#282e3b
inlineChat.border#171b24
inlineChat.foreground#cccac2
inlineChat.shadow#00000033
inlineChatDiff.inserted#87d96c33
inlineChatDiff.removed#f2798333
inlineChatInput.background#242936
inlineChatInput.border#171b24
inlineChatInput.focusBorder#ffcc66b3
inlineChatInput.placeholderForeground#707a8c80
inlineEdit.gutterIndicator.background#171b24
inlineEdit.gutterIndicator.primaryBackground#ffcc661a
inlineEdit.gutterIndicator.primaryBorder#ffcc66
inlineEdit.gutterIndicator.primaryForeground#ffcc66
inlineEdit.gutterIndicator.secondaryBackground#707a8c1a
inlineEdit.gutterIndicator.secondaryBorder#707a8c80
inlineEdit.gutterIndicator.secondaryForeground#707a8c
inlineEdit.gutterIndicator.successfulBackground#87d96c1a
inlineEdit.gutterIndicator.successfulBorder#87d96c
inlineEdit.gutterIndicator.successfulForeground#87d96c
inlineEdit.modifiedBackground#87d96c1a
inlineEdit.modifiedBorder#87d96c80
inlineEdit.modifiedChangedLineBackground#87d96c26
inlineEdit.modifiedChangedTextBackground#87d96c40
inlineEdit.originalBackground#f279831a
inlineEdit.originalBorder#f2798380
inlineEdit.originalChangedLineBackground#f2798326
inlineEdit.originalChangedTextBackground#f2798340
input.background#242936
input.border#707a8c33
input.foreground#cccac2
input.placeholderForeground#707a8c80
inputOption.activeBackground#ffcc661a
inputOption.activeBorder#ffcc6633
inputOption.activeForeground#ffcc66
inputOption.hoverBackground#707a8c33
inputValidation.errorBackground#242936
inputValidation.errorBorder#ff6666
inputValidation.infoBackground#1f2430
inputValidation.infoBorder#5ccfe6
inputValidation.warningBackground#1f2430
inputValidation.warningBorder#ffcd66
keybindingLabel.background#707a8c1a
keybindingLabel.border#cccac21a
keybindingLabel.bottomBorder#cccac21a
keybindingLabel.foreground#cccac2
list.activeSelectionBackground#63759926
list.activeSelectionForeground#cccac2
list.deemphasizedForeground#ff6666
list.errorForeground#ff6666
list.filterMatchBackground#6a614966
list.filterMatchBorder#73695066
list.focusBackground#63759926
list.focusForeground#cccac2
list.focusOutline#63759926
list.highlightForeground#ffcc66
list.hoverBackground#63759926
list.inactiveSelectionBackground#69758c1f
list.inactiveSelectionForeground#707a8c
list.invalidItemForeground#707a8c4d
listFilterWidget.background#282e3b
listFilterWidget.noMatchesOutline#ff6666
listFilterWidget.outline#ffcc66
menu.background#1c212c
menu.border#171b24
menu.foreground#707a8c
menu.selectionBackground#69758c1f
menu.selectionBorder#63759926
menu.separatorBackground#171b24
minimap.background#1f2430
minimap.errorHighlight#ff6666
minimap.findMatchHighlight#736950
minimap.selectionHighlight#409fff40
minimapGutter.addedBackground#87d96c
minimapGutter.deletedBackground#f27983
minimapGutter.modifiedBackground#80bfff
multiDiffEditor.background#1f2430
multiDiffEditor.border#171b24
multiDiffEditor.headerBackground#282e3b
panel.background#1f2430
panel.border#171b24
panelStickyScroll.border#171b24
panelStickyScroll.shadow#00000033
panelTitle.activeBorder#ffcc66
panelTitle.activeForeground#cccac2
panelTitle.inactiveForeground#707a8c
peekView.border#63759926
peekViewEditor.background#282e3b
peekViewEditor.matchHighlightBackground#73695066
peekViewEditor.matchHighlightBorder#6a614966
peekViewResult.background#282e3b
peekViewResult.fileForeground#cccac2
peekViewResult.lineForeground#707a8c
peekViewResult.matchHighlightBackground#73695066
peekViewResult.selectionBackground#63759926
peekViewTitle.background#63759926
peekViewTitleDescription.foreground#707a8c
peekViewTitleLabel.foreground#cccac2
pickerGroup.border#171b24
pickerGroup.foreground#707a8c80
profileBadge.background#ffcc66
profileBadge.foreground#735923
progressBar.background#ffcc66
scrollbar.shadow#171b2400
scrollbarSlider.activeBackground#707a8cb3
scrollbarSlider.background#707a8c66
scrollbarSlider.hoverBackground#707a8c99
selection.background#409fff40
settings.headerForeground#cccac2
settings.modifiedItemIndicator#80bfff
sideBar.background#1f2430
sideBar.border#1f2430
sideBarSectionHeader.background#1f2430
sideBarSectionHeader.border#1f2430
sideBarSectionHeader.foreground#707a8c
sideBarStickyScroll.border#171b24
sideBarStickyScroll.shadow#00000033
sideBarTitle.foreground#707a8c
statusBar.background#1f2430
statusBar.border#1f2430
statusBar.debuggingBackground#f29e74
statusBar.debuggingForeground#242936
statusBar.foreground#707a8c
statusBar.noFolderBackground#282e3b
statusBarItem.activeBackground#707a8c33
statusBarItem.hoverBackground#707a8c33
statusBarItem.prominentBackground#171b24
statusBarItem.prominentHoverBackground#00000030
statusBarItem.remoteBackground#ffcc66
statusBarItem.remoteForeground#735923
symbolIcon.arrayForeground#73d0ff
symbolIcon.booleanForeground#dfbfff
symbolIcon.classForeground#73d0ff
symbolIcon.colorForeground#d9be98
symbolIcon.constantForeground#dfbfff
symbolIcon.constructorForeground#ffcd66
symbolIcon.enumeratorForeground#73d0ff
symbolIcon.enumeratorMemberForeground#dfbfff
symbolIcon.eventForeground#d9be98
symbolIcon.fieldForeground#f28779
symbolIcon.fileForeground#707a8c
symbolIcon.folderForeground#707a8c
symbolIcon.functionForeground#ffcd66
symbolIcon.interfaceForeground#73d0ff
symbolIcon.keyForeground#5ccfe6
symbolIcon.keywordForeground#ffa659
symbolIcon.methodForeground#ffcd66
symbolIcon.moduleForeground#d5ff80
symbolIcon.namespaceForeground#d5ff80
symbolIcon.nullForeground#dfbfff
symbolIcon.numberForeground#dfbfff
symbolIcon.objectForeground#73d0ff
symbolIcon.operatorForeground#f29e74
symbolIcon.packageForeground#d5ff80
symbolIcon.propertyForeground#f28779
symbolIcon.referenceForeground#73d0ff
symbolIcon.snippetForeground#d9be98
symbolIcon.stringForeground#d5ff80
symbolIcon.structForeground#73d0ff
symbolIcon.textForeground#cccac2
symbolIcon.typeParameterForeground#73d0ff
symbolIcon.unitForeground#dfbfff
symbolIcon.variableForeground#cccac2
tab.activeBackground#1f2430
tab.activeBorder#ffcc66
tab.activeForeground#cccac2
tab.border#1f2430
tab.inactiveBackground#1f2430
tab.inactiveForeground#707a8c
tab.unfocusedActiveBorder#707a8c
tab.unfocusedActiveForeground#707a8c
tab.unfocusedInactiveForeground#707a8c
terminal.ansiBlack#171b24
terminal.ansiBlue#6acdff
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#73d0ff
terminal.ansiBrightCyan#95e6cb
terminal.ansiBrightGreen#d5ff80
terminal.ansiBrightMagenta#dfbfff
terminal.ansiBrightRed#f28779
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffcd66
terminal.ansiCyan#93e2c8
terminal.ansiGreen#87d96c
terminal.ansiMagenta#ddbbff
terminal.ansiRed#f28273
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#fcca60
terminal.background#1f2430
terminal.foreground#cccac2
terminalCommandGuide.foreground#707a8c4d
terminalStickyScroll.border#171b24
terminalStickyScroll.shadow#00000033
terminalStickyScrollHover.background#69758c1f
textBlockQuote.background#282e3b
textLink.activeForeground#ffcc66
textLink.foreground#ffcc66
textPreformat.foreground#cccac2
titleBar.activeBackground#1f2430
titleBar.activeForeground#707a8c
titleBar.border#1f2430
titleBar.inactiveBackground#1f2430
titleBar.inactiveForeground#707a8cb3
toolbar.hoverBackground#63759926
tree.indentGuidesStroke#707a8c70
walkThrough.embeddedEditorBackground#282e3b
welcomePage.buttonBackground#ffcc6666
welcomePage.progress.background#1a1f29
welcomePage.tileBackground#1f2430
welcomePage.tileShadow#00000033
widget.border#171b24
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#cccac2	—
comment	#6e7c8f	italic
string, constant.other.symbol	#d5ff80	—
string.regexp, constant.character, constant.other	#95e6cb	—
constant.numeric	#dfbfff	—
constant.language	#dfbfff	—
variable, variable.parameter.function-call	#cccac2	—
variable.member	#f28779	—
variable.language	#5ccfe6	italic
storage	#ffa659	—
keyword	#ffa659	—
keyword.operator	#f29e74	—
punctuation.separator, punctuation.terminator	#cccac2b3	—
punctuation.section	#cccac2	—
punctuation.accessor	#f29e74	—
punctuation.definition.template-expression	#ffa659	—
punctuation.section.embedded	#ffa659	—
meta.embedded	#cccac2	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#73d0ff	—
entity.other.inherited-class	#5ccfe6	—
storage.type.function	#ffa659	—
source.java storage.type.primitive	#5ccfe6	—
entity.name.function	#ffcd66	—
variable.parameter, meta.parameter	#dfbfff	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#ffcd66	—
support.function, support.macro	#f28779	—
entity.name.import, entity.name.package	#d5ff80	—
entity.name	#73d0ff	—
entity.name.tag, meta.tag.sgml	#5ccfe6	—
support.class.component	#73d0ff	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#5ccfe680	—
entity.other.attribute-name	#ffcd66	—
entity.other.attribute-name.pseudo-class	#95e6cb	—
support.constant	#f29e74	italic
support.type, support.class, source.go storage.type	#5ccfe6	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator	#d9be98	—
invalid	#ff6666	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#ffcd66	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#73d0ff	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#6e7c8f	—
support.type.property-name	#5ccfe6	normal
constant.numeric.line-number.find-in-files - match	#6e7c8f	—
constant.numeric.line-number.match	#ffa659	—
entity.name.filename.find-in-files	#d5ff80	—
message.error	#ff6666	—
markup.heading, markup.heading entity.name	#d5ff80	bold
markup.underline.link, string.other.link	#5ccfe6	—
markup.italic, emphasis	#f28779	italic
markup.bold	#f28779	bold
markup.underline	—	underline
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#6e7c8f	bold
markup.quote	#95e6cb	italic
markup.list punctuation.definition.list.begin	#ffcd66	—
markup.inserted	#87d96c	—
markup.changed	#80bfff	—
markup.deleted	#f27983	—
markup.strike	#d9be98	—
markup.strong	—	bold
markup.table	#5ccfe6	—
text.html.markdown markup.inline.raw	#f29e74	—
text.html.markdown meta.dummy.line-break	#6e7c8f	—
punctuation.definition.markdown	#6e7c8f	—

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