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 (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.activeBackground#1A2F3F
activityBar.activeBorder#C4B5FD
activityBar.background#0A1520
activityBar.border#1A2F3F
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#5A8AB0
activityBarBadge.background#A78BFA
activityBarBadge.foreground#FFFFFF
badge.background#A78BFA
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#89CFF0
breadcrumb.background#0A1520
breadcrumb.focusForeground#A0C8E0
breadcrumb.foreground#5A8AB0
breadcrumbPicker.background#1A2F3F
button.background#6BB6D6
button.border#4A96B6
button.foreground#FFFFFF
button.hoverBackground#89CFF0
button.secondaryBackground#A78BFA
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#C4B5FD
checkbox.background#1A2F3F
checkbox.border#23394A
checkbox.foreground#D4EBFA
debugToolBar.background#1A2F3F
debugToolBar.border#23394A
descriptionForeground#7A9AB8
diffEditor.insertedLineBackground#60B08818
diffEditor.insertedTextBackground#60B08825
diffEditor.removedLineBackground#E8889918
diffEditor.removedTextBackground#E8889925
dropdown.background#1A2F3F
dropdown.border#23394A
dropdown.foreground#D4EBFA
dropdown.listBackground#1A2F3F
editor.background#0D1B28
editor.findMatchBackground#C4B5FD50
editor.findMatchBorder#A78BFA
editor.findMatchHighlightBackground#6BB6D635
editor.findMatchHighlightBorder#6BB6D670
editor.focusedStackFrameHighlightBackground#60B08835
editor.foreground#D4EBFA
editor.inactiveSelectionBackground#6BB6D625
editor.lineHighlightBackground#1A2F3F
editor.lineHighlightBorder#23394A
editor.rangeHighlightBackground#1A2F3F
editor.selectionBackground#A78BFA40
editor.selectionHighlightBackground#6BB6D628
editor.stackFrameHighlightBackground#F0C07035
editor.wordHighlightBackground#6BB6D630
editor.wordHighlightBorder#6BB6D660
editor.wordHighlightStrongBackground#A78BFA35
editor.wordHighlightStrongBorder#A78BFA60
editorBracketMatch.background#A78BFA30
editorBracketMatch.border#A78BFA
editorCodeLens.foreground#5A8AB0
editorCursor.foreground#C4B5FD
editorGroup.border#23394A
editorGroupHeader.border#1A2F3F
editorGroupHeader.tabsBackground#0A1520
editorGroupHeader.tabsBorder#1A2F3F
editorGutter.addedBackground#60B088
editorGutter.background#0D1B28
editorGutter.deletedBackground#E88899
editorGutter.modifiedBackground#6BB6D6
editorHoverWidget.background#1A2F3F
editorHoverWidget.border#A78BFA
editorHoverWidget.foreground#D4EBFA
editorHoverWidget.statusBarBackground#23394A
editorIndentGuide.activeBackground1#A78BFA
editorIndentGuide.background1#23394A
editorLineNumber.activeForeground#6BB6D6
editorLineNumber.foreground#3A5F7F
editorRuler.foreground#23394A
editorSuggestWidget.background#1A2F3F
editorSuggestWidget.border#A78BFA
editorSuggestWidget.focusHighlightForeground#C4B5FD
editorSuggestWidget.foreground#D4EBFA
editorSuggestWidget.highlightForeground#89CFF0
editorSuggestWidget.selectedBackground#23394A
editorSuggestWidget.selectedForeground#FFFFFF
editorWidget.background#1A2F3F
editorWidget.border#A78BFA
editorWidget.foreground#D4EBFA
editorWidget.resizeBorder#C4B5FD
errorForeground#E88899
focusBorder#A78BFA
foreground#D4EBFA
gitDecoration.addedResourceForeground#60B088
gitDecoration.conflictingResourceForeground#F8A0AA
gitDecoration.deletedResourceForeground#E88899
gitDecoration.ignoredResourceForeground#4A6070
gitDecoration.modifiedResourceForeground#89CFF0
gitDecoration.submoduleResourceForeground#A78BFA
gitDecoration.untrackedResourceForeground#A0E0FF
icon.foreground#89CFF0
input.background#1A2F3F
input.border#23394A
input.foreground#D4EBFA
input.placeholderForeground#5A8AB0
inputOption.activeBackground#6BB6D6
inputOption.activeBorder#89CFF0
inputOption.activeForeground#0D1B28
inputValidation.errorBackground#2B1820
inputValidation.errorBorder#E88899
inputValidation.errorForeground#E88899
inputValidation.infoBackground#1A2F3F
inputValidation.infoBorder#6BB6D6
inputValidation.infoForeground#89CFF0
inputValidation.warningBackground#2B2318
inputValidation.warningBorder#F0C070
inputValidation.warningForeground#F0C070
list.activeSelectionBackground#6BB6D6
list.activeSelectionForeground#0D1B28
list.activeSelectionIconForeground#FFFFFF
list.errorForeground#E88899
list.focusBackground#23394A
list.focusOutline#A78BFA
list.hoverBackground#1A2F3F
list.inactiveSelectionBackground#1E3344
list.inactiveSelectionForeground#A0C8E0
list.warningForeground#F0C070
menu.background#1A2F3F
menu.border#23394A
menu.foreground#D4EBFA
menu.selectionBackground#23394A
menu.selectionForeground#FFFFFF
menu.separatorBackground#2A4050
menubar.selectionBackground#23394A
menubar.selectionForeground#FFFFFF
merge.currentContentBackground#6BB6D625
merge.currentHeaderBackground#6BB6D650
merge.incomingContentBackground#A78BFA25
merge.incomingHeaderBackground#A78BFA50
minimap.background#0A1520
minimap.errorHighlight#E8889970
minimap.findMatchHighlight#C4B5FD70
minimap.selectionHighlight#A78BFA50
minimap.warningHighlight#F0C07070
minimapGutter.addedBackground#60B088
minimapGutter.deletedBackground#E88899
minimapGutter.modifiedBackground#6BB6D6
minimapSlider.activeBackground#A78BFA45
minimapSlider.background#A78BFA25
minimapSlider.hoverBackground#A78BFA35
notificationCenter.border#23394A
notificationCenterHeader.background#1A2F3F
notificationCenterHeader.foreground#D4EBFA
notificationLink.foreground#89CFF0
notifications.background#1A2F3F
notifications.border#23394A
notifications.foreground#D4EBFA
notificationsErrorIcon.foreground#E88899
notificationsInfoIcon.foreground#89CFF0
notificationsWarningIcon.foreground#F0C070
panel.background#0A1520
panel.border#23394A
panelSection.border#23394A
panelSectionHeader.background#1A2F3F
panelSectionHeader.foreground#D4EBFA
panelTitle.activeBorder#A78BFA
panelTitle.activeForeground#D4EBFA
panelTitle.inactiveForeground#5A8AB0
peekView.border#A78BFA
peekViewEditor.background#0D1B28
peekViewEditor.matchHighlightBackground#C4B5FD45
peekViewEditorGutter.background#1A2F3F
peekViewResult.background#1A2F3F
peekViewResult.fileForeground#D4EBFA
peekViewResult.lineForeground#A0C8E0
peekViewResult.matchHighlightBackground#C4B5FD50
peekViewResult.selectionBackground#A78BFA40
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#2B5F8F
peekViewTitleDescription.foreground#A0C8E0
peekViewTitleLabel.foreground#FFFFFF
progressBar.background#A78BFA
scrollbar.shadow#00000030
scrollbarSlider.activeBackground#A78BFA80
scrollbarSlider.background#A78BFA40
scrollbarSlider.hoverBackground#A78BFA60
selection.background#A78BFA50
settings.checkboxBackground#1A2F3F
settings.checkboxBorder#23394A
settings.checkboxForeground#D4EBFA
settings.dropdownBackground#1A2F3F
settings.dropdownBorder#23394A
settings.dropdownForeground#D4EBFA
settings.headerForeground#D4EBFA
settings.modifiedItemIndicator#6BB6D6
settings.numberInputBackground#1A2F3F
settings.numberInputBorder#23394A
settings.numberInputForeground#D4EBFA
settings.textInputBackground#1A2F3F
settings.textInputBorder#23394A
settings.textInputForeground#D4EBFA
sideBar.background#0A1520
sideBar.border#1A2F3F
sideBar.foreground#A0C8E0
sideBarSectionHeader.background#1A2F3F
sideBarSectionHeader.border#23394A
sideBarSectionHeader.foreground#D4EBFA
sideBarTitle.foreground#89CFF0
statusBar.background#2B5F8F
statusBar.border#1E4870
statusBar.debuggingBackground#A78BFA
statusBar.debuggingBorder#9270E0
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#1A2F3F
statusBar.noFolderForeground#A0C8E0
tab.activeBackground#0D1B28
tab.activeBorder#A78BFA
tab.activeBorderTop#A78BFA
tab.activeForeground#89CFF0
tab.border#1A2F3F
tab.hoverBackground#1A2F3F
tab.hoverBorder#C4B5FD
tab.hoverForeground#89CFF0
tab.inactiveBackground#0A1520
tab.inactiveForeground#5A8AB0
tab.unfocusedActiveBackground#0A1520
tab.unfocusedActiveForeground#6BB6D6
tab.unfocusedInactiveBackground#0A1520
tab.unfocusedInactiveForeground#4A7A9F
terminal.ansiBlack#1A2F3F
terminal.ansiBlue#6BB6D6
terminal.ansiBrightBlack#4A7A9F
terminal.ansiBrightBlue#89CFF0
terminal.ansiBrightCyan#A0E0FF
terminal.ansiBrightGreen#70C098
terminal.ansiBrightMagenta#C4B5FD
terminal.ansiBrightRed#F8A0AA
terminal.ansiBrightWhite#F0F8FC
terminal.ansiBrightYellow#FFD085
terminal.ansiCyan#89CFF0
terminal.ansiGreen#60B088
terminal.ansiMagenta#A78BFA
terminal.ansiRed#E88899
terminal.ansiWhite#D4EBFA
terminal.ansiYellow#F0C070
terminal.background#0D1B28
terminal.border#1A2F3F
terminal.foreground#D4EBFA
terminal.selectionBackground#A78BFA40
textBlockQuote.background#1A2F3F
textBlockQuote.border#6BB6D6
textCodeBlock.background#1A2F3F
textLink.activeForeground#A0E0FF
textLink.foreground#89CFF0
textPreformat.foreground#A0C8E0
textSeparator.foreground#23394A
titleBar.activeBackground#0A1520
titleBar.activeForeground#D4EBFA
titleBar.border#1A2F3F
titleBar.inactiveBackground#0D1B28
titleBar.inactiveForeground#5A8AB0
widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5A7A90	italic
keyword, keyword.control, keyword.operator.new, keyword.other	#89CFF0	bold
storage, storage.modifier	#6BB6D6	—
storage.type, support.type, entity.name.type, entity.other.inherited-class	#A78BFA	italic
constant.language, support.constant, variable.language	#C4B5FD	italic
variable, support.variable	#D4EBFA	—
variable.other.property, variable.other.object.property, support.variable.property	#A0C8E0	—
entity.name.function, support.function, meta.function-call	#89CFF0	bold
entity.name.class, support.class, entity.name.type.class	#A78BFA	bold
entity.name.exception	#E88899	—
constant.numeric, constant.character.numeric	#A0E0FF	—
constant, variable.other.constant	#C4B5FD	—
string, string.quoted	#7AB8C8	—
string.template, punctuation.definition.template-expression	#6BB6D6	—
constant.character.escape	#89CFF0	—
string.regexp, constant.character.escape.backslash.regexp	#C4B5FD	—
keyword.operator, keyword.operator.logical, keyword.operator.comparison	#89CFF0	—
punctuation, punctuation.separator, punctuation.terminator	#7A9AB8	—
entity.name.tag, meta.tag	#89CFF0	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#A78BFA	italic
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#89CFF0	—
meta.property-name, support.type.property-name	#6BB6D6	—
meta.property-value, support.constant.property-value	#C4B5FD	—
support.type.property-name.json, string.json support.type.property-name.json	#6BB6D6	—
markup.heading, entity.name.section.markdown	#89CFF0	bold
markup.bold	#6BB6D6	bold
markup.italic	#A0C8E0	italic
markup.underline.link, string.other.link.title.markdown	#A78BFA	—
markup.inline.raw, markup.fenced_code.block.markdown	#7AB8C8	—
markup.deleted	#E88899	—
markup.inserted	#60B088	—
markup.changed	#F0C070	—

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