Ayu Mirage PowerUp

Name: Ayu Mirage PowerUp
Author: geisslerh

Publisher: geisslerhThemes in package: 1

A rework of the 'Ayu Mirage' theme. Bold and Italic enabled. Brighter colors

GitHub

VS Code preview

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

Ayu Mirage PowerUp — Ayu Mirage PowerUp

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#212733
activityBar.foreground#47515d
activityBarBadge.background#47515d
activityBarBadge.foreground#ffffff
badge.background#47515d
badge.foreground#ffffff
button.background#ffcc66
button.foreground#212733
button.hoverBackground#fac761
debugExceptionWidget.background#262c38
debugExceptionWidget.border#1a202b
debugToolBar.background#262c38
diffEditor.insertedTextBackground#bae67e25
diffEditor.removedTextBackground#f29e7425
dropdown.background#262c38
dropdown.border#363e4a
dropdown.foreground#667380
editor.background#212733
editor.findMatchBackground#ffcc6622
editor.findMatchBorder#ffcc66
editor.findMatchHighlightBackground#ffcc6622
editor.findMatchHighlightBorder#ffcc6633
editor.findRangeHighlightBackground#283543
editor.findRangeHighlightBorder#21273300
editor.foreground#f4f4f1
editor.inactiveSelectionBackground#283543
editor.lineHighlightBackground#1c222e
editor.rangeHighlightBackground#1c222e
editor.selectionBackground#293847
editor.selectionHighlightBackground#283543
editor.selectionHighlightBorder#2c3d4e
editor.wordHighlightBackground#283543
editor.wordHighlightStrongBackground#ffcc6633
editorBracketMatch.border#39424e
editorCursor.foreground#ffcc66
editorError.foreground#ff3333
editorGroup.background#262c38
editorGroup.border#1a202b
editorGroupHeader.noTabsBackground#212733
editorGroupHeader.tabsBackground#212733
editorGroupHeader.tabsBorder#1a202b
editorGutter.addedBackground#bae67e
editorGutter.deletedBackground#f29e74
editorGutter.modifiedBackground#5ccfe6
editorHoverWidget.background#262c38
editorHoverWidget.border#121824
editorIndentGuide.activeBackground#434c59
editorIndentGuide.background#363e4a
editorLineNumber.activeForeground#667380bb
editorLineNumber.foreground#66738066
editorLink.activeForeground#ffcc66
editorMarkerNavigation.background#262c38
editorOverviewRuler.addedForeground#bae67e
editorOverviewRuler.border#1a202b
editorOverviewRuler.deletedForeground#f29e74
editorOverviewRuler.errorForeground#ff3333
editorOverviewRuler.modifiedForeground#5ccfe6
editorOverviewRuler.warningForeground#ffcc66
editorRuler.foreground#1a202b
editorSuggestWidget.background#262c38
editorSuggestWidget.border#121824
editorSuggestWidget.highlightForeground#ffcc66
editorSuggestWidget.selectedBackground#1c222e
editorWarning.foreground#ffcc66
editorWhitespace.foreground#39424e
editorWidget.background#262c38
extensionButton.prominentBackground#ffcc66
extensionButton.prominentForeground#212733
extensionButton.prominentHoverBackground#fac761
focusBorder#4a5561
foreground#667380
gitDecoration.deletedResourceForeground#f29e74bb
gitDecoration.ignoredResourceForeground#444d5a
gitDecoration.modifiedResourceForeground#5ccfe6bb
gitDecoration.submoduleResourceForeground#d4bfffbb
gitDecoration.untrackedResourceForeground#bae67ebb
input.background#262c38
input.border#363e4a
input.foreground#f4f4f1
input.placeholderForeground#515c69
inputOption.activeBorder#ffcc66
inputValidation.errorBackground#212733
inputValidation.errorBorder#ff3333
inputValidation.infoBackground#212733
inputValidation.infoBorder#5ccfe6
inputValidation.warningBackground#212733
inputValidation.warningBorder#ffbb33
list.activeSelectionBackground#1a202b
list.activeSelectionForeground#f4f4f1
list.focusBackground#1c222e
list.focusForeground#f4f4f1
list.highlightForeground#ffcc66
list.hoverBackground#1c222e
list.hoverForeground#f4f4f1
list.inactiveSelectionBackground#1c222e
list.inactiveSelectionForeground#f4f4f1
list.invalidItemForeground#515c69
panel.background#212733
panel.border#1a202b
panelTitle.activeBorder#ffcc66
panelTitle.activeForeground#f4f4f1
panelTitle.inactiveForeground#667380
peekView.border#1a202b
peekViewEditor.background#262c38
peekViewEditor.matchHighlightBackground#ffcc6633
peekViewResult.background#262c38
peekViewResult.fileForeground#667380
peekViewResult.matchHighlightBackground#ffcc6633
peekViewTitle.background#262c38
peekViewTitleDescription.foreground#667380
peekViewTitleLabel.foreground#667380
pickerGroup.border#1a202b
pickerGroup.foreground#444d5a
progressBar.background#ffcc66
scrollbar.shadow#161c2711
scrollbarSlider.activeBackground#ffffff22
scrollbarSlider.background#ffffff11
scrollbarSlider.hoverBackground#ffffff22
selection.background#293847fd
sideBar.background#212733
sideBar.border#1a202b
sideBarSectionHeader.background#212733
sideBarSectionHeader.foreground#667380
sideBarTitle.foreground#667380
statusBar.background#212733
statusBar.border#212733
statusBar.debuggingBackground#f29e74
statusBar.debuggingForeground#212733
statusBar.foreground#667380
statusBar.noFolderBackground#262c38
statusBarItem.activeBackground#00000050
statusBarItem.hoverBackground#00000030
statusBarItem.prominentBackground#1a202b
statusBarItem.prominentHoverBackground#00000030
tab.activeBackground#212733
tab.activeBorder#ffcc66
tab.activeForeground#f4f4f1
tab.border#212733
tab.inactiveBackground#212733
tab.inactiveForeground#667380
tab.unfocusedActiveBorder#667380
tab.unfocusedActiveForeground#667380
tab.unfocusedInactiveForeground#667380
terminal.ansiBlack#1a202b
terminal.ansiBlue#36a3d9
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#6871ff
terminal.ansiBrightCyan#a6fde1
terminal.ansiBrightGreen#cbe645
terminal.ansiBrightMagenta#ff77ff
terminal.ansiBrightRed#ffc44c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffdf80
terminal.ansiCyan#95e6cb
terminal.ansiGreen#bae67e
terminal.ansiMagenta#d4bfff
terminal.ansiRed#ffc44c
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#ffcc66
terminal.background#212733
terminal.foreground#f4f4f1
textBlockQuote.background#262c38
textLink.activeForeground#ffcc66
textLink.foreground#ffcc66
textPreformat.foreground#f4f4f1
titleBar.activeBackground#212733
titleBar.activeForeground#f4f4f1
titleBar.inactiveBackground#212733
titleBar.inactiveForeground#667380
walkThrough.embeddedEditorBackground#262c38
widget.shadow#161c27

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file	—	italic
markup.deleted.diff	—	italic
markup.inserted.diff	#addb67ff	italic
comment, punctuation.definition.comment	#5c6773	italic
variable	#f4f4f1	—
string, constant.other.symbol	#afef76	—
constant.numeric	#ffcc66	—
string.regexp, constant.character.escape	#95e6cb	—
constant.language	#ffcc66	—
constant.character, constant.other	#ffcc66	—
variable.member	#ec5f67	—
punctuation.accessor, keyword	#ff851a	bold
keyword.operator	#f29e74	—
punctuation.separator, punctuation.terminator	#f4f4f1CC	—
punctuation.section	#f4f4f1	—
punctuation.accessor	#f29e74	—
punctuation.definition.annotation	#f4f4f1CC	—
variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js	#ffc44c	—
storage	#ff851a	italic
storage.type	#ff851a	—
entity.name.function	#ffbb33	—
entity.name.import, entity.name.package	#afef76	—
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx	—	italic
italic	—	italic
entity.name	#73d0ff	—
entity.other.inherited-class	#73d0ff	—
variable.parameter, meta.parameter	#d4bfff	—
variable.language	#5ccfe6	italic
entity.name.tag, meta.tag.sgml	#5ccfe6	bold
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#5ccfe690	—
entity.other.attribute-name	#ffbb33	italic
keyword.operator.relational	—	italic
meta.delimiter.period	—	italic
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#ffbb33	—
support.function, support.macro	#f28779	—
support.constant	#f29e74	italic
support.type, support.class, source.go storage.type	#5ccfe6	—
invalid	#ff3333	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#ffbb33	—
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	#5c6773	—
support.type.property-name	#5ccfe6	normal
constant.numeric.line-number.find-in-files - match	#5c6773	—
constant.numeric.line-number.match	#ff851a	—
entity.name.filename.find-in-files	#afef76	—
message.error	#ff3333	—
meta.selector	—	italic
entity.name.tag.doctype, meta.tag.sgml.doctype	—	italic
variable.other.object.property	—	italic
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
markup.heading, markup.heading entity.name	#ff851a	bold
string.other.link, markup.underline.link	#95e6cb	italic underline
punctuation.definition.image	#ffbb33	—
markup.italic	#f28779	italic
markup.bold	#f28779	bold
markup.italic markup.bold \| markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#5c6773	bold
markup.quote	#ffcc66	italic
quote	—	italic
markup.list.numbered.bullet, markup.list punctuation.definition.list_item	#95e6cb	—
markup.inserted	#afef76	—
markup.changed	#5ccfe6	—
markup.deleted	#f28779	—
markup.strike	#ffc44c	—
markup.table	#5ccfe6	—
text.html.markdown markup.inline.raw	#f29e74	—
text.html.markdown meta.dummy.line-break	#5c6773	—
source.elixir .punctuation.binary.elixir	—	italic
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go	—	italic
meta.tag.sgml.doctype.html	—	italic
markup.italic.markdown	—	italic
markup.quote.markdown	#697098	italic
punctuation.definition.markdown	#5c6773	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—

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