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 (Dark)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#15111A
activityBar.border#281E30
activityBar.foreground#DDCEFC
activityBar.inactiveForeground#8A7888
activityBarBadge.background#a88ebb
activityBarBadge.foreground#ffffff
badge.background#a88ebb
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#DDCEFC
breadcrumb.background#1A1520
breadcrumb.focusForeground#F4F3F6
breadcrumb.foreground#8A7888
breadcrumbPicker.background#1A1520
button.background#a88ebb
button.border#DDCEFC60
button.foreground#ffffff
button.hoverBackground#B89ECB
button.secondaryBackground#342840
button.secondaryForeground#F4F3F6
button.secondaryHoverBackground#443850
descriptionForeground#8A7888
dropdown.background#1A1520
dropdown.border#443850
dropdown.foreground#F4F3F6
dropdown.listBackground#15111A
editor.background#1A1520
editor.findMatchBackground#fab3ca60
editor.findMatchBorder#fab3ca
editor.findMatchHighlightBackground#a88ebb35
editor.foreground#F4F3F6
editor.inactiveSelectionBackground#34284030
editor.lineHighlightBackground#281E30
editor.lineHighlightBorder#34284000
editor.rangeHighlightBackground#281E3080
editor.selectionBackground#a88ebb40
editor.wordHighlightBackground#a88ebb25
editor.wordHighlightBorder#a88ebb60
editor.wordHighlightStrongBackground#a88ebb45
editor.wordHighlightStrongBorder#a88ebb80
editorBracketMatch.background#a88ebb35
editorBracketMatch.border#a88ebb
editorCursor.foreground#a88ebb
editorGroupHeader.tabsBackground#15111A
editorGroupHeader.tabsBorder#281E30
editorGutter.addedBackground#88A890
editorGutter.background#1A1520
editorGutter.deletedBackground#e18da9
editorGutter.modifiedBackground#C8A8D8
editorHoverWidget.background#1A1520
editorHoverWidget.border#443850
editorHoverWidget.statusBarBackground#281E30
editorIndentGuide.activeBackground1#635860
editorIndentGuide.background1#342840
editorLineNumber.activeForeground#DDCEFC
editorLineNumber.foreground#534850
editorOverviewRuler.addedForeground#88A890
editorOverviewRuler.border#281E30
editorOverviewRuler.deletedForeground#e18da9
editorOverviewRuler.errorForeground#e18da9
editorOverviewRuler.findMatchForeground#fab3ca80
editorOverviewRuler.modifiedForeground#C8A8D8
editorOverviewRuler.warningForeground#C8A8D8
editorRuler.foreground#342840
editorSuggestWidget.background#1A1520
editorSuggestWidget.border#443850
editorSuggestWidget.focusHighlightForeground#a88ebb
editorSuggestWidget.foreground#F4F3F6
editorSuggestWidget.highlightForeground#DDCEFC
editorSuggestWidget.selectedBackground#342840
editorWidget.background#281E30
editorWidget.border#443850
editorWidget.foreground#F4F3F6
editorWidget.resizeBorder#a88ebb
errorForeground#e18da9
focusBorder#a88ebb80
gitDecoration.addedResourceForeground#88A890
gitDecoration.conflictingResourceForeground#fab3ca
gitDecoration.deletedResourceForeground#e18da9
gitDecoration.ignoredResourceForeground#635860
gitDecoration.modifiedResourceForeground#C8A8D8
gitDecoration.stageDeletedResourceForeground#e18da9
gitDecoration.stageModifiedResourceForeground#C8A8D8
gitDecoration.submoduleResourceForeground#DDCEFC
gitDecoration.untrackedResourceForeground#a88ebb
icon.foreground#DDCEFC
input.background#15111A
input.border#443850
input.foreground#F4F3F6
input.placeholderForeground#8A7888
inputOption.activeBackground#a88ebb
inputOption.activeBorder#DDCEFC
inputOption.activeForeground#ffffff
inputValidation.errorBackground#e18da920
inputValidation.errorBorder#e18da9
inputValidation.infoBackground#DDCEFC20
inputValidation.infoBorder#DDCEFC
inputValidation.warningBackground#C8A8D820
inputValidation.warningBorder#C8A8D8
list.activeSelectionBackground#a88ebb
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.focusBackground#342840
list.hoverBackground#281E30
list.inactiveSelectionBackground#342840
list.inactiveSelectionForeground#D8CEDC
minimap.background#1A1520
minimap.errorHighlight#e18da9
minimap.findMatchHighlight#fab3ca80
minimap.selectionHighlight#a88ebb50
minimap.warningHighlight#C8A8D8
minimapGutter.addedBackground#88A890
minimapGutter.deletedBackground#e18da9
minimapGutter.modifiedBackground#C8A8D8
notificationCenter.border#443850
notificationCenterHeader.background#281E30
notificationCenterHeader.foreground#F4F3F6
notifications.background#281E30
notifications.border#443850
notifications.foreground#F4F3F6
notificationsErrorIcon.foreground#e18da9
notificationsInfoIcon.foreground#DDCEFC
notificationsWarningIcon.foreground#C8A8D8
panel.background#15111A
panel.border#443850
panelTitle.activeBorder#a88ebb
panelTitle.activeForeground#F4F3F6
panelTitle.inactiveForeground#8A7888
peekView.border#a88ebb
peekViewEditor.background#1A1520
peekViewEditor.matchHighlightBackground#a88ebb40
peekViewEditorGutter.background#281E30
peekViewResult.background#281E30
peekViewResult.fileForeground#F4F3F6
peekViewResult.lineForeground#D8CEDC
peekViewResult.matchHighlightBackground#a88ebb50
peekViewResult.selectionBackground#a88ebb35
peekViewResult.selectionForeground#F4F3F6
peekViewTitle.background#15111A
peekViewTitleDescription.foreground#8A7888
peekViewTitleLabel.foreground#DDCEFC
progressBar.background#DDCEFC
sash.hoverBorder#a88ebb
scrollbar.shadow#00000040
scrollbarSlider.activeBackground#a88ebb
scrollbarSlider.background#63586050
scrollbarSlider.hoverBackground#63586070
selection.background#a88ebb45
sideBar.background#15111A
sideBar.foreground#D8CEDC
sideBarSectionHeader.background#281E30
sideBarSectionHeader.border#443850
sideBarSectionHeader.foreground#F4F3F6
sideBarTitle.foreground#DDCEFC
statusBar.background#a88ebb
statusBar.border#443850
statusBar.debuggingBackground#e18da9
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#281E30
statusBar.noFolderForeground#F4F3F6
tab.activeBackground#1A1520
tab.activeBorder#a88ebb
tab.activeBorderTop#a88ebb
tab.activeForeground#DDCEFC
tab.border#281E30
tab.hoverBackground#1E1824
tab.hoverBorder#a88ebb80
tab.hoverForeground#DDCEFC
tab.inactiveBackground#15111A
tab.inactiveForeground#8A7888
tab.unfocusedActiveForeground#D8CEDC
terminal.ansiBlack#1A1520
terminal.ansiBlue#DDCEFC
terminal.ansiBrightBlack#635860
terminal.ansiBrightBlue#EEDEFC
terminal.ansiBrightCyan#D8B8E8
terminal.ansiBrightGreen#98B8A0
terminal.ansiBrightMagenta#C8AECB
terminal.ansiBrightRed#F0A0C0
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFC8DC
terminal.ansiCyan#C8A8D8
terminal.ansiGreen#88A890
terminal.ansiMagenta#a88ebb
terminal.ansiRed#e18da9
terminal.ansiWhite#F4F3F6
terminal.ansiYellow#fab3ca
terminal.background#1A1520
terminal.border#281E30
terminal.foreground#F4F3F6
textBlockQuote.background#281E30
textBlockQuote.border#a88ebb
textCodeBlock.background#281E30
textLink.activeForeground#EEDEFC
textLink.foreground#DDCEFC
textPreformat.foreground#C8A8D8
textSeparator.foreground#443850
titleBar.activeBackground#15111A
titleBar.activeForeground#F4F3F6
titleBar.border#281E30
titleBar.inactiveBackground#1A1520
titleBar.inactiveForeground#8A7888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#756870	italic
keyword, storage	#DDCEFC	—
storage.type, support.type	#a88ebb	—
constant.language, support.constant, variable.language	#fab3ca	—
variable, support.variable	#F4F3F6	—
entity.name.function, support.function	#C8A8D8	bold
entity.name.type, entity.other.inherited-class, support.class	#a88ebb	bold
constant.numeric, constant.character, constant	#e18da9	—
string	#C0A8B8	—
constant.character.escape	#DDCEFC	—
punctuation	#A898A8	—
entity.name.tag	#DDCEFC	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#a88ebb	italic
meta.property-name, support.type.property-name	#C8A8D8	—
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}!`;
}