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 : Taoqi

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#2D1D25
activityBar.border#E8D0DC
activityBar.foreground#FFE0EA
activityBar.inactiveForeground#9D8288
activityBarBadge.background#b9536e
activityBarBadge.foreground#ffffff
badge.background#b9536e
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#b9536e
breadcrumb.background#FEFCFD
breadcrumb.focusForeground#2D1D25
breadcrumb.foreground#8D7278
breadcrumbPicker.background#ffffff
button.background#b9536e
button.border#b9536e60
button.foreground#ffffff
button.hoverBackground#99435E
button.secondaryBackground#5D4248
button.secondaryForeground#ffffff
button.secondaryHoverBackground#2D1D25
descriptionForeground#8D7278
dropdown.background#ffffff
dropdown.border#E8D0DC
dropdown.foreground#2D1D25
dropdown.listBackground#FCF8FA
editor.background#FEFCFD
editor.findMatchBackground#f7c1cf50
editor.findMatchBorder#f7c1cf
editor.findMatchHighlightBackground#b9536e28
editor.foreground#2D1D25
editor.inactiveSelectionBackground#F8E8F040
editor.lineHighlightBackground#FBF3F7
editor.lineHighlightBorder#F8E8F000
editor.selectionBackground#b9536e35
editor.wordHighlightBackground#b9536e20
editor.wordHighlightBorder#b9536e60
editor.wordHighlightStrongBackground#b9536e40
editor.wordHighlightStrongBorder#b9536e80
editorBracketMatch.background#b9536e30
editorBracketMatch.border#b9536e
editorCursor.foreground#b9536e
editorGroupHeader.tabsBackground#FCF8FA
editorGroupHeader.tabsBorder#E8D0DC
editorGutter.addedBackground#70A888
editorGutter.background#FEFCFD
editorGutter.deletedBackground#D86380
editorGutter.modifiedBackground#B878A8
editorHoverWidget.background#ffffff
editorHoverWidget.border#E8D0DC
editorHoverWidget.statusBarBackground#FCF8FA
editorIndentGuide.activeBackground1#D0B0C0
editorIndentGuide.background1#E8D0DC
editorLineNumber.activeForeground#b9536e
editorLineNumber.foreground#D0B8C0
editorOverviewRuler.addedForeground#70A888
editorOverviewRuler.border#E8D0DC
editorOverviewRuler.deletedForeground#D86380
editorOverviewRuler.errorForeground#D86380
editorOverviewRuler.findMatchForeground#f7c1cf80
editorOverviewRuler.modifiedForeground#B878A8
editorOverviewRuler.warningForeground#B878A8
editorRuler.foreground#E8D0DC
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#E8D0DC
editorSuggestWidget.focusHighlightForeground#99435E
editorSuggestWidget.foreground#2D1D25
editorSuggestWidget.highlightForeground#b9536e
editorSuggestWidget.selectedBackground#F8E8F0
editorWidget.background#ffffff
editorWidget.border#E8D0DC
editorWidget.foreground#2D1D25
editorWidget.resizeBorder#b9536e
errorForeground#D86380
focusBorder#b9536e80
gitDecoration.addedResourceForeground#70A888
gitDecoration.conflictingResourceForeground#E8A8C8
gitDecoration.deletedResourceForeground#D86380
gitDecoration.ignoredResourceForeground#9D8288
gitDecoration.modifiedResourceForeground#B878A8
gitDecoration.stageDeletedResourceForeground#D86380
gitDecoration.stageModifiedResourceForeground#B878A8
gitDecoration.submoduleResourceForeground#A878A8
gitDecoration.untrackedResourceForeground#b9536e
icon.foreground#b9536e
input.background#ffffff
input.border#E8D0DC
input.foreground#2D1D25
input.placeholderForeground#9D8288
inputOption.activeBackground#b9536e
inputOption.activeBorder#99435E
inputOption.activeForeground#ffffff
inputValidation.errorBackground#D8638020
inputValidation.errorBorder#D86380
inputValidation.infoBackground#f7c1cf20
inputValidation.infoBorder#f7c1cf
inputValidation.warningBackground#B878A820
inputValidation.warningBorder#B878A8
list.activeSelectionBackground#b9536e
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.focusBackground#F8E8F0
list.hoverBackground#FBF3F7
list.inactiveSelectionBackground#F8E8F0
list.inactiveSelectionForeground#2D1D25
minimap.background#FEFCFD
minimap.errorHighlight#D86380
minimap.findMatchHighlight#f7c1cf80
minimap.selectionHighlight#b9536e50
minimap.warningHighlight#B878A8
minimapGutter.addedBackground#70A888
minimapGutter.deletedBackground#D86380
minimapGutter.modifiedBackground#B878A8
notificationCenter.border#E8D0DC
notificationCenterHeader.background#FBF3F7
notificationCenterHeader.foreground#2D1D25
notifications.background#ffffff
notifications.border#E8D0DC
notifications.foreground#2D1D25
notificationsErrorIcon.foreground#D86380
notificationsInfoIcon.foreground#b9536e
notificationsWarningIcon.foreground#B878A8
panel.background#FCF8FA
panel.border#E8D0DC
panelTitle.activeBorder#b9536e
panelTitle.activeForeground#2D1D25
panelTitle.inactiveForeground#9D8288
peekView.border#b9536e
peekViewEditor.background#FEFCFD
peekViewEditor.matchHighlightBackground#b9536e40
peekViewEditorGutter.background#FCF8FA
peekViewResult.background#FCF8FA
peekViewResult.fileForeground#2D1D25
peekViewResult.lineForeground#5D4248
peekViewResult.matchHighlightBackground#b9536e50
peekViewResult.selectionBackground#b9536e30
peekViewResult.selectionForeground#2D1D25
peekViewTitle.background#2D1D25
peekViewTitleDescription.foreground#9D8288
peekViewTitleLabel.foreground#FFE0EA
progressBar.background#b9536e
sash.hoverBorder#b9536e
scrollbar.shadow#00000015
scrollbarSlider.activeBackground#b9536e
scrollbarSlider.background#D8B0C060
scrollbarSlider.hoverBackground#D8B0C080
selection.background#b9536e40
sideBar.background#FCF8FA
sideBar.foreground#5D4248
sideBarSectionHeader.background#F8E8F0
sideBarSectionHeader.border#E8D0DC
sideBarSectionHeader.foreground#2D1D25
sideBarTitle.foreground#b9536e
statusBar.background#b9536e
statusBar.border#D87090
statusBar.debuggingBackground#D86380
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#5D4248
statusBar.noFolderForeground#ffffff
tab.activeBackground#FEFCFD
tab.activeBorder#b9536e
tab.activeBorderTop#b9536e
tab.activeForeground#b9536e
tab.border#E8D0DC
tab.hoverBackground#FBF3F7
tab.hoverBorder#b9536e80
tab.hoverForeground#b9536e
tab.inactiveBackground#FCF8FA
tab.inactiveForeground#8D7278
terminal.ansiBlack#2D1D25
terminal.ansiBlue#9878B8
terminal.ansiBrightBlack#8D7278
terminal.ansiBrightBlue#A888C8
terminal.ansiBrightCyan#B888B8
terminal.ansiBrightGreen#88C098
terminal.ansiBrightMagenta#C9637E
terminal.ansiBrightRed#E87390
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#F8C0D8
terminal.ansiCyan#A878A8
terminal.ansiGreen#70A888
terminal.ansiMagenta#b9536e
terminal.ansiRed#D86380
terminal.ansiWhite#FCF8FA
terminal.ansiYellow#E8A8C8
terminal.background#FEFCFD
terminal.border#E8D0DC
terminal.foreground#2D1D25
textBlockQuote.background#FBF3F7
textBlockQuote.border#b9536e
textCodeBlock.background#FBF3F7
textLink.activeForeground#99435E
textLink.foreground#b9536e
textPreformat.foreground#B878A8
textSeparator.foreground#E8D0DC
titleBar.activeBackground#2D1D25
titleBar.activeForeground#FFE0EA
titleBar.border#E8D0DC
titleBar.inactiveBackground#5D4248
titleBar.inactiveForeground#9D8288

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9D8288	italic
keyword, storage	#99435E	—
storage.type, support.type	#79334E	—
constant.language, support.constant, variable.language	#D890B0	—
variable, support.variable	#2D1D25	—
entity.name.function, support.function	#B878A8	bold
entity.name.type, entity.other.inherited-class, support.class	#79334E	bold
constant.numeric, constant.character, constant	#D86380	—
string	#987888	—
constant.character.escape	#b9536e	—
punctuation	#8D7278	—
entity.name.tag	#99435E	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#79334E	italic
meta.property-name, support.type.property-name	#B878A8	—
markup.heading	#b9536e	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}!`;
}