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

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#2D2535
activityBar.border#E8D8EC
activityBar.foreground#F0E0F8
activityBar.inactiveForeground#9D8A9A
activityBarBadge.background#a88ebb
activityBarBadge.foreground#ffffff
badge.background#a88ebb
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#a88ebb
breadcrumb.background#FEFEFC
breadcrumb.focusForeground#2D2535
breadcrumb.foreground#8D7A8A
breadcrumbPicker.background#ffffff
button.background#a88ebb
button.border#a88ebb60
button.foreground#ffffff
button.hoverBackground#8870A0
button.secondaryBackground#5D4A5A
button.secondaryForeground#ffffff
button.secondaryHoverBackground#2D2535
descriptionForeground#8D7A8A
dropdown.background#ffffff
dropdown.border#E8D8EC
dropdown.foreground#2D2535
dropdown.listBackground#FBF8FD
editor.background#FEFEFC
editor.findMatchBackground#fab3ca50
editor.findMatchBorder#fab3ca
editor.findMatchHighlightBackground#a88ebb28
editor.foreground#2D2535
editor.inactiveSelectionBackground#F0E8F540
editor.lineHighlightBackground#F8F3FB
editor.lineHighlightBorder#F0E8F500
editor.selectionBackground#a88ebb35
editor.wordHighlightBackground#a88ebb20
editor.wordHighlightBorder#a88ebb60
editor.wordHighlightStrongBackground#a88ebb40
editor.wordHighlightStrongBorder#a88ebb80
editorBracketMatch.background#a88ebb30
editorBracketMatch.border#a88ebb
editorCursor.foreground#a88ebb
editorGroupHeader.tabsBackground#FBF8FD
editorGroupHeader.tabsBorder#E8D8EC
editorGutter.addedBackground#70A888
editorGutter.background#FEFEFC
editorGutter.deletedBackground#D87898
editorGutter.modifiedBackground#B898C8
editorHoverWidget.background#ffffff
editorHoverWidget.border#E8D8EC
editorHoverWidget.statusBarBackground#FBF8FD
editorIndentGuide.activeBackground1#D0B8D8
editorIndentGuide.background1#E8D8EC
editorLineNumber.activeForeground#a88ebb
editorLineNumber.foreground#D0C0CE
editorOverviewRuler.addedForeground#70A888
editorOverviewRuler.border#E8D8EC
editorOverviewRuler.deletedForeground#D87898
editorOverviewRuler.errorForeground#D87898
editorOverviewRuler.findMatchForeground#fab3ca80
editorOverviewRuler.modifiedForeground#B898C8
editorOverviewRuler.warningForeground#B898C8
editorRuler.foreground#E8D8EC
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#E8D8EC
editorSuggestWidget.focusHighlightForeground#8870A0
editorSuggestWidget.foreground#2D2535
editorSuggestWidget.highlightForeground#a88ebb
editorSuggestWidget.selectedBackground#F0E8F5
editorWidget.background#ffffff
editorWidget.border#E8D8EC
editorWidget.foreground#2D2535
editorWidget.resizeBorder#a88ebb
errorForeground#D87898
focusBorder#a88ebb80
gitDecoration.addedResourceForeground#70A888
gitDecoration.conflictingResourceForeground#E8B8D0
gitDecoration.deletedResourceForeground#D87898
gitDecoration.ignoredResourceForeground#9D8A9A
gitDecoration.modifiedResourceForeground#B898C8
gitDecoration.stageDeletedResourceForeground#D87898
gitDecoration.stageModifiedResourceForeground#B898C8
gitDecoration.submoduleResourceForeground#C8A8D8
gitDecoration.untrackedResourceForeground#a88ebb
icon.foreground#a88ebb
input.background#ffffff
input.border#E8D8EC
input.foreground#2D2535
input.placeholderForeground#9D8A9A
inputOption.activeBackground#a88ebb
inputOption.activeBorder#8870A0
inputOption.activeForeground#ffffff
inputValidation.errorBackground#D8789820
inputValidation.errorBorder#D87898
inputValidation.infoBackground#DDCEFC20
inputValidation.infoBorder#DDCEFC
inputValidation.warningBackground#B898C820
inputValidation.warningBorder#B898C8
list.activeSelectionBackground#a88ebb
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.focusBackground#F0E8F5
list.hoverBackground#F8F3FB
list.inactiveSelectionBackground#F0E8F5
list.inactiveSelectionForeground#2D2535
minimap.background#FEFEFC
minimap.errorHighlight#D87898
minimap.findMatchHighlight#fab3ca80
minimap.selectionHighlight#a88ebb50
minimap.warningHighlight#B898C8
minimapGutter.addedBackground#70A888
minimapGutter.deletedBackground#D87898
minimapGutter.modifiedBackground#B898C8
notificationCenter.border#E8D8EC
notificationCenterHeader.background#F8F3FB
notificationCenterHeader.foreground#2D2535
notifications.background#ffffff
notifications.border#E8D8EC
notifications.foreground#2D2535
notificationsErrorIcon.foreground#D87898
notificationsInfoIcon.foreground#DDCEFC
notificationsWarningIcon.foreground#B898C8
panel.background#FBF8FD
panel.border#E8D8EC
panelTitle.activeBorder#a88ebb
panelTitle.activeForeground#2D2535
panelTitle.inactiveForeground#9D8A9A
peekView.border#a88ebb
peekViewEditor.background#FEFEFC
peekViewEditor.matchHighlightBackground#a88ebb40
peekViewEditorGutter.background#FBF8FD
peekViewResult.background#FBF8FD
peekViewResult.fileForeground#2D2535
peekViewResult.lineForeground#5D4A5A
peekViewResult.matchHighlightBackground#a88ebb50
peekViewResult.selectionBackground#a88ebb30
peekViewResult.selectionForeground#2D2535
peekViewTitle.background#2D2535
peekViewTitleDescription.foreground#9D8A9A
peekViewTitleLabel.foreground#F0E0F8
progressBar.background#a88ebb
sash.hoverBorder#a88ebb
scrollbar.shadow#00000015
scrollbarSlider.activeBackground#a88ebb
scrollbarSlider.background#D8B8D860
scrollbarSlider.hoverBackground#D8B8D880
selection.background#a88ebb40
sideBar.background#FBF8FD
sideBar.foreground#5D4A5A
sideBarSectionHeader.background#F0E8F5
sideBarSectionHeader.border#E8D8EC
sideBarSectionHeader.foreground#2D2535
sideBarTitle.foreground#a88ebb
statusBar.background#a88ebb
statusBar.border#C8B8D8
statusBar.debuggingBackground#e18da9
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#5D4A5A
statusBar.noFolderForeground#ffffff
tab.activeBackground#FEFEFC
tab.activeBorder#a88ebb
tab.activeBorderTop#a88ebb
tab.activeForeground#a88ebb
tab.border#E8D8EC
tab.hoverBackground#F8F3FB
tab.hoverBorder#a88ebb80
tab.hoverForeground#a88ebb
tab.inactiveBackground#FBF8FD
tab.inactiveForeground#8D7A8A
terminal.ansiBlack#2D2535
terminal.ansiBlue#B8A8D8
terminal.ansiBrightBlack#8D7A8A
terminal.ansiBrightBlue#D0C0E8
terminal.ansiBrightCyan#D8B8E8
terminal.ansiBrightGreen#88C0A0
terminal.ansiBrightMagenta#C8AECB
terminal.ansiBrightRed#E890B0
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#F8D0E8
terminal.ansiCyan#C8A8D8
terminal.ansiGreen#70A888
terminal.ansiMagenta#a88ebb
terminal.ansiRed#D87898
terminal.ansiWhite#FBF8FD
terminal.ansiYellow#E8B8D0
terminal.background#FEFEFC
terminal.border#E8D8EC
terminal.foreground#2D2535
textBlockQuote.background#F8F3FB
textBlockQuote.border#a88ebb
textCodeBlock.background#F8F3FB
textLink.activeForeground#8870A0
textLink.foreground#a88ebb
textPreformat.foreground#B898C8
textSeparator.foreground#E8D8EC
titleBar.activeBackground#2D2535
titleBar.activeForeground#F0E0F8
titleBar.border#E8D8EC
titleBar.inactiveBackground#5D4A5A
titleBar.inactiveForeground#9D8A9A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9D8A9A	italic
keyword, storage	#8870A0	—
storage.type, support.type	#705888	—
constant.language, support.constant, variable.language	#D8A0C8	—
variable, support.variable	#2D2535	—
entity.name.function, support.function	#B898C8	bold
entity.name.type, entity.other.inherited-class, support.class	#705888	bold
constant.numeric, constant.character, constant	#D87898	—
string	#887888	—
constant.character.escape	#a88ebb	—
punctuation	#8D7A8A	—
entity.name.tag	#8870A0	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#705888	italic
meta.property-name, support.type.property-name	#B898C8	—
markup.heading	#a88ebb	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}!`;
}