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

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#242222
activityBar.border#D5E5E8
activityBar.foreground#D5EEF5
activityBar.inactiveForeground#8A8686
activityBarBadge.background#7babb4
activityBarBadge.foreground#ffffff
badge.background#7babb4
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#7babb4
breadcrumb.background#FDFEFE
breadcrumb.focusForeground#242222
breadcrumb.foreground#7A7676
breadcrumbPicker.background#ffffff
button.background#7babb4
button.border#7babb460
button.foreground#ffffff
button.hoverBackground#5A8B94
button.secondaryBackground#4A4646
button.secondaryForeground#ffffff
button.secondaryHoverBackground#242222
descriptionForeground#7A7676
dropdown.background#ffffff
dropdown.border#D5E5E8
dropdown.foreground#242222
dropdown.listBackground#FBFDFE
editor.background#FDFEFE
editor.findMatchBackground#e6a4c750
editor.findMatchBorder#e6a4c7
editor.findMatchHighlightBackground#7babb428
editor.foreground#242222
editor.inactiveSelectionBackground#EDF5F740
editor.lineHighlightBackground#F8FBFC
editor.lineHighlightBorder#EDF5F700
editor.selectionBackground#7babb435
editor.wordHighlightBackground#7babb420
editor.wordHighlightBorder#7babb460
editor.wordHighlightStrongBackground#7babb440
editor.wordHighlightStrongBorder#7babb480
editorBracketMatch.background#7babb430
editorBracketMatch.border#7babb4
editorCursor.foreground#7babb4
editorGroupHeader.tabsBackground#FBFDFE
editorGroupHeader.tabsBorder#D5E5E8
editorGutter.addedBackground#70A898
editorGutter.background#FDFEFE
editorGutter.deletedBackground#C87888
editorGutter.modifiedBackground#A890B8
editorHoverWidget.background#ffffff
editorHoverWidget.border#D5E5E8
editorHoverWidget.statusBarBackground#FBFDFE
editorIndentGuide.activeBackground1#B5D5D8
editorIndentGuide.background1#D5E5E8
editorLineNumber.activeForeground#7babb4
editorLineNumber.foreground#BDD5D8
editorOverviewRuler.addedForeground#70A898
editorOverviewRuler.border#D5E5E8
editorOverviewRuler.deletedForeground#C87888
editorOverviewRuler.errorForeground#C87888
editorOverviewRuler.findMatchForeground#e6a4c780
editorOverviewRuler.modifiedForeground#A890B8
editorOverviewRuler.warningForeground#A890B8
editorRuler.foreground#D5E5E8
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#D5E5E8
editorSuggestWidget.focusHighlightForeground#5A8B94
editorSuggestWidget.foreground#242222
editorSuggestWidget.highlightForeground#7babb4
editorSuggestWidget.selectedBackground#EDF5F7
editorWidget.background#ffffff
editorWidget.border#D5E5E8
editorWidget.foreground#242222
editorWidget.resizeBorder#7babb4
errorForeground#C87888
focusBorder#7babb480
gitDecoration.addedResourceForeground#70A898
gitDecoration.conflictingResourceForeground#D8B8D0
gitDecoration.deletedResourceForeground#C87888
gitDecoration.ignoredResourceForeground#8A8686
gitDecoration.modifiedResourceForeground#A890B8
gitDecoration.stageDeletedResourceForeground#C87888
gitDecoration.stageModifiedResourceForeground#A890B8
gitDecoration.submoduleResourceForeground#97cadd
gitDecoration.untrackedResourceForeground#7babb4
icon.foreground#7babb4
input.background#ffffff
input.border#D5E5E8
input.foreground#242222
input.placeholderForeground#8A8686
inputOption.activeBackground#7babb4
inputOption.activeBorder#5A8B94
inputOption.activeForeground#ffffff
inputValidation.errorBackground#C8788820
inputValidation.errorBorder#C87888
inputValidation.infoBackground#97cadd20
inputValidation.infoBorder#97cadd
inputValidation.warningBackground#A890B820
inputValidation.warningBorder#A890B8
list.activeSelectionBackground#7babb4
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.focusBackground#EDF5F7
list.hoverBackground#F8FBFC
list.inactiveSelectionBackground#EDF5F7
list.inactiveSelectionForeground#242222
minimap.background#FDFEFE
minimap.errorHighlight#C87888
minimap.findMatchHighlight#e6a4c780
minimap.selectionHighlight#7babb450
minimap.warningHighlight#A890B8
minimapGutter.addedBackground#70A898
minimapGutter.deletedBackground#C87888
minimapGutter.modifiedBackground#A890B8
notificationCenter.border#D5E5E8
notificationCenterHeader.background#F8FBFC
notificationCenterHeader.foreground#242222
notifications.background#ffffff
notifications.border#D5E5E8
notifications.foreground#242222
notificationsErrorIcon.foreground#C87888
notificationsInfoIcon.foreground#7babb4
notificationsWarningIcon.foreground#A890B8
panel.background#FBFDFE
panel.border#D5E5E8
panelTitle.activeBorder#7babb4
panelTitle.activeForeground#242222
panelTitle.inactiveForeground#8A8686
peekView.border#7babb4
peekViewEditor.background#FDFEFE
peekViewEditor.matchHighlightBackground#7babb440
peekViewEditorGutter.background#FBFDFE
peekViewResult.background#FBFDFE
peekViewResult.fileForeground#242222
peekViewResult.lineForeground#4A4646
peekViewResult.matchHighlightBackground#7babb450
peekViewResult.selectionBackground#7babb430
peekViewResult.selectionForeground#242222
peekViewTitle.background#242222
peekViewTitleDescription.foreground#8A8686
peekViewTitleLabel.foreground#D5EEF5
progressBar.background#7babb4
sash.hoverBorder#7babb4
scrollbar.shadow#00000015
scrollbarSlider.activeBackground#7babb4
scrollbarSlider.background#C5D5D860
scrollbarSlider.hoverBackground#C5D5D880
selection.background#7babb440
sideBar.background#FBFDFE
sideBar.foreground#4A4646
sideBarSectionHeader.background#EDF5F7
sideBarSectionHeader.border#D5E5E8
sideBarSectionHeader.foreground#242222
sideBarTitle.foreground#7babb4
statusBar.background#7babb4
statusBar.border#8BBBC4
statusBar.debuggingBackground#e6a4c7
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#4A4646
statusBar.noFolderForeground#ffffff
tab.activeBackground#FDFEFE
tab.activeBorder#7babb4
tab.activeBorderTop#7babb4
tab.activeForeground#7babb4
tab.border#D5E5E8
tab.hoverBackground#F8FBFC
tab.hoverBorder#7babb480
tab.hoverForeground#7babb4
tab.inactiveBackground#FBFDFE
tab.inactiveForeground#7A7676
terminal.ansiBlack#242222
terminal.ansiBlue#97cadd
terminal.ansiBrightBlack#7A7676
terminal.ansiBrightBlue#A8D8EC
terminal.ansiBrightCyan#8BBBC4
terminal.ansiBrightGreen#88C0A8
terminal.ansiBrightMagenta#F8B8D8
terminal.ansiBrightRed#D88898
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#E8C8E0
terminal.ansiCyan#7babb4
terminal.ansiGreen#70A898
terminal.ansiMagenta#e6a4c7
terminal.ansiRed#C87888
terminal.ansiWhite#FBFDFE
terminal.ansiYellow#D8B8D0
terminal.background#FDFEFE
terminal.border#D5E5E8
terminal.foreground#242222
textBlockQuote.background#F8FBFC
textBlockQuote.border#7babb4
textCodeBlock.background#F8FBFC
textLink.activeForeground#5A8B94
textLink.foreground#7babb4
textPreformat.foreground#A890B8
textSeparator.foreground#D5E5E8
titleBar.activeBackground#242222
titleBar.activeForeground#D5EEF5
titleBar.border#D5E5E8
titleBar.inactiveBackground#4A4646
titleBar.inactiveForeground#8A8686

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8A8686	italic
keyword, storage	#5A8B94	—
storage.type, support.type	#4A7B84	—
constant.language, support.constant, variable.language	#D890B8	—
variable, support.variable	#242222	—
entity.name.function, support.function	#A890B8	bold
entity.name.type, entity.other.inherited-class, support.class	#4A7B84	bold
constant.numeric, constant.character, constant	#C87888	—
string	#787878	—
constant.character.escape	#7babb4	—
punctuation	#7A7676	—
entity.name.tag	#5A8B94	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#4A7B84	italic
meta.property-name, support.type.property-name	#A890B8	—
markup.heading	#7babb4	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}!`;
}