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 : Carlotta (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#201018
activityBar.foreground#ffffff
activityBar.inactiveForeground#AA6080
activityBarBadge.background#FF5080
activityBarBadge.foreground#ffffff
badge.background#FF5080
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#FF5080
breadcrumb.background#281820
breadcrumb.focusForeground#FFE0E8
breadcrumb.foreground#AA6080
breadcrumbPicker.background#281820
button.background#FF5080
button.foreground#ffffff
button.hoverBackground#E04070
button.secondaryBackground#4A2538
button.secondaryForeground#ffffff
button.secondaryHoverBackground#5A3045
descriptionForeground#AA6080
dropdown.background#281820
dropdown.border#4A2538
dropdown.foreground#FFE0E8
dropdown.listBackground#281820
editor.background#281820
editor.findMatchBackground#FF508050
editor.findMatchHighlightBackground#FF508025
editor.foreground#FFE0E8
editor.inactiveSelectionBackground#4A253850
editor.lineHighlightBackground#3A2030
editor.lineHighlightBorder#4A2538
editor.selectionBackground#FF508040
editor.wordHighlightBackground#FF508020
editor.wordHighlightStrongBackground#FF508040
editorBracketMatch.background#FF508030
editorBracketMatch.border#FF5080
editorCursor.foreground#FF5080
editorGroupHeader.tabsBackground#201018
editorGutter.addedBackground#408090
editorGutter.deletedBackground#FF5080
editorGutter.modifiedBackground#806090
editorHoverWidget.background#281820
editorHoverWidget.border#4A2538
editorIndentGuide.activeBackground1#AA6080
editorIndentGuide.background1#4A2538
editorLineNumber.activeForeground#FF5080
editorLineNumber.foreground#704050
editorRuler.foreground#4A2538
editorSuggestWidget.background#281820
editorSuggestWidget.foreground#FFE0E8
editorSuggestWidget.highlightForeground#FF5080
editorSuggestWidget.selectedBackground#4A2538
editorWidget.background#3A2030
editorWidget.border#4A2538
editorWidget.foreground#FFE0E8
errorForeground#FF5080
focusBorder#FF508080
gitDecoration.addedResourceForeground#509070
gitDecoration.conflictingResourceForeground#FF7090
gitDecoration.deletedResourceForeground#FF5080
gitDecoration.ignoredResourceForeground#704050
gitDecoration.modifiedResourceForeground#B05080
gitDecoration.untrackedResourceForeground#B05080
icon.foreground#FFE0E8
input.background#201018
input.border#4A2538
input.foreground#FFE0E8
input.placeholderForeground#AA6080
inputOption.activeBackground#FF5080
inputOption.activeForeground#ffffff
inputValidation.errorBackground#FF5080
inputValidation.errorBorder#FF5080
inputValidation.warningBackground#D0A040
inputValidation.warningBorder#D0A040
list.activeSelectionBackground#FF5080
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.focusBackground#4A2538
list.hoverBackground#3A2030
list.inactiveSelectionBackground#4A2538
list.inactiveSelectionForeground#B0A8A8
minimap.background#281820
minimap.findMatchHighlight#FF508080
minimap.selectionHighlight#FF508050
minimapGutter.addedBackground#509070
minimapGutter.deletedBackground#FF5080
minimapGutter.modifiedBackground#B05080
notificationCenter.border#4A2538
notifications.background#3A2030
notifications.border#4A2538
notifications.foreground#FFE0E8
notificationsErrorIcon.foreground#FF5080
notificationsInfoIcon.foreground#407090
notificationsWarningIcon.foreground#D0A040
panel.background#201018
panel.border#4A2538
panelTitle.activeBorder#FF5080
panelTitle.activeForeground#FFE0E8
panelTitle.inactiveForeground#AA6080
peekView.border#FF5080
peekViewEditor.background#281820
peekViewEditorGutter.background#3A2030
peekViewResult.background#3A2030
peekViewResult.fileForeground#FFE0E8
peekViewResult.lineForeground#FFE0E8
peekViewResult.matchHighlightBackground#FF508050
peekViewResult.selectionBackground#FF508030
peekViewResult.selectionForeground#FFE0E8
peekViewTitle.background#201018
peekViewTitleDescription.foreground#AA6080
peekViewTitleLabel.foreground#ffffff
progressBar.background#FF5080
scrollbar.shadow#00000040
scrollbarSlider.activeBackground#FF5080
scrollbarSlider.background#AA608040
scrollbarSlider.hoverBackground#AA608060
selection.background#FF508040
sideBar.background#201018
sideBar.foreground#B0A8A8
sideBarSectionHeader.background#3A2030
sideBarSectionHeader.foreground#FFE0E8
sideBarTitle.foreground#FF5080
statusBar.background#9A2850
statusBar.debuggingBackground#B03050
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#3A2030
statusBar.noFolderForeground#ffffff
tab.activeBackground#281820
tab.activeBorder#FF5080
tab.activeForeground#FF5080
tab.border#3A2030
tab.hoverBackground#281820
tab.hoverForeground#FF5080
tab.inactiveBackground#201018
tab.inactiveForeground#AA6080
terminal.ansiBlack#281820
terminal.ansiBlue#407090
terminal.ansiBrightBlack#704050
terminal.ansiBrightBlue#6090B0
terminal.ansiBrightCyan#60B0B0
terminal.ansiBrightGreen#70B090
terminal.ansiBrightMagenta#D070A0
terminal.ansiBrightRed#FF7090
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#E0B060
terminal.ansiCyan#409090
terminal.ansiGreen#509070
terminal.ansiMagenta#B05080
terminal.ansiRed#FF5080
terminal.ansiWhite#FFE0E8
terminal.ansiYellow#D0A040
terminal.background#281820
terminal.foreground#FFE0E8
textLink.activeForeground#E04070
textLink.foreground#FF5080
titleBar.activeBackground#201018
titleBar.activeForeground#FFE0E8
titleBar.inactiveBackground#281820
titleBar.inactiveForeground#AA6080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#AA6080	italic
keyword, storage	#FF5080	—
storage.type, support.type	#409090	—
constant.language, support.constant, variable.language	#E04070	—
variable, support.variable	#FFE0E8	—
entity.name.function, support.function	#FF5080	bold
entity.name.type, entity.other.inherited-class, support.class	#409090	bold
entity.name.exception	#FF5080	—
constant.numeric, constant.character, constant	#C06080	—
string	#609070	—
constant.character.escape	#FF5080	—
string.regexp	#E04070	—
punctuation	#806070	—
entity.name.tag	#FF5080	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#409090	italic
meta.property-name, support.type.property-name	#FF5080	—
markup.heading	#FF5080	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}!`;
}