wuthering waves color themes

Name: wuthering waves color themes
Author: ⏾ frostmoon

Publisher: ⏾ frostmoonThemes in package: 58

vs code color themes inspired by wuthering waves characters.

GitHub

Color themes

VS Code preview

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

wuthering waves color themes — Wuthering Waves : Iuno (Dark)

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.background#121218
activityBar.foreground#ffffff
activityBar.inactiveForeground#6878A0
activityBarBadge.background#E4B840
activityBarBadge.foreground#1A1820
badge.background#E4B840
badge.foreground#1A1820
breadcrumb.activeSelectionForeground#E4B840
breadcrumb.background#181820
breadcrumb.focusForeground#E8E0D8
breadcrumb.foreground#6878A0
breadcrumbPicker.background#181820
button.background#D4A830
button.foreground#1A1820
button.hoverBackground#E4B840
button.secondaryBackground#2E3040
button.secondaryForeground#E8E0D8
button.secondaryHoverBackground#3A4050
descriptionForeground#6878A0
dropdown.background#181820
dropdown.border#2E3040
dropdown.foreground#E8E0D8
dropdown.listBackground#181820
editor.background#181820
editor.findMatchBackground#E4B84045
editor.findMatchHighlightBackground#E4B84025
editor.foreground#E8E0D8
editor.inactiveSelectionBackground#2E304040
editor.lineHighlightBackground#242430
editor.lineHighlightBorder#2E3040
editor.selectionBackground#E4B84030
editor.wordHighlightBackground#E4B84020
editor.wordHighlightStrongBackground#E4B84035
editorBracketMatch.background#4A689030
editorBracketMatch.border#6890B8
editorCursor.foreground#E4B840
editorGroupHeader.tabsBackground#121218
editorGutter.addedBackground#709060
editorGutter.deletedBackground#C05050
editorGutter.modifiedBackground#D4A830
editorHoverWidget.background#181820
editorHoverWidget.border#2E3040
editorIndentGuide.activeBackground1#4A5878
editorIndentGuide.background1#2E3040
editorLineNumber.activeForeground#E4B840
editorLineNumber.foreground#4A5878
editorRuler.foreground#2E3040
editorSuggestWidget.background#181820
editorSuggestWidget.foreground#E8E0D8
editorSuggestWidget.highlightForeground#E4B840
editorSuggestWidget.selectedBackground#2E3040
editorWidget.background#242430
editorWidget.border#2E3040
editorWidget.foreground#E8E0D8
errorForeground#C05050
focusBorder#E4B84080
gitDecoration.addedResourceForeground#709060
gitDecoration.conflictingResourceForeground#C05050
gitDecoration.deletedResourceForeground#C05050
gitDecoration.ignoredResourceForeground#4A5878
gitDecoration.modifiedResourceForeground#D4A830
gitDecoration.untrackedResourceForeground#E4B840
icon.foreground#E8E0D8
input.background#121218
input.border#2E3040
input.foreground#E8E0D8
input.placeholderForeground#6878A0
inputOption.activeBackground#E4B840
inputOption.activeForeground#1A1820
inputValidation.errorBackground#C05050
inputValidation.errorBorder#C05050
inputValidation.warningBackground#D4A830
inputValidation.warningBorder#D4A830
list.activeSelectionBackground#E4B840
list.activeSelectionForeground#1A1820
list.activeSelectionIconForeground#1A1820
list.focusBackground#2E3040
list.hoverBackground#242430
list.inactiveSelectionBackground#2E3040
list.inactiveSelectionForeground#B0A8A8
minimap.background#181820
minimap.findMatchHighlight#E4B84080
minimap.selectionHighlight#E4B84050
minimapGutter.addedBackground#709060
minimapGutter.deletedBackground#C05050
minimapGutter.modifiedBackground#D4A830
notificationCenter.border#2E3040
notifications.background#242430
notifications.border#2E3040
notifications.foreground#E8E0D8
notificationsErrorIcon.foreground#C05050
notificationsInfoIcon.foreground#6890B8
notificationsWarningIcon.foreground#D4A830
panel.background#121218
panel.border#2E3040
panelTitle.activeBorder#E4B840
panelTitle.activeForeground#E8E0D8
panelTitle.inactiveForeground#6878A0
peekView.border#E4B840
peekViewEditor.background#181820
peekViewEditorGutter.background#242430
peekViewResult.background#242430
peekViewResult.fileForeground#E8E0D8
peekViewResult.lineForeground#E8E0D8
peekViewResult.matchHighlightBackground#E4B84050
peekViewResult.selectionBackground#E4B84030
peekViewResult.selectionForeground#E8E0D8
peekViewTitle.background#121218
peekViewTitleDescription.foreground#6878A0
peekViewTitleLabel.foreground#ffffff
progressBar.background#E4B840
scrollbar.shadow#00000030
scrollbarSlider.activeBackground#D4A830
scrollbarSlider.background#4A587840
scrollbarSlider.hoverBackground#4A587860
selection.background#E4B84040
sideBar.background#121218
sideBar.foreground#B0A8A8
sideBarSectionHeader.background#242430
sideBarSectionHeader.foreground#E8E0D8
sideBarTitle.foreground#E4B840
statusBar.background#D4A830
statusBar.debuggingBackground#4A6890
statusBar.debuggingForeground#ffffff
statusBar.foreground#1A1820
statusBar.noFolderBackground#242430
statusBar.noFolderForeground#ffffff
tab.activeBackground#181820
tab.activeBorder#E4B840
tab.activeForeground#E4B840
tab.border#242430
tab.hoverBackground#181820
tab.hoverForeground#E4B840
tab.inactiveBackground#121218
tab.inactiveForeground#6878A0
terminal.ansiBlack#181820
terminal.ansiBlue#6890B8
terminal.ansiBrightBlack#4A5878
terminal.ansiBrightBlue#78A0C8
terminal.ansiBrightCyan#70A0A0
terminal.ansiBrightGreen#80A070
terminal.ansiBrightMagenta#A080A0
terminal.ansiBrightRed#D06060
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#E4B840
terminal.ansiCyan#609090
terminal.ansiGreen#709060
terminal.ansiMagenta#907090
terminal.ansiRed#C05050
terminal.ansiWhite#E8E0D8
terminal.ansiYellow#D4A830
terminal.background#181820
terminal.foreground#E8E0D8
textLink.activeForeground#F0C850
textLink.foreground#E4B840
titleBar.activeBackground#121218
titleBar.activeForeground#E8E0D8
titleBar.inactiveBackground#181820
titleBar.inactiveForeground#6878A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5A6890	italic
keyword, storage	#E4B840	—
storage.type, support.type	#6890B8	—
constant.language, support.constant, variable.language	#C09820	—
variable, support.variable	#E8E0D8	—
entity.name.function, support.function	#D4A830	bold
entity.name.type, entity.other.inherited-class, support.class	#6890B8	bold
constant.numeric, constant.character, constant	#E4B840	—
string	#7090A0	—
constant.character.escape	#E4B840	—
punctuation	#7080A0	—
entity.name.tag	#E4B840	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#6890B8	italic
meta.property-name, support.type.property-name	#E4B840	—
markup.heading	#E4B840	bold

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