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

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#1d1f20
activityBar.border#D8E0DA
activityBar.foreground#E0F0E8
activityBar.inactiveForeground#828A86
activityBarBadge.background#a0a6ad
activityBarBadge.foreground#1d1f20
badge.background#a0a6ad
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#a0a6ad
breadcrumb.background#FEFEFF
breadcrumb.focusForeground#1D1F20
breadcrumb.foreground#72787A
breadcrumbPicker.background#ffffff
button.background#a0a6ad
button.border#a0a6ad60
button.foreground#ffffff
button.hoverBackground#70868D
button.secondaryBackground#42484A
button.secondaryForeground#ffffff
button.secondaryHoverBackground#1d1f20
descriptionForeground#72787A
dropdown.background#ffffff
dropdown.border#D8E0DA
dropdown.foreground#1D1F20
dropdown.listBackground#FCFDFC
editor.background#FEFEFF
editor.findMatchBackground#de747050
editor.findMatchBorder#de7470
editor.findMatchHighlightBackground#a0a6ad28
editor.foreground#1D1F20
editor.inactiveSelectionBackground#EDF3EF40
editor.lineHighlightBackground#F8FAF8
editor.lineHighlightBorder#EDF3EF00
editor.selectionBackground#a0a6ad35
editor.wordHighlightBackground#a0a6ad20
editor.wordHighlightBorder#a0a6ad60
editor.wordHighlightStrongBackground#a0a6ad40
editor.wordHighlightStrongBorder#a0a6ad80
editorBracketMatch.background#a0a6ad30
editorBracketMatch.border#a0a6ad
editorCursor.foreground#a0a6ad
editorGroupHeader.tabsBackground#FCFDFC
editorGroupHeader.tabsBorder#D8E0DA
editorGutter.addedBackground#70A890
editorGutter.background#FEFEFF
editorGutter.deletedBackground#D86870
editorGutter.modifiedBackground#A89898
editorHoverWidget.background#ffffff
editorHoverWidget.border#D8E0DA
editorHoverWidget.statusBarBackground#FCFDFC
editorIndentGuide.activeBackground1#B8D0CA
editorIndentGuide.background1#D8E0DA
editorLineNumber.activeForeground#a0a6ad
editorLineNumber.foreground#C8D0CA
editorOverviewRuler.addedForeground#70A890
editorOverviewRuler.border#D8E0DA
editorOverviewRuler.deletedForeground#D86870
editorOverviewRuler.errorForeground#D86870
editorOverviewRuler.findMatchForeground#de747080
editorOverviewRuler.modifiedForeground#A89898
editorOverviewRuler.warningForeground#A89898
editorRuler.foreground#D8E0DA
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#D8E0DA
editorSuggestWidget.focusHighlightForeground#70868D
editorSuggestWidget.foreground#1D1F20
editorSuggestWidget.highlightForeground#a0a6ad
editorSuggestWidget.selectedBackground#EDF3EF
editorWidget.background#ffffff
editorWidget.border#D8E0DA
editorWidget.foreground#1D1F20
editorWidget.resizeBorder#a0a6ad
errorForeground#D86870
focusBorder#a0a6ad80
gitDecoration.addedResourceForeground#70A890
gitDecoration.conflictingResourceForeground#D8C8B8
gitDecoration.deletedResourceForeground#D86870
gitDecoration.ignoredResourceForeground#828A86
gitDecoration.modifiedResourceForeground#A89898
gitDecoration.stageDeletedResourceForeground#D86870
gitDecoration.stageModifiedResourceForeground#A89898
gitDecoration.submoduleResourceForeground#78A898
gitDecoration.untrackedResourceForeground#a0a6ad
icon.foreground#a0a6ad
input.background#ffffff
input.border#D8E0DA
input.foreground#1D1F20
input.placeholderForeground#828A86
inputOption.activeBackground#a0a6ad
inputOption.activeBorder#70868D
inputOption.activeForeground#ffffff
inputValidation.errorBackground#D8687020
inputValidation.errorBorder#D86870
inputValidation.infoBackground#a0a6ad20
inputValidation.infoBorder#a0a6ad
inputValidation.warningBackground#A8989820
inputValidation.warningBorder#A89898
list.activeSelectionBackground#a0a6ad
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#1d1f20
list.focusBackground#EDF3EF
list.hoverBackground#F8FAF8
list.inactiveSelectionBackground#EDF3EF
list.inactiveSelectionForeground#1D1F20
minimap.background#FEFEFF
minimap.errorHighlight#D86870
minimap.findMatchHighlight#de747080
minimap.selectionHighlight#a0a6ad50
minimap.warningHighlight#A89898
minimapGutter.addedBackground#70A890
minimapGutter.deletedBackground#D86870
minimapGutter.modifiedBackground#A89898
notificationCenter.border#D8E0DA
notificationCenterHeader.background#F8FAF8
notificationCenterHeader.foreground#1D1F20
notifications.background#ffffff
notifications.border#D8E0DA
notifications.foreground#1D1F20
notificationsErrorIcon.foreground#D86870
notificationsInfoIcon.foreground#a0a6ad
notificationsWarningIcon.foreground#A89898
panel.background#FCFDFC
panel.border#D8E0DA
panelTitle.activeBorder#a0a6ad
panelTitle.activeForeground#1D1F20
panelTitle.inactiveForeground#828A86
peekView.border#a0a6ad
peekViewEditor.background#FEFEFF
peekViewEditor.matchHighlightBackground#a0a6ad40
peekViewEditorGutter.background#FCFDFC
peekViewResult.background#FCFDFC
peekViewResult.fileForeground#1D1F20
peekViewResult.lineForeground#42484A
peekViewResult.matchHighlightBackground#a0a6ad50
peekViewResult.selectionBackground#a0a6ad30
peekViewResult.selectionForeground#1D1F20
peekViewTitle.background#1d1f20
peekViewTitleDescription.foreground#828A86
peekViewTitleLabel.foreground#E0F0E8
progressBar.background#a0a6ad
sash.hoverBorder#a0a6ad
scrollbar.shadow#00000015
scrollbarSlider.activeBackground#a0a6ad
scrollbarSlider.background#C8D8D060
scrollbarSlider.hoverBackground#C8D8D080
selection.background#a0a6ad40
sideBar.background#FCFDFC
sideBar.foreground#42484A
sideBarSectionHeader.background#EDF3EF
sideBarSectionHeader.border#D8E0DA
sideBarSectionHeader.foreground#1D1F20
sideBarTitle.foreground#a0a6ad
statusBar.background#a0a6ad
statusBar.border#8A9690
statusBar.debuggingBackground#de7470
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#42484A
statusBar.noFolderForeground#ffffff
tab.activeBackground#FEFEFF
tab.activeBorder#a0a6ad
tab.activeBorderTop#a0a6ad
tab.activeForeground#a0a6ad
tab.border#D8E0DA
tab.hoverBackground#F8FAF8
tab.hoverBorder#a0a6ad80
tab.hoverForeground#a0a6ad
tab.inactiveBackground#FCFDFC
tab.inactiveForeground#72787A
terminal.ansiBlack#1D1F20
terminal.ansiBlue#a0a6ad
terminal.ansiBrightBlack#72787A
terminal.ansiBrightBlue#B0B6BD
terminal.ansiBrightCyan#88B8A8
terminal.ansiBrightGreen#88C0A0
terminal.ansiBrightMagenta#B8A8A8
terminal.ansiBrightRed#E87880
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e8e8e8
terminal.ansiCyan#78A898
terminal.ansiGreen#70A890
terminal.ansiMagenta#A89898
terminal.ansiRed#D86870
terminal.ansiWhite#FCFDFC
terminal.ansiYellow#D8C8B8
terminal.background#FEFEFF
terminal.border#D8E0DA
terminal.foreground#1D1F20
textBlockQuote.background#F8FAF8
textBlockQuote.border#a0a6ad
textCodeBlock.background#F8FAF8
textLink.activeForeground#70868D
textLink.foreground#a0a6ad
textPreformat.foreground#A89898
textSeparator.foreground#D8E0DA
titleBar.activeBackground#1d1f20
titleBar.activeForeground#E0F0E8
titleBar.border#D8E0DA
titleBar.inactiveBackground#42484A
titleBar.inactiveForeground#828A86

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#828A86	italic
keyword, storage	#70868D	—
storage.type, support.type	#50666D	—
constant.language, support.constant, variable.language	#D0B8A8	—
variable, support.variable	#1D1F20	—
entity.name.function, support.function	#70A890	bold
entity.name.type, entity.other.inherited-class, support.class	#50666D	bold
constant.numeric, constant.character, constant	#de7470	—
string	#788880	—
constant.character.escape	#a0a6ad	—
punctuation	#72787A	—
entity.name.tag	#70868D	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#50666D	italic
meta.property-name, support.type.property-name	#70A890	—
markup.heading	#a0a6ad	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}!`;
}