Ayu Legacy

Name: Ayu Legacy
Author: TeeSeal

Publisher: TeeSealThemes in package: 3

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 Legacy — Ayu Dark (Legacy)

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#0f1419
activityBar.border#1d242c
activityBar.foreground#515c66
activityBarBadge.background#314559
activityBarBadge.foreground#fff
badge.background#42505e
badge.foreground#fff
button.background#f29718AA
button.foreground#fff
button.hoverBackground#f29718BB
debugExceptionWidget.background#14191f
debugExceptionWidget.border#1d242c
debugToolBar.background#14191f
diffEditor.insertedTextBackground#95e6cb44
diffEditor.removedTextBackground#f0717844
dropdown.background#14191f
editor.background#0f1419
editor.findMatchBackground#f2971833
editor.findMatchHighlightBackground#f2971833
editor.findRangeHighlightBackground#f2971833
editor.foreground#e6e1cf
editor.lineHighlightBackground#151a1f
editor.rangeHighlightBackground#151a1f
editor.selectionBackground#253340
editor.wordHighlightBackground#f2971833
editor.wordHighlightStrongBackground#f2971833
editorBracketMatch.border#35404c
editorCursor.foreground#f29718
editorError.foreground#ff3333
editorGroup.background#14191f
editorGroup.border#1d242c
editorGroupHeader.noTabsBackground#0f1419
editorGroupHeader.tabsBackground#0f1419
editorGroupHeader.tabsBorder#1d242c
editorGutter.addedBackground#c2d94c
editorGutter.deletedBackground#ff3333
editorGutter.modifiedBackground#50b4e6
editorHoverWidget.background#14191f
editorHoverWidget.border#1d242c
editorIndentGuide.background#35404c
editorLineNumber.foreground#35404c
editorLink.activeForeground#f29718
editorLink.foreground#f29718
editorMarkerNavigation.background#14191f
editorOverviewRuler.border#1d242c
editorOverviewRuler.errorForeground#ff3333
editorOverviewRuler.warningForeground#f29718
editorRuler.foreground#1d242c
editorSuggestWidget.background#14191f
editorSuggestWidget.border#1d242c
editorSuggestWidget.highlightForeground#f29718
editorSuggestWidget.selectedBackground#191f26
editorWarning.foreground#f29718
editorWhitespace.foreground#35404c
editorWidget.background#14191f
extensionButton.prominentBackground#f29718AA
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#f29718BB
focusBorder#515c668A
foreground#515c66
input.background#14191f
input.border#515c664C
input.foreground#e6e1cf
input.placeholderForeground#515c668A
inputOption.activeBorder#515c668A
inputValidation.errorBackground#0f1419
inputValidation.errorBorder#ff3333
inputValidation.infoBackground#0f1419
inputValidation.infoBorder#50b4e6
inputValidation.warningBackground#0f1419
inputValidation.warningBorder#ffb454
list.activeSelectionBackground#1d242c
list.activeSelectionForeground#e6e1cf
list.focusAndSelectionBackground#1d242c
list.focusAndSelectionForeground#e6e1cf
list.focusBackground#191f26
list.focusForeground#e6e1cf
list.highlightForeground#f29718
list.hoverBackground#191f26
list.hoverForeground#e6e1cf
list.inactiveSelectionBackground#0f1419
list.inactiveSelectionForeground#e6e1cf
notification.background#1d242c
panel.background#0f1419
panel.border#1d242c
panelTitle.activeBorder#f29718
panelTitle.activeForeground#e6e1cf
panelTitle.inactiveForeground#515c66
peekView.border#1d242c
peekViewEditor.background#14191f
peekViewEditor.matchHighlightBackground#f2971833
peekViewResult.background#14191f
peekViewResult.fileForeground#515c66
peekViewResult.matchHighlightBackground#f2971833
peekViewTitle.background#14191f
peekViewTitleDescription.foreground#515c66
peekViewTitleLabel.foreground#515c66
pickerGroup.border#1d242c
pickerGroup.foreground#f29718
progressBar.background#f29718
scrollbar.shadow#00000011
scrollbarSlider.activeBackground#ffffff22
scrollbarSlider.background#ffffff11
scrollbarSlider.hoverBackground#ffffff22
selection.background#253340fd
sideBar.background#0f1419
sideBar.border#1d242c
sideBarSectionHeader.background#151a1f
sideBarSectionHeader.foreground#515c66
sideBarTitle.foreground#515c66
statusBar.background#14191f
statusBar.border#1d242c
statusBar.debuggingBackground#14191f
statusBar.debuggingForeground#515c66
statusBar.foreground#515c66
statusBar.noFolderBackground#14191f
statusBarItem.activeBackground#1d242c
statusBarItem.hoverBackground#191f26
statusBarItem.prominentBackground#1d242c
statusBarItem.prominentHoverBackground#191f26
tab.activeBackground#14191f
tab.activeBorder#f29718
tab.activeForeground#e6e1cf
tab.border#1d242c
tab.inactiveBackground#0f1419
tab.inactiveForeground#515c66
tab.unfocusedActiveBorder#f29718
tab.unfocusedActiveForeground#e6e1cfAA
tab.unfocusedInactiveForeground#515c66
terminal.ansiBlack#1d242c
terminal.ansiBlue#50b4e6
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#6871ff
terminal.ansiBrightCyan#a6fde1
terminal.ansiBrightGreen#cbe645
terminal.ansiBrightMagenta#ff77ff
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffee99
terminal.ansiCyan#95e6cb
terminal.ansiGreen#c2d94c
terminal.ansiMagenta#ca30c7
terminal.ansiRed#ff7733
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#ffb454
terminal.background#0f1419
terminal.foreground#e6e1cf
textBlockQuote.background#14191f
textLink.activeForeground#f29718
textLink.foreground#f29718
textPreformat.foreground#e6e1cf
titleBar.activeBackground#0f1419
titleBar.activeForeground#515c66
titleBar.border#1d242c
titleBar.inactiveBackground#0f1419
titleBar.inactiveForeground#515c66
walkThrough.embeddedEditorBackground#14191f
welcomeOverlay.foreground#e6e1cf
welcomePage.quickLinkBackground#191f26
welcomePage.quickLinkHoverBackground#1d242c
widget.shadow#000000b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#e6e1cfff	—
comment, punctuation.definition.comment	#5C6773	—
variable, support.variable, entity.name.label	#E6E1CF	—
punctuation.accessor, punctuation.terminator, punctuation.separator, meta.brace, punctuation.definition.block	#E6E1CF	—
keyword, storage.type, storage.modifier	#FF7733	—
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.substitution	#E7C547	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#36A3D9	—
meta.tag.jsx	#E6E1CF	—
entity.name.function, keyword.other.special-method, variable.function, meta.block-level, support.function	#FFB454	—
support.other.variable, string.other.link	#F07178	—
constant.numeric, constant.character, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#FFEE99	—
string, keyword.other.template, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#B8CC52	normal
entity.name.class, entity.name.type.class, entity.name.instance, entity.name.type.instance, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#36A3D9	—
entity.name.module, entity.name.type.module, variable.import.parameter.js, variable.other.class.js	#36A3D9	—
variable.language	#36A3D9	italic
invalid	#FF3333	—
invalid.deprecated	#FFFFFF	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#36A3D990	—
entity.other.attribute-name	#FF7733	—
markup.inserted	#B8CC52	—
markup.deleted	#36A3D9	—
markup.changed	#FF7733	—
string.regexp	#95E6CB	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#5C6773	—
entity.name.filename.find-in-files	#B8CC52	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#E6B673	italic
source.js constant.other.object.key.js string.unquoted.label.js	#36A3D9	italic
entity.name.method.js	#E6B673	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#E6B673	—
markup.italic	#F07178	italic
markup.bold	#F07178	bold
markup.underline	#FFEE99	underline
markup.strike	#E6B673	strike
markup.quote	#E7C547	italic
markup.fenced_code.block.markdown	#FF7733	—
markup.table	#36A3D9	—
text.html.markdown, punctuation.definition.list_item.markdown	#E6E1CF	—
text.html.markdown markup.inline.raw.string.markdown	#36A3D9	—
text.html.markdown meta.dummy.line-break	#5C6773	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#B8CC52	—
markup.quote, punctuation.definition.blockquote.markdown	#E7C547	italic
string.other.link.title.markdown	#E6B673	underline
markup.raw.block.fenced.markdown	#E6E1CF	—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown	#5C6773	—
variable.language.fenced.markdown	#5C6773
meta.separator	#5C6773	bold
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	#36A3D9	—
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	#36A3D9	—
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	#36A3D9	—
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	#36A3D9	—
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	#36A3D9	—
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	#36A3D9	—
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	#36A3D9	—
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	#36A3D9	—
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	#36A3D9	—
acejump.label.blue	#FFFFFF	—
acejump.label.green	#FFFFFF	—
acejump.label.orange	#FFFFFF	—
acejump.label.purple	#FFFFFF	—
sublimelinter.mark.warning	#36A3D9	—
sublimelinter.gutter-mark	#FFFFFF	—
sublimelinter.mark.error	#FF3333	—
markup.ignored.git_gutter	#5C6773	—
markup.untracked.git_gutter	#5C6773	—
gutter_color	#FFFFFF	—
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}!`;
}