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 : The Shorekeeper

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.activeBackground#356B9F
activityBar.activeBorder#B8A4D4
activityBar.background#2B5F8F
activityBar.border#1E4870
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#8FB8D6
activityBarBadge.background#9B86BD
activityBarBadge.foreground#FFFFFF
badge.background#9B86BD
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#6BB6D6
breadcrumb.background#F0F8FC
breadcrumb.focusForeground#2B5F8F
breadcrumb.foreground#5A8AB0
breadcrumbPicker.background#FFFFFF
button.background#6BB6D6
button.border#4A96B6
button.foreground#FFFFFF
button.hoverBackground#5AA6C6
button.secondaryBackground#9B86BD
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#8B76AD
checkbox.background#FFFFFF
checkbox.border#C8E4F0
checkbox.foreground#2B5F8F
debugToolBar.background#FFFFFF
debugToolBar.border#C8E4F0
descriptionForeground#5A8AB0
diffEditor.insertedLineBackground#50A07815
diffEditor.insertedTextBackground#50A07820
diffEditor.removedLineBackground#C85F7515
diffEditor.removedTextBackground#C85F7520
dropdown.background#FFFFFF
dropdown.border#C8E4F0
dropdown.foreground#2B5F8F
dropdown.listBackground#FFFFFF
editor.background#F8FCFE
editor.findMatchBackground#B8A4D450
editor.findMatchBorder#9B86BD
editor.findMatchHighlightBackground#6BB6D630
editor.findMatchHighlightBorder#6BB6D660
editor.focusedStackFrameHighlightBackground#50A07830
editor.foreground#2B5F8F
editor.inactiveSelectionBackground#D6EEFA40
editor.lineHighlightBackground#F0F8FC
editor.lineHighlightBorder#E0F0F8
editor.rangeHighlightBackground#E0F0F8
editor.selectionBackground#9B86BD35
editor.selectionHighlightBackground#6BB6D625
editor.stackFrameHighlightBackground#D4A05530
editor.wordHighlightBackground#6BB6D625
editor.wordHighlightBorder#6BB6D650
editor.wordHighlightStrongBackground#9B86BD30
editor.wordHighlightStrongBorder#9B86BD50
editorBracketMatch.background#9B86BD25
editorBracketMatch.border#9B86BD
editorCodeLens.foreground#7A9AB8
editorCursor.foreground#9B86BD
editorGroup.border#C8E4F0
editorGroupHeader.border#D6EEFA
editorGroupHeader.tabsBackground#E0F0F8
editorGroupHeader.tabsBorder#C8E4F0
editorGutter.addedBackground#50A078
editorGutter.background#F8FCFE
editorGutter.deletedBackground#C85F75
editorGutter.modifiedBackground#6BB6D6
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#B8A4D4
editorHoverWidget.foreground#2B5F8F
editorHoverWidget.statusBarBackground#E0F0F8
editorIndentGuide.activeBackground1#9B86BD
editorIndentGuide.background1#D6EEFA
editorLineNumber.activeForeground#6BB6D6
editorLineNumber.foreground#A0C8E0
editorRuler.foreground#D6EEFA
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#C8E4F0
editorSuggestWidget.focusHighlightForeground#9B86BD
editorSuggestWidget.foreground#2B5F8F
editorSuggestWidget.highlightForeground#6BB6D6
editorSuggestWidget.selectedBackground#E0F0F8
editorSuggestWidget.selectedForeground#2B5F8F
editorWidget.background#F0F8FC
editorWidget.border#B8A4D4
editorWidget.foreground#2B5F8F
editorWidget.resizeBorder#9B86BD
errorForeground#C85F75
focusBorder#9B86BD
foreground#2B5F8F
gitDecoration.addedResourceForeground#50A078
gitDecoration.conflictingResourceForeground#D87585
gitDecoration.deletedResourceForeground#C85F75
gitDecoration.ignoredResourceForeground#A0B0C0
gitDecoration.modifiedResourceForeground#6BB6D6
gitDecoration.submoduleResourceForeground#9B86BD
gitDecoration.untrackedResourceForeground#89CFF0
icon.foreground#4A8AB8
input.background#FFFFFF
input.border#C8E4F0
input.foreground#2B5F8F
input.placeholderForeground#7A9AB8
inputOption.activeBackground#6BB6D6
inputOption.activeBorder#4A8AB8
inputOption.activeForeground#FFFFFF
inputValidation.errorBackground#FFF0F2
inputValidation.errorBorder#C85F75
inputValidation.errorForeground#C85F75
inputValidation.infoBackground#F0F8FC
inputValidation.infoBorder#6BB6D6
inputValidation.infoForeground#4A8AB8
inputValidation.warningBackground#FFF8F0
inputValidation.warningBorder#D4A055
inputValidation.warningForeground#D4A055
list.activeSelectionBackground#6BB6D6
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.errorForeground#C85F75
list.focusBackground#D6EEFA
list.focusOutline#9B86BD
list.hoverBackground#EBF5FA
list.inactiveSelectionBackground#E0F0F8
list.inactiveSelectionForeground#2B5F8F
list.warningForeground#D4A055
menu.background#FFFFFF
menu.border#C8E4F0
menu.foreground#2B5F8F
menu.selectionBackground#E0F0F8
menu.selectionForeground#2B5F8F
menu.separatorBackground#D6EEFA
menubar.selectionBackground#E0F0F8
menubar.selectionForeground#2B5F8F
merge.currentContentBackground#6BB6D620
merge.currentHeaderBackground#6BB6D650
merge.incomingContentBackground#9B86BD20
merge.incomingHeaderBackground#9B86BD50
minimap.background#F0F8FC
minimap.errorHighlight#C85F7560
minimap.findMatchHighlight#B8A4D480
minimap.selectionHighlight#9B86BD50
minimap.warningHighlight#D4A05560
minimapGutter.addedBackground#50A078
minimapGutter.deletedBackground#C85F75
minimapGutter.modifiedBackground#6BB6D6
minimapSlider.activeBackground#9B86BD40
minimapSlider.background#9B86BD20
minimapSlider.hoverBackground#9B86BD30
notificationCenter.border#C8E4F0
notificationCenterHeader.background#E0F0F8
notificationCenterHeader.foreground#2B5F8F
notificationLink.foreground#6BB6D6
notifications.background#FFFFFF
notifications.border#C8E4F0
notifications.foreground#2B5F8F
notificationsErrorIcon.foreground#C85F75
notificationsInfoIcon.foreground#6BB6D6
notificationsWarningIcon.foreground#D4A055
panel.background#F0F8FC
panel.border#C8E4F0
panelSection.border#C8E4F0
panelSectionHeader.background#E0F0F8
panelSectionHeader.foreground#2B5F8F
panelTitle.activeBorder#9B86BD
panelTitle.activeForeground#2B5F8F
panelTitle.inactiveForeground#7A9AB8
peekView.border#9B86BD
peekViewEditor.background#F8FCFE
peekViewEditor.matchHighlightBackground#B8A4D440
peekViewEditorGutter.background#EBF5FA
peekViewResult.background#E0F0F8
peekViewResult.fileForeground#2B5F8F
peekViewResult.lineForeground#5A8AB0
peekViewResult.matchHighlightBackground#B8A4D450
peekViewResult.selectionBackground#9B86BD35
peekViewResult.selectionForeground#2B5F8F
peekViewTitle.background#2B5F8F
peekViewTitleDescription.foreground#A0C0D8
peekViewTitleLabel.foreground#FFFFFF
progressBar.background#9B86BD
scrollbar.shadow#00000015
scrollbarSlider.activeBackground#9B86BD80
scrollbarSlider.background#9B86BD40
scrollbarSlider.hoverBackground#9B86BD60
selection.background#9B86BD40
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#C8E4F0
settings.checkboxForeground#2B5F8F
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#C8E4F0
settings.dropdownForeground#2B5F8F
settings.headerForeground#2B5F8F
settings.modifiedItemIndicator#6BB6D6
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#C8E4F0
settings.numberInputForeground#2B5F8F
settings.textInputBackground#FFFFFF
settings.textInputBorder#C8E4F0
settings.textInputForeground#2B5F8F
sideBar.background#F0F8FC
sideBar.border#D6EEFA
sideBar.foreground#2B5F8F
sideBarSectionHeader.background#E0F0F8
sideBarSectionHeader.border#C8E4F0
sideBarSectionHeader.foreground#2B5F8F
sideBarTitle.foreground#4A8AB8
statusBar.background#4A8AB8
statusBar.border#3A7AA8
statusBar.debuggingBackground#9B86BD
statusBar.debuggingBorder#8B76AD
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#5A7B9F
statusBar.noFolderForeground#FFFFFF
tab.activeBackground#F8FCFE
tab.activeBorder#9B86BD
tab.activeBorderTop#9B86BD
tab.activeForeground#2B5F8F
tab.border#D6EEFA
tab.hoverBackground#F8FCFE
tab.hoverBorder#B8A4D4
tab.hoverForeground#4A8AB8
tab.inactiveBackground#EBF5FA
tab.inactiveForeground#5A8AB0
tab.unfocusedActiveBackground#F0F8FC
tab.unfocusedActiveForeground#5A8AB0
tab.unfocusedInactiveBackground#EBF5FA
tab.unfocusedInactiveForeground#7A9AB8
terminal.ansiBlack#2B5F8F
terminal.ansiBlue#4A8AB8
terminal.ansiBrightBlack#5A8AB0
terminal.ansiBrightBlue#5A9AC8
terminal.ansiBrightCyan#89CFF0
terminal.ansiBrightGreen#60B088
terminal.ansiBrightMagenta#B8A4D4
terminal.ansiBrightRed#D87585
terminal.ansiBrightWhite#F0F8FC
terminal.ansiBrightYellow#E4B065
terminal.ansiCyan#6BB6D6
terminal.ansiGreen#50A078
terminal.ansiMagenta#9B86BD
terminal.ansiRed#C85F75
terminal.ansiWhite#E0F0F8
terminal.ansiYellow#D4A055
terminal.background#F8FCFE
terminal.border#D6EEFA
terminal.foreground#2B5F8F
terminal.selectionBackground#9B86BD35
textBlockQuote.background#E0F0F8
textBlockQuote.border#6BB6D6
textCodeBlock.background#EBF5FA
textLink.activeForeground#4A8AB8
textLink.foreground#6BB6D6
textPreformat.foreground#5A8AB0
textSeparator.foreground#C8E4F0
titleBar.activeBackground#2B5F8F
titleBar.activeForeground#FFFFFF
titleBar.border#1E4870
titleBar.inactiveBackground#3A6F9F
titleBar.inactiveForeground#A0C0D8
widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7A9AB8	italic
keyword, keyword.control, keyword.operator.new, keyword.other	#6BB6D6	bold
storage, storage.modifier	#4A8AB8	—
storage.type, support.type, entity.name.type, entity.other.inherited-class	#9B86BD	italic
constant.language, support.constant, variable.language	#B8A4D4	italic
variable, support.variable	#2B5F8F	—
variable.other.property, variable.other.object.property, support.variable.property	#3A6F9F	—
entity.name.function, support.function, meta.function-call	#6BB6D6	bold
entity.name.class, support.class, entity.name.type.class	#9B86BD	bold
entity.name.exception	#C85F75	—
constant.numeric, constant.character.numeric	#89CFF0	—
constant, variable.other.constant	#B8A4D4	—
string, string.quoted	#5A9DB0	—
string.template, punctuation.definition.template-expression	#4A8AB8	—
constant.character.escape	#6BB6D6	—
string.regexp, constant.character.escape.backslash.regexp	#9B86BD	—
keyword.operator, keyword.operator.logical, keyword.operator.comparison	#4A8AB8	—
punctuation, punctuation.separator, punctuation.terminator	#7A9AB8	—
entity.name.tag, meta.tag	#6BB6D6	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#9B86BD	italic
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#6BB6D6	—
meta.property-name, support.type.property-name	#4A8AB8	—
meta.property-value, support.constant.property-value	#9B86BD	—
support.type.property-name.json, string.json support.type.property-name.json	#4A8AB8	—
markup.heading, entity.name.section.markdown	#6BB6D6	bold
markup.bold	#4A8AB8	bold
markup.italic	#5A8AB0	italic
markup.underline.link, string.other.link.title.markdown	#9B86BD	—
markup.inline.raw, markup.fenced_code.block.markdown	#5A9DB0	—
markup.deleted	#C85F75	—
markup.inserted	#50A078	—
markup.changed	#D4A055	—

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}!`;
}