Mayukai Theme

Name: Mayukai Theme
Author: GulajavaMinistudio

Publisher: GulajavaMinistudioThemes in package: 9

Dark theme based on mixing swatch of Ayu Theme, Andromeda Theme, Monokai, Material Colors, Original Gruvbox Darktooth Colors, and Dracula Colors.

GitHub

Color themes

VS Code preview

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

Mayukai Theme — Mayukai Reversal

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.

activityBar.activeBorder#ffa759
activityBar.activeFocusBorder#ffcc66
activityBar.background#0d131f
activityBar.border#0d131f
activityBar.foreground#b3b1ad
activityBarBadge.background#f07178
activityBarBadge.foreground#1f2430
badge.background#ffa759
badge.foreground#1f2430
button.background#ffb454
button.foreground#1f2430
button.hoverBackground#fac761
debugExceptionWidget.background#232834
debugExceptionWidget.border#191e2a
debugToolBar.background#232834
diffEditor.insertedTextBackground#bae67e26
diffEditor.removedTextBackground#f29e7426
dropdown.background#232834
dropdown.border#373e4c
dropdown.foreground#707a8c
editor.background#141824
editor.findMatchBackground#ffcc660d
editor.findMatchBorder#ffcc66
editor.findMatchHighlightBackground#ffcc660d
editor.findMatchHighlightBorder#ffcc6659
editor.findRangeHighlightBackground#262f3e
editor.findRangeHighlightBorder#1f243000
editor.foreground#cbcebc
editor.inactiveSelectionBackground#262f3e
editor.lineHighlightBackground#3d424d46
editor.rangeHighlightBackground#191e2a
editor.selectionBackground#3d424d
editor.selectionHighlightBackground#262f3e
editor.selectionHighlightBorder#313e52
editor.wordHighlightBackground#262f3e
editor.wordHighlightStrongBackground#ffcc6633
editorBracketMatch.background#707a8c4d
editorBracketMatch.border#707a8c99
editorCodeLens.foreground#5c6773
editorCursor.foreground#ff4057
editorError.foreground#ff3333
editorGroup.border#141824
editorGroup.emptyBackground#191e2a
editorGroupHeader.noTabsBackground#1f2430
editorGroupHeader.tabsBackground#1f2430
editorGroupHeader.tabsBorder#141824
editorGutter.addedBackground#a6cc7099
editorGutter.deletedBackground#f2798399
editorGutter.modifiedBackground#77a8d999
editorHoverWidget.background#232834
editorHoverWidget.border#101521
editorHoverWidget.foreground#cbccc6
editorIndentGuide.activeBackground1#707a8cb3
editorIndentGuide.background1#707a8c4d
editorLineNumber.activeForeground#707a8ccc
editorLineNumber.foreground#707a8c66
editorLink.activeForeground#ffcc66
editorMarkerNavigation.background#232834
editorOverviewRuler.addedForeground#a6cc7099
editorOverviewRuler.border#141824
editorOverviewRuler.deletedForeground#f2798399
editorOverviewRuler.errorForeground#ff3333
editorOverviewRuler.modifiedForeground#77a8d999
editorOverviewRuler.warningForeground#ffcc66
editorRuler.foreground#707a8c4d
editorSuggestWidget.background#232834
editorSuggestWidget.border#101521
editorSuggestWidget.foreground#cbccc6
editorSuggestWidget.highlightForeground#ffcc66
editorSuggestWidget.selectedBackground#191e2a
editorWarning.foreground#ffcc66
editorWhitespace.foreground#707a8c66
editorWidget.background#232834
editorWidget.foreground#cbccc6
errorForeground#ff6666
extensionButton.prominentBackground#ffcc66
extensionButton.prominentForeground#1f2430
extensionButton.prominentHoverBackground#fac761
focusBorder#505867
foreground#707a8c
gitDecoration.conflictingResourceForeground#ed8274
gitDecoration.deletedResourceForeground#f27983b3
gitDecoration.ignoredResourceForeground#484f5e
gitDecoration.modifiedResourceForeground#a6cc70
gitDecoration.submoduleResourceForeground#d4bfffb3
gitDecoration.untrackedResourceForeground#ed9366
input.background#232834
input.border#373e4c
input.foreground#cbccc6
input.placeholderForeground#586070
inputOption.activeBorder#ffcc66
inputValidation.errorBackground#1f2430
inputValidation.errorBorder#ff3333
inputValidation.infoBackground#1f2430
inputValidation.infoBorder#95e6cb
inputValidation.warningBackground#1f2430
inputValidation.warningBorder#ffd580
list.activeSelectionBackground#191e2a
list.activeSelectionForeground#ffb454
list.errorForeground#ff6666
list.focusBackground#191e2a
list.focusForeground#ffcc66
list.highlightForeground#ffcc66
list.hoverBackground#3d424d66
list.hoverForeground#ffcc66
list.inactiveSelectionBackground#3d424d66
list.inactiveSelectionForeground#ffb454
list.invalidItemForeground#586070
panel.background#1b1c24
panel.border#101521
panelTitle.activeBorder#ffcc66
panelTitle.activeForeground#cbccc6
panelTitle.inactiveForeground#707a8c
peekView.border#191e2a
peekViewEditor.background#232834
peekViewEditor.matchHighlightBackground#ffcc6633
peekViewResult.background#232834
peekViewResult.fileForeground#707a8c
peekViewResult.matchHighlightBackground#ffcc6633
peekViewTitle.background#232834
peekViewTitleDescription.foreground#707a8c
peekViewTitleLabel.foreground#707a8c
pickerGroup.border#191e2a
pickerGroup.foreground#484f5e
progressBar.background#ffcc66
quickInputList.focusBackground#191e2a
scrollbar.shadow#141824
scrollbarSlider.activeBackground#707a8cb3
scrollbarSlider.background#707a8c66
scrollbarSlider.hoverBackground#707a8c99
selection.background#4e545f
settings.headerForeground#cbccc6
settings.modifiedItemIndicator#77a8d9
sideBar.background#101521
sideBar.border#101521
sideBar.foreground#b8b0b0
sideBarSectionHeader.background#101521
sideBarSectionHeader.foreground#707a8c
sideBarTitle.foreground#707a8c
statusBar.background#1f2430
statusBar.border#191e2a
statusBar.debuggingBackground#f29e74
statusBar.debuggingForeground#1f2430
statusBar.foreground#707a8c
statusBar.noFolderBackground#232834
statusBarItem.activeBackground#00000050
statusBarItem.hoverBackground#00000030
statusBarItem.prominentBackground#191e2a
statusBarItem.prominentHoverBackground#00000030
statusBarItem.remoteBackground#ff9940
tab.activeBackground#141824
tab.activeBorderTop#ffcc66
tab.activeForeground#edf0f5
tab.border#1f2430
tab.hoverBackground#3d424d66
tab.inactiveBackground#1f2430
tab.inactiveForeground#707a8c
tab.unfocusedActiveBorderTop#707a8c
tab.unfocusedActiveForeground#707a8c
tab.unfocusedInactiveForeground#707a8c
terminal.ansiBlack#191e2a
terminal.ansiBlue#95e6cb
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#95e6cb
terminal.ansiBrightCyan#95e6cb
terminal.ansiBrightGreen#bae67e
terminal.ansiBrightMagenta#d4bfff
terminal.ansiBrightRed#f28779
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffd580
terminal.ansiCyan#95e6cb
terminal.ansiGreen#a6cc70
terminal.ansiMagenta#cfbafa
terminal.ansiRed#ed8274
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#fad07b
terminal.background#1b1c24
terminal.foreground#cbccc6
terminalCursor.foreground#ff4057
textBlockQuote.background#232834
textLink.activeForeground#ffcc66
textLink.foreground#ffcc66
textPreformat.foreground#cbccc6
titleBar.activeBackground#1f2430
titleBar.activeForeground#cbccc6
titleBar.border#191e2a
titleBar.inactiveBackground#1f2430
titleBar.inactiveForeground#707a8c
walkThrough.embeddedEditorBackground#232834
widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#5c6773	italic
string, constant.other.symbol	#FFCC66	—
string.regexp, constant.character, constant.other	#95e6cb	—
constant.other.color	#F29668	—
constant.numeric	#9DD2BB	—
constant.numeric.css	#ffa759	—
constant.language	#f27983	—
constant.language.boolean	#d4bfff	—
variable	#cbcebc	—
variable.other.constant	#cbcebc	—
variable.member	#f28779	—
variable.language	#ffa759	italic
variable.language.this	#f28779	italic
support.variable	#ffa759	—
storage	#ffa759	—
storage.modifier	#f28779	italic
storage.modifier.async	#F07178	italic
storage.type	#FFA759	italic
keyword	#F07178	—
keyword.operator	#f29668	—
keyword.operator.new	#F07178	—
keyword.control.flow	#F07178	—
punctuation.separator, punctuation.terminator	#cbccc6b3	—
punctuation.definition	#cbccc6b3	—
punctuation.section	#cbcebc	—
punctuation.accessor	#F29668	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#95e6cb	—
entity.other.inherited-class	#FF8F40	—
storage.type.function	#ffa759	—
storage.type.function.arrow	#f29668
source.java storage.type.primitive	#95e6cb	—
entity.name.function	#BAE67E	—
variable.parameter, meta.parameter	#FC9867	italic
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#BAE67E	—
support.function, support.macro	#BAE67E	—
entity.name.import, entity.name.package	#bae67e	—
entity.name	#FF8F40	—
entity.name.type.class	#f07178	—
entity.name.type.module	#ffb454	—
entity.name.tag, meta.tag.sgml	#fc4085	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#b3b1ad	—
text.html.derivative	#cbcebc	—
entity.other.attribute-name	#BAE67E	italic
support.constant	#f28779	italic
support.type, support.class, source.go storage.type	#FFA759	—
support.class.dart	#9cd1bb	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation	#cbcebc	—
invalid	#ff3333	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#ffd580	—
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	#95e6cb	—
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	#bae67e
entity.other.attribute-name.class.css	#bae67e
entity.other.attribute-name.id.css	#ffcc66
support.type.property-name.css	#cbcebc
constant.numeric.line-number.find-in-files - match	#5c6773	—
constant.numeric.line-number.match	#ffa759	—
entity.name.filename.find-in-files	#bae67e	—
message.error	#ff3333	—
markup.heading, markup.heading entity.name	#bae67e	bold
markup.underline.link, string.other.link	#95e6cb	—
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	#95e6cb	italic
markup.list punctuation.definition.list.begin	#ffd580	—
markup.inserted	#a6cc70	—
markup.changed	#77a8d9	—
markup.deleted	#f27983	—
markup.strike	#ffe6b3	—
markup.table	#95e6cb	—
text.html.markdown markup.inline.raw	#f29e74	—
text.html.markdown meta.dummy.line-break	#5c6773	—
punctuation.definition.markdown	#5c6773	—
punctuation.quasi.element.begin, punctuation.quasi.element.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#ffa759	—
meta.object-literal.key	#cbcebc	italic
meta.brace.curly, meta.brace.round, meta.brace.square	#b3b1ad	—
string.json support.type.property-name.json	#f29e74	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#CBCEBC	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#CBCEBC	—
constant.language.json	#d4bfff	—
constant.numeric.json	#f27983	—
string.unquoted, constant.other.object.key	#e6b450	—

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