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

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#1D2228
activityBar.border#D0DAE5
activityBar.foreground#D5E5F5
activityBar.inactiveForeground#828A90
activityBarBadge.background#345183
activityBarBadge.foreground#ffffff
badge.background#345183
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#345183
breadcrumb.background#FEFEFF
breadcrumb.focusForeground#1D2228
breadcrumb.foreground#727A80
breadcrumbPicker.background#ffffff
button.background#345183
button.border#34518360
button.foreground#ffffff
button.hoverBackground#244173
button.secondaryBackground#42484E
button.secondaryForeground#ffffff
button.secondaryHoverBackground#1D2228
descriptionForeground#727A80
dropdown.background#ffffff
dropdown.border#D0DAE5
dropdown.foreground#1D2228
dropdown.listBackground#FBFDFE
editor.background#FEFEFF
editor.findMatchBackground#9f76b850
editor.findMatchBorder#9f76b8
editor.findMatchHighlightBackground#34518328
editor.foreground#1D2228
editor.inactiveSelectionBackground#EDF3F840
editor.lineHighlightBackground#F8FAFE
editor.lineHighlightBorder#EDF3F800
editor.selectionBackground#34518335
editor.wordHighlightBackground#34518320
editor.wordHighlightBorder#34518360
editor.wordHighlightStrongBackground#34518340
editor.wordHighlightStrongBorder#34518380
editorBracketMatch.background#34518330
editorBracketMatch.border#345183
editorCursor.foreground#345183
editorGroupHeader.tabsBackground#FBFDFE
editorGroupHeader.tabsBorder#D0DAE5
editorGutter.addedBackground#70A888
editorGutter.background#FEFEFF
editorGutter.deletedBackground#C87888
editorGutter.modifiedBackground#7878B8
editorHoverWidget.background#ffffff
editorHoverWidget.border#D0DAE5
editorHoverWidget.statusBarBackground#FBFDFE
editorIndentGuide.activeBackground1#B0C5D5
editorIndentGuide.background1#D0DAE5
editorLineNumber.activeForeground#345183
editorLineNumber.foreground#C0CAD5
editorOverviewRuler.addedForeground#70A888
editorOverviewRuler.border#D0DAE5
editorOverviewRuler.deletedForeground#C87888
editorOverviewRuler.errorForeground#C87888
editorOverviewRuler.findMatchForeground#9f76b880
editorOverviewRuler.modifiedForeground#7878B8
editorOverviewRuler.warningForeground#7878B8
editorRuler.foreground#D0DAE5
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#D0DAE5
editorSuggestWidget.focusHighlightForeground#244173
editorSuggestWidget.foreground#1D2228
editorSuggestWidget.highlightForeground#345183
editorSuggestWidget.selectedBackground#EDF3F8
editorWidget.background#ffffff
editorWidget.border#D0DAE5
editorWidget.foreground#1D2228
editorWidget.resizeBorder#345183
errorForeground#C87888
focusBorder#34518380
gitDecoration.addedResourceForeground#70A888
gitDecoration.conflictingResourceForeground#A898D8
gitDecoration.deletedResourceForeground#C87888
gitDecoration.ignoredResourceForeground#828A90
gitDecoration.modifiedResourceForeground#7878B8
gitDecoration.stageDeletedResourceForeground#C87888
gitDecoration.stageModifiedResourceForeground#7878B8
gitDecoration.submoduleResourceForeground#3486d8
gitDecoration.untrackedResourceForeground#345183
icon.foreground#345183
input.background#ffffff
input.border#D0DAE5
input.foreground#1D2228
input.placeholderForeground#828A90
inputOption.activeBackground#345183
inputOption.activeBorder#244173
inputOption.activeForeground#ffffff
inputValidation.errorBackground#C8788820
inputValidation.errorBorder#C87888
inputValidation.infoBackground#3486d820
inputValidation.infoBorder#3486d8
inputValidation.warningBackground#7878B820
inputValidation.warningBorder#7878B8
list.activeSelectionBackground#345183
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.focusBackground#EDF3F8
list.hoverBackground#F8FAFE
list.inactiveSelectionBackground#EDF3F8
list.inactiveSelectionForeground#1D2228
minimap.background#FEFEFF
minimap.errorHighlight#C87888
minimap.findMatchHighlight#9f76b880
minimap.selectionHighlight#34518350
minimap.warningHighlight#7878B8
minimapGutter.addedBackground#70A888
minimapGutter.deletedBackground#C87888
minimapGutter.modifiedBackground#7878B8
notificationCenter.border#D0DAE5
notificationCenterHeader.background#F8FAFE
notificationCenterHeader.foreground#1D2228
notifications.background#ffffff
notifications.border#D0DAE5
notifications.foreground#1D2228
notificationsErrorIcon.foreground#C87888
notificationsInfoIcon.foreground#345183
notificationsWarningIcon.foreground#7878B8
panel.background#FBFDFE
panel.border#D0DAE5
panelTitle.activeBorder#345183
panelTitle.activeForeground#1D2228
panelTitle.inactiveForeground#828A90
peekView.border#345183
peekViewEditor.background#FEFEFF
peekViewEditor.matchHighlightBackground#34518340
peekViewEditorGutter.background#FBFDFE
peekViewResult.background#FBFDFE
peekViewResult.fileForeground#1D2228
peekViewResult.lineForeground#42484E
peekViewResult.matchHighlightBackground#34518350
peekViewResult.selectionBackground#34518330
peekViewResult.selectionForeground#1D2228
peekViewTitle.background#1D2228
peekViewTitleDescription.foreground#828A90
peekViewTitleLabel.foreground#D5E5F5
progressBar.background#345183
sash.hoverBorder#345183
scrollbar.shadow#00000015
scrollbarSlider.activeBackground#345183
scrollbarSlider.background#C0D5E560
scrollbarSlider.hoverBackground#C0D5E580
selection.background#34518340
sideBar.background#FBFDFE
sideBar.foreground#42484E
sideBarSectionHeader.background#EDF3F8
sideBarSectionHeader.border#D0DAE5
sideBarSectionHeader.foreground#1D2228
sideBarTitle.foreground#345183
statusBar.background#345183
statusBar.border#5080B8
statusBar.debuggingBackground#9f76b8
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#42484E
statusBar.noFolderForeground#ffffff
tab.activeBackground#FEFEFF
tab.activeBorder#345183
tab.activeBorderTop#345183
tab.activeForeground#345183
tab.border#D0DAE5
tab.hoverBackground#F8FAFE
tab.hoverBorder#34518380
tab.hoverForeground#345183
tab.inactiveBackground#FBFDFE
tab.inactiveForeground#727A80
terminal.ansiBlack#1D2228
terminal.ansiBlue#3486d8
terminal.ansiBrightBlack#727A80
terminal.ansiBrightBlue#5098E8
terminal.ansiBrightCyan#636A87
terminal.ansiBrightGreen#88C098
terminal.ansiBrightMagenta#B090C8
terminal.ansiBrightRed#D88898
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#B8A8E8
terminal.ansiCyan#535a77
terminal.ansiGreen#70A888
terminal.ansiMagenta#9f76b8
terminal.ansiRed#C87888
terminal.ansiWhite#FBFDFE
terminal.ansiYellow#A898D8
terminal.background#FEFEFF
terminal.border#D0DAE5
terminal.foreground#1D2228
textBlockQuote.background#F8FAFE
textBlockQuote.border#345183
textCodeBlock.background#F8FAFE
textLink.activeForeground#244173
textLink.foreground#345183
textPreformat.foreground#7878B8
textSeparator.foreground#D0DAE5
titleBar.activeBackground#1D2228
titleBar.activeForeground#D5E5F5
titleBar.border#D0DAE5
titleBar.inactiveBackground#42484E
titleBar.inactiveForeground#828A90

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#828A90	italic
keyword, storage	#244173	—
storage.type, support.type	#143163	—
constant.language, support.constant, variable.language	#8888C8	—
variable, support.variable	#1D2228	—
entity.name.function, support.function	#7878B8	bold
entity.name.type, entity.other.inherited-class, support.class	#143163	bold
constant.numeric, constant.character, constant	#9f76b8	—
string	#787880	—
constant.character.escape	#345183	—
punctuation	#727A80	—
entity.name.tag	#244173	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#143163	italic
meta.property-name, support.type.property-name	#7878B8	—
markup.heading	#345183	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}!`;
}