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 Light Bordered

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

actionBar.toggledBackground#6b7d8f24
activityBar.activeBorder#f29718
activityBar.background#f8f9fa
activityBar.border#6b7d8f1f
activityBar.foreground#828e9fcc
activityBar.inactiveForeground#828e9f99
activityBarBadge.background#f29718
activityBarBadge.foreground#7e4b01
activityBarTop.activeBorder#f29718
activityBarTop.foreground#788597
badge.background#f2971833
badge.foreground#ea9216
button.background#f29718
button.border#7e4b011a
button.foreground#7e4b01
button.hoverBackground#ea9216
button.secondaryBackground#828e9f33
button.secondaryForeground#5c6166
button.secondaryHoverBackground#828e9f80
button.separator#7e4b014d
chat.checkpointSeparator#adaeb1
chat.editedFileForeground#478acc
chat.requestBackground#f8f9fa
chat.requestBorder#6b7d8f24
chat.requestBubbleBackground#6b7d8f1f
chat.requestBubbleHoverBackground#6b7d8f24
chat.slashCommandBackground#55b4d433
chat.slashCommandForeground#55b4d4
commandCenter.activeBackground#6b7d8f24
commandCenter.activeBorder#6b7d8f00
commandCenter.activeForeground#828e9f
commandCenter.background#fcfcfc
commandCenter.border#6b7d8f1f
commandCenter.foreground#828e9f
commandCenter.inactiveBorder#6b7d8f1f
debugConsoleInputIcon.foreground#f29718
debugExceptionWidget.background#fafafa
debugExceptionWidget.border#6b7d8f1f
debugIcon.breakpointDisabledForeground#f2a19180
debugIcon.breakpointForeground#f2a191
debugToolBar.background#fafafa
descriptionForeground#828e9f
diffEditor.diagonalFill#6b7d8f1f
diffEditor.insertedTextBackground#6cbf431f
diffEditor.removedTextBackground#ff73831f
disabledForeground#828e9f80
dropdown.background#fafafa
dropdown.border#6b7d8f1f
dropdown.foreground#828e9f
editor.background#fcfcfc
editor.findMatchBackground#ffe294
editor.findMatchHighlightBackground#ffe29480
editor.foreground#5c6166
editor.inactiveSelectionBackground#035bd612
editor.lineHighlightBackground#828e9f1a
editor.rangeHighlightBackground#ffe29433
editor.selectionBackground#035bd626
editor.selectionHighlightBackground#6cbf4326
editor.selectionHighlightBorder#6cbf4300
editor.snippetTabstopHighlightBackground#6cbf4333
editor.wordHighlightBackground#478acc14
editor.wordHighlightBorder#478acc80
editor.wordHighlightStrongBackground#6cbf4314
editor.wordHighlightStrongBorder#6cbf4380
editorBracketMatch.background#828e9f4d
editorBracketMatch.border#828e9f4d
editorCodeLens.foreground#adaeb1
editorCursor.foreground#f29718
editorError.foreground#e65050
editorGroup.background#fafafa
editorGroup.border#6b7d8f1f
editorGroupHeader.noTabsBackground#f8f9fa
editorGroupHeader.tabsBackground#f8f9fa
editorGroupHeader.tabsBorder#6b7d8f1f
editorGutter.addedBackground#6cbf43
editorGutter.deletedBackground#ff7383
editorGutter.modifiedBackground#478acc
editorHoverWidget.background#fafafa
editorHoverWidget.border#6b7d8f1f
editorIndentGuide.activeBackground#828e9f59
editorIndentGuide.background#828e9f2e
editorInlayHint.foreground#5c616680
editorLineNumber.activeForeground#828e9fcc
editorLineNumber.foreground#828e9f66
editorLink.activeForeground#f29718
editorMarkerNavigation.background#fafafa
editorOverviewRuler.addedForeground#6cbf43
editorOverviewRuler.border#6b7d8f1f
editorOverviewRuler.bracketMatchForeground#828e9fb3
editorOverviewRuler.deletedForeground#ff7383
editorOverviewRuler.errorForeground#e65050
editorOverviewRuler.findMatchForeground#ffe294
editorOverviewRuler.modifiedForeground#478acc
editorOverviewRuler.warningForeground#f29718
editorOverviewRuler.wordHighlightForeground#478acc66
editorOverviewRuler.wordHighlightStrongForeground#6cbf4366
editorRuler.foreground#828e9f2e
editorStickyScroll.border#6b7d8f1f
editorStickyScroll.shadow#6b7d8f12
editorStickyScrollHover.background#6b7d8f1f
editorSuggestWidget.background#fafafa
editorSuggestWidget.border#6b7d8f1f
editorSuggestWidget.highlightForeground#f29718
editorSuggestWidget.selectedBackground#6b7d8f24
editorWarning.foreground#f29718
editorWhitespace.foreground#828e9f66
editorWidget.background#fafafa
editorWidget.border#6b7d8f1f
editorWidget.resizeBorder#fafafa
errorForeground#e65050
extensionButton.prominentBackground#f29718
extensionButton.prominentForeground#7e4b01
extensionButton.prominentHoverBackground#ee9417
focusBorder#f29718
foreground#828e9f
gitDecoration.conflictingResourceForeground
gitDecoration.deletedResourceForeground#ff7383
gitDecoration.ignoredResourceForeground#828e9f80
gitDecoration.modifiedResourceForeground#478acc
gitDecoration.submoduleResourceForeground#a37acc
gitDecoration.untrackedResourceForeground#6cbf43
icon.foreground#828e9f
inlineChat.background#fafafa
inlineChat.border#6b7d8f1f
inlineChat.foreground#5c6166
inlineChat.shadow#6b7d8f12
inlineChatDiff.inserted#6cbf4333
inlineChatDiff.removed#ff738333
inlineChatInput.background#fcfcfc
inlineChatInput.border#6b7d8f1f
inlineChatInput.focusBorder#f29718b3
inlineChatInput.placeholderForeground#828e9f80
inlineEdit.gutterIndicator.background#6b7d8f1f
inlineEdit.gutterIndicator.primaryBackground#f297181a
inlineEdit.gutterIndicator.primaryBorder#f29718
inlineEdit.gutterIndicator.primaryForeground#f29718
inlineEdit.gutterIndicator.secondaryBackground#828e9f1a
inlineEdit.gutterIndicator.secondaryBorder#828e9f80
inlineEdit.gutterIndicator.secondaryForeground#828e9f
inlineEdit.gutterIndicator.successfulBackground#6cbf431a
inlineEdit.gutterIndicator.successfulBorder#6cbf43
inlineEdit.gutterIndicator.successfulForeground#6cbf43
inlineEdit.modifiedBackground#6cbf431a
inlineEdit.modifiedBorder#6cbf4380
inlineEdit.modifiedChangedLineBackground#6cbf4326
inlineEdit.modifiedChangedTextBackground#6cbf4340
inlineEdit.originalBackground#ff73831a
inlineEdit.originalBorder#ff738380
inlineEdit.originalChangedLineBackground#ff738326
inlineEdit.originalChangedTextBackground#ff738340
input.background#fcfcfc
input.border#828e9f33
input.foreground#5c6166
input.placeholderForeground#828e9f80
inputOption.activeBackground#f297181a
inputOption.activeBorder#f2971833
inputOption.activeForeground#f29718
inputOption.hoverBackground#828e9f33
inputValidation.errorBackground#fcfcfc
inputValidation.errorBorder#e65050
inputValidation.infoBackground#f8f9fa
inputValidation.infoBorder#55b4d4
inputValidation.warningBackground#f8f9fa
inputValidation.warningBorder#eba400
keybindingLabel.background#828e9f1a
keybindingLabel.border#5c61661a
keybindingLabel.bottomBorder#5c61661a
keybindingLabel.foreground#5c6166
list.activeSelectionBackground#6b7d8f24
list.activeSelectionForeground#5c6166
list.deemphasizedForeground#e65050
list.errorForeground#e65050
list.filterMatchBackground#fad77880
list.filterMatchBorder#ffe29480
list.focusBackground#6b7d8f24
list.focusForeground#5c6166
list.focusOutline#6b7d8f24
list.highlightForeground#f29718
list.hoverBackground#6b7d8f24
list.inactiveSelectionBackground#6b7d8f1f
list.inactiveSelectionForeground#828e9f
list.invalidItemForeground#828e9f4d
listFilterWidget.background#fafafa
listFilterWidget.noMatchesOutline#e65050
listFilterWidget.outline#f29718
menu.background#ffffff
menu.border#6b7d8f1f
menu.foreground#828e9f
menu.selectionBackground#6b7d8f1f
menu.selectionBorder#6b7d8f24
menu.separatorBackground#6b7d8f1f
minimap.background#fcfcfc
minimap.errorHighlight#e65050
minimap.findMatchHighlight#ffe294
minimap.selectionHighlight#035bd626
minimapGutter.addedBackground#6cbf43
minimapGutter.deletedBackground#ff7383
minimapGutter.modifiedBackground#478acc
multiDiffEditor.background#f8f9fa
multiDiffEditor.border#6b7d8f1f
multiDiffEditor.headerBackground#fafafa
panel.background#f8f9fa
panel.border#6b7d8f1f
panelStickyScroll.border#6b7d8f1f
panelStickyScroll.shadow#6b7d8f12
panelTitle.activeBorder#f29718
panelTitle.activeForeground#5c6166
panelTitle.inactiveForeground#828e9f
peekView.border#6b7d8f24
peekViewEditor.background#fafafa
peekViewEditor.matchHighlightBackground#ffe29480
peekViewEditor.matchHighlightBorder#fad77880
peekViewResult.background#fafafa
peekViewResult.fileForeground#5c6166
peekViewResult.lineForeground#828e9f
peekViewResult.matchHighlightBackground#ffe29480
peekViewResult.selectionBackground#6b7d8f24
peekViewTitle.background#6b7d8f24
peekViewTitleDescription.foreground#828e9f
peekViewTitleLabel.foreground#5c6166
pickerGroup.border#6b7d8f1f
pickerGroup.foreground#828e9f80
profileBadge.background#f29718
profileBadge.foreground#7e4b01
progressBar.background#f29718
scrollbar.shadow#6b7d8f00
scrollbarSlider.activeBackground#828e9fb3
scrollbarSlider.background#828e9f66
scrollbarSlider.hoverBackground#828e9f99
selection.background#035bd626
settings.headerForeground#5c6166
settings.modifiedItemIndicator#478acc
sideBar.background#f8f9fa
sideBar.border#6b7d8f1f
sideBarSectionHeader.background#f8f9fa
sideBarSectionHeader.border#6b7d8f1f
sideBarSectionHeader.foreground#828e9f
sideBarStickyScroll.border#6b7d8f1f
sideBarStickyScroll.shadow#6b7d8f12
sideBarTitle.foreground#828e9f
statusBar.background#f8f9fa
statusBar.border#6b7d8f1f
statusBar.debuggingBackground#f2a191
statusBar.debuggingForeground#fcfcfc
statusBar.foreground#828e9f
statusBar.noFolderBackground#fafafa
statusBarItem.activeBackground#828e9f33
statusBarItem.hoverBackground#828e9f33
statusBarItem.prominentBackground#6b7d8f1f
statusBarItem.prominentHoverBackground#00000030
statusBarItem.remoteBackground#f29718
statusBarItem.remoteForeground#7e4b01
symbolIcon.arrayForeground#22a4e6
symbolIcon.booleanForeground#a37acc
symbolIcon.classForeground#22a4e6
symbolIcon.colorForeground#e59645
symbolIcon.constantForeground#a37acc
symbolIcon.constructorForeground#eba400
symbolIcon.enumeratorForeground#22a4e6
symbolIcon.enumeratorMemberForeground#a37acc
symbolIcon.eventForeground#e59645
symbolIcon.fieldForeground#f07171
symbolIcon.fileForeground#828e9f
symbolIcon.folderForeground#828e9f
symbolIcon.functionForeground#eba400
symbolIcon.interfaceForeground#22a4e6
symbolIcon.keyForeground#55b4d4
symbolIcon.keywordForeground#fa8532
symbolIcon.methodForeground#eba400
symbolIcon.moduleForeground#86b300
symbolIcon.namespaceForeground#86b300
symbolIcon.nullForeground#a37acc
symbolIcon.numberForeground#a37acc
symbolIcon.objectForeground#22a4e6
symbolIcon.operatorForeground#f2a191
symbolIcon.packageForeground#86b300
symbolIcon.propertyForeground#f07171
symbolIcon.referenceForeground#22a4e6
symbolIcon.snippetForeground#e59645
symbolIcon.stringForeground#86b300
symbolIcon.structForeground#22a4e6
symbolIcon.textForeground#5c6166
symbolIcon.typeParameterForeground#22a4e6
symbolIcon.unitForeground#a37acc
symbolIcon.variableForeground#5c6166
tab.activeBackground#fcfcfc
tab.activeBorder#fcfcfc
tab.activeBorderTop#f29718
tab.activeForeground#5c6166
tab.border#6b7d8f1f
tab.inactiveBackground#f8f9fa
tab.inactiveForeground#828e9f
tab.unfocusedActiveBorderTop#828e9f
tab.unfocusedActiveForeground#828e9f
tab.unfocusedInactiveForeground#828e9f
terminal.ansiBlack#000000
terminal.ansiBlue#21a1e2
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#22a4e6
terminal.ansiBrightCyan#4cbf99
terminal.ansiBrightGreen#86b300
terminal.ansiBrightMagenta#a37acc
terminal.ansiBrightRed#f07171
terminal.ansiBrightWhite#d1d1d1
terminal.ansiBrightYellow#eba400
terminal.ansiCyan#4abc96
terminal.ansiGreen#6cbf43
terminal.ansiMagenta#a176cb
terminal.ansiRed#f06b6c
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#e7a100
terminal.background#f8f9fa
terminal.foreground#5c6166
terminalCommandGuide.foreground#828e9f4d
terminalStickyScroll.border#6b7d8f1f
terminalStickyScroll.shadow#6b7d8f12
terminalStickyScrollHover.background#6b7d8f1f
textBlockQuote.background#fafafa
textLink.activeForeground#f29718
textLink.foreground#f29718
textPreformat.foreground#5c6166
titleBar.activeBackground#f8f9fa
titleBar.activeForeground#828e9f
titleBar.border#6b7d8f1f
titleBar.inactiveBackground#f8f9fa
titleBar.inactiveForeground#828e9fb3
toolbar.hoverBackground#6b7d8f24
tree.indentGuidesStroke#828e9f59
walkThrough.embeddedEditorBackground#fafafa
welcomePage.buttonBackground#f2971866
welcomePage.progress.background#828e9f1a
welcomePage.tileBackground#f8f9fa
welcomePage.tileShadow#6b7d8f12
widget.border#6b7d8f1f
widget.shadow#6b7d8f12

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#5c6166	—
comment	#adaeb1	italic
string, constant.other.symbol	#86b300	—
string.regexp, constant.character, constant.other	#4cbf99	—
constant.numeric	#a37acc	—
constant.language	#a37acc	—
variable, variable.parameter.function-call	#5c6166	—
variable.member	#f07171	—
variable.language	#55b4d4	italic
storage	#fa8532	—
keyword	#fa8532	—
keyword.operator	#f2a191	—
punctuation.separator, punctuation.terminator	#5c6166b3	—
punctuation.section	#5c6166	—
punctuation.accessor	#f2a191	—
punctuation.definition.template-expression	#fa8532	—
punctuation.section.embedded	#fa8532	—
meta.embedded	#5c6166	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#22a4e6	—
entity.other.inherited-class	#55b4d4	—
storage.type.function	#fa8532	—
source.java storage.type.primitive	#55b4d4	—
entity.name.function	#eba400	—
variable.parameter, meta.parameter	#a37acc	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#eba400	—
support.function, support.macro	#f07171	—
entity.name.import, entity.name.package	#86b300	—
entity.name	#22a4e6	—
entity.name.tag, meta.tag.sgml	#55b4d4	—
support.class.component	#22a4e6	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#55b4d480	—
entity.other.attribute-name	#eba400	—
entity.other.attribute-name.pseudo-class	#4cbf99	—
support.constant	#f2a191	italic
support.type, support.class, source.go storage.type	#55b4d4	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator	#e59645	—
invalid	#e65050	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#eba400	—
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	#22a4e6	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#adaeb1	—
support.type.property-name	#55b4d4	normal
constant.numeric.line-number.find-in-files - match	#adaeb1	—
constant.numeric.line-number.match	#fa8532	—
entity.name.filename.find-in-files	#86b300	—
message.error	#e65050	—
markup.heading, markup.heading entity.name	#86b300	bold
markup.underline.link, string.other.link	#55b4d4	—
markup.italic, emphasis	#f07171	italic
markup.bold	#f07171	bold
markup.underline	—	underline
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#adaeb1	bold
markup.quote	#4cbf99	italic
markup.list punctuation.definition.list.begin	#eba400	—
markup.inserted	#6cbf43	—
markup.changed	#478acc	—
markup.deleted	#ff7383	—
markup.strike	#e59645	—
markup.strong	—	bold
markup.table	#55b4d4	—
text.html.markdown markup.inline.raw	#f2a191	—
text.html.markdown meta.dummy.line-break	#adaeb1	—
punctuation.definition.markdown	#adaeb1	—

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