Vaporwave Watermelon Theme

Name: Vaporwave Watermelon Theme
Author: AnhhTuann

Publisher: AnhhTuannThemes in package: 1

A chill pastel Vaporwave Watermelon theme (Pink & Green) for VS Code and Oh My Posh.

Open in VS Code GitHub

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Vaporwave Watermelon Theme — Vaporwave Watermelon Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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#222033
activityBar.activeBorder#FF8DA1
activityBar.activeFocusBorder#FF8DA1
activityBar.background#161420
activityBar.border#161420
activityBar.foreground#FF8DA1
activityBar.inactiveForeground#565075
activityBarBadge.background#FFA8C5
activityBarBadge.foreground#161420
badge.background#FFA8C5
badge.foreground#161420
breadcrumb.activeSelectionForeground#FF8DA1
breadcrumb.focusForeground#B0A9C2
breadcrumb.foreground#565075
breadcrumbPicker.background#1B1928
button.background#FFA8C5
button.foreground#FFFFFF
button.hoverBackground#7A9DC6
charts.blue#FFA8C5
charts.green#82E0AA
charts.orange#F9E79F
charts.purple#FF8DA1
charts.red#FF6B6B
charts.yellow#A8E6CF
chat.requestBackground#1B1928
chat.slashCommandForeground#FF8DA1
commandCenter.activeBackground#2A283D
commandCenter.activeBorder#FF8DA1
commandCenter.background#1B1928
commandCenter.border#2E2B42
commandCenter.foreground#E2E0E7
debugConsole.errorForeground#FF6B6B
debugConsole.infoForeground#FFA8C5
debugConsole.sourceForeground#848BBD
debugConsole.warningForeground#A8E6CF
debugIcon.breakpointDisabledForeground#565075
debugIcon.breakpointForeground#FF6B6B
debugIcon.breakpointStackframeForeground#82E0AA
debugIcon.breakpointUnverifiedForeground#A8E6CF
debugIcon.continueForeground#82E0AA
debugIcon.pauseForeground#A8E6CF
debugIcon.restartForeground#848BBD
debugIcon.startForeground#82E0AA
debugIcon.stepBackForeground#FF8DA1
debugIcon.stepIntoForeground#FFA8C5
debugIcon.stepOutForeground#FFA8C5
debugIcon.stepOverForeground#FFA8C5
debugIcon.stopForeground#FF6B6B
debugTokenExpression.boolean#F9E79F
debugTokenExpression.error#FF6B6B
debugTokenExpression.name#FF8DA1
debugTokenExpression.number#F9E79F
debugTokenExpression.string#82E0AA
debugTokenExpression.value#82E0AA
debugToolBar.background#161420
debugToolBar.border#2E2B42
diffEditor.diagonalFill#2E2B42
diffEditor.insertedLineBackground#82E0AA10
diffEditor.insertedTextBackground#82E0AA25
diffEditor.removedLineBackground#FF6B6B10
diffEditor.removedTextBackground#FF6B6B25
editor.background#222033
editor.findMatchBackground#A8E6CF40
editor.findMatchBorder#A8E6CF
editor.findMatchHighlightBackground#A8E6CF20
editor.findRangeHighlightBackground#FFA8C515
editor.foreground#E2E0E7
editor.inactiveSelectionBackground#FFA8C520
editor.lineHighlightBackground#2A283D
editor.selectionBackground#FFA8C550
editor.wordHighlightBackground#FFA8C520
editor.wordHighlightBorder#FFA8C550
editor.wordHighlightStrongBackground#FF8DA125
editor.wordHighlightStrongBorder#FF8DA160
editor.wordHighlightTextBackground#A8E6CF20
editorBracketHighlight.foreground1#FF8DA1
editorBracketHighlight.foreground2#82E0AA
editorBracketHighlight.foreground3#FFA8C5
editorBracketHighlight.foreground4#A8E6CF
editorBracketHighlight.foreground5#D7BDE2
editorBracketHighlight.foreground6#F9E79F
editorBracketMatch.background#FF8DA130
editorBracketMatch.border#FF8DA1
editorCursor.foreground#A8E6CF
editorError.background#FF6B6B15
editorError.foreground#FF6B6B
editorGroup.border#2E2B42
editorGroupHeader.tabsBackground#161420
editorGroupHeader.tabsBorder#161420
editorGutter.addedBackground#82E0AA
editorGutter.deletedBackground#FF6B6B
editorGutter.foldingControlForeground#FF8DA1
editorGutter.modifiedBackground#A8E6CF
editorHint.foreground#848BBD
editorHoverWidget.background#1B1928
editorHoverWidget.border#2E2B42
editorHoverWidget.foreground#E2E0E7
editorIndentGuide.activeBackground1#FFA8C5
editorIndentGuide.background1#3C3854
editorInfo.background#FFA8C515
editorInfo.foreground#FFA8C5
editorLightBulb.foreground#A8E6CF
editorLightBulbAutoFix.foreground#82E0AA
editorLineNumber.activeForeground#FF8DA1
editorLineNumber.foreground#565075
editorOverviewRuler.addedForeground#82E0AA
editorOverviewRuler.bracketMatchForeground#FF8DA1
editorOverviewRuler.deletedForeground#FF6B6B
editorOverviewRuler.errorForeground#FF6B6B
editorOverviewRuler.findMatchForeground#A8E6CF80
editorOverviewRuler.infoForeground#FFA8C5
editorOverviewRuler.modifiedForeground#A8E6CF
editorOverviewRuler.selectionHighlightForeground#FFA8C540
editorOverviewRuler.warningForeground#A8E6CF
editorOverviewRuler.wordHighlightForeground#FFA8C560
editorOverviewRuler.wordHighlightStrongForeground#FF8DA160
editorOverviewRuler.wordHighlightTextForeground#A8E6CF60
editorSuggestWidget.background#1B1928
editorSuggestWidget.border#2E2B42
editorSuggestWidget.foreground#E2E0E7
editorSuggestWidget.highlightForeground#A8E6CF
editorSuggestWidget.selectedBackground#2A283D
editorWarning.background#A8E6CF15
editorWarning.foreground#A8E6CF
editorWhitespace.foreground#34314A
editorWidget.background#1B1928
editorWidget.border#2E2B42
editorWidget.foreground#E2E0E7
editorWidget.resizeBorder#FF8DA1
extensionBadge.remoteBackground#FF8DA1
extensionBadge.remoteForeground#161420
extensionButton.prominentBackground#FFA8C5
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#7A9DC6
focusBorder#FFA8C5
gitDecoration.conflictingResourceForeground#F9E79F
gitDecoration.deletedResourceForeground#FF6B6B
gitDecoration.ignoredResourceForeground#565075
gitDecoration.modifiedResourceForeground#A8E6CF
gitDecoration.untrackedResourceForeground#82E0AA
inlineChat.background#1B1928
inlineChat.border#FF8DA1
inlineChatDiff.inserted#82E0AA20
inlineChatDiff.removed#FF6B6B20
input.background#161420
input.border#2E2B42
input.foreground#E2E0E7
inputOption.activeBorder#FF8DA1
keybindingLabel.background#222033
keybindingLabel.border#2E2B42
keybindingLabel.bottomBorder#FF8DA1
keybindingLabel.foreground#E2E0E7
list.activeSelectionBackground#2A283D
list.activeSelectionForeground#FF8DA1
list.highlightForeground#A8E6CF
list.hoverBackground#2E2B42
list.inactiveSelectionBackground#2A283D
menu.background#1B1928
menu.foreground#E2E0E7
menu.selectionBackground#2A283D
menu.selectionForeground#E2E0E7
menu.separatorBackground#2E2B42
menubar.selectionBackground#2A283D
menubar.selectionForeground#E2E0E7
minimap.errorHighlight#FF6B6B
minimap.findMatchHighlight#A8E6CF80
minimap.selectionHighlight#FFA8C550
minimap.warningHighlight#A8E6CF
minimapGutter.addedBackground#82E0AA
minimapGutter.deletedBackground#FF6B6B
minimapGutter.modifiedBackground#A8E6CF
notebook.cellBorderColor#2E2B42
notebook.cellHoverBackground#1B1928
notebook.cellToolbarSeparator#2E2B42
notebook.editorBackground#161420
notebook.focusedCellBorder#FF8DA1
notificationCenterHeader.background#161420
notificationCenterHeader.foreground#FF8DA1
notificationLink.foreground#FFA8C5
notifications.background#1B1928
notifications.border#2E2B42
notifications.foreground#E2E0E7
notificationToast.border#2E2B42
panel.background#222033
panel.border#2E2B42
panelTitle.activeBorder#FF8DA1
panelTitle.activeForeground#FF8DA1
panelTitle.inactiveForeground#6C658C
peekView.border#FF8DA1
peekViewEditor.background#1B1928
peekViewEditor.matchHighlightBackground#A8E6CF30
peekViewResult.background#161420
peekViewResult.matchHighlightBackground#A8E6CF30
peekViewResult.selectionBackground#2A283D
peekViewResult.selectionForeground#E2E0E7
peekViewTitle.background#222033
peekViewTitleDescription.foreground#FF8DA1
peekViewTitleLabel.foreground#E2E0E7
ports.iconRunningProcessForeground#82E0AA
problemsErrorIcon.foreground#FF6B6B
problemsInfoIcon.foreground#FFA8C5
problemsWarningIcon.foreground#A8E6CF
quickInput.background#1B1928
quickInput.foreground#E2E0E7
quickInputList.focusBackground#2A283D
quickInputTitle.background#222033
sash.hoverBorder#FF8DA1
scrollbarSlider.activeBackground#56507580
scrollbarSlider.background#56507540
scrollbarSlider.hoverBackground#56507560
searchEditor.findMatchBackground#A8E6CF25
searchEditor.findMatchBorder#A8E6CF60
settings.checkboxBackground#1B1928
settings.checkboxBorder#2E2B42
settings.checkboxForeground#E2E0E7
settings.dropdownBackground#1B1928
settings.dropdownBorder#2E2B42
settings.dropdownForeground#E2E0E7
settings.headerForeground#FF8DA1
settings.modifiedItemIndicator#A8E6CF
settings.numberInputBackground#161420
settings.numberInputForeground#E2E0E7
settings.textInputBackground#161420
settings.textInputBorder#2E2B42
settings.textInputForeground#E2E0E7
sideBar.background#1B1928
sideBar.border#2E2B42
sideBar.foreground#B0A9C2
sideBarSectionHeader.background#222033
sideBarSectionHeader.foreground#FF8DA1
sideBarTitle.foreground#FF8DA1
statusBar.background#161420
statusBar.border#161420
statusBar.debuggingBackground#F9E79F
statusBar.debuggingForeground#161420
statusBar.foreground#B0A9C2
statusBar.noFolderBackground#161420
statusBarItem.errorBackground#FF6B6B
statusBarItem.errorForeground#E2E0E7
statusBarItem.remoteBackground#FF8DA1
statusBarItem.remoteForeground#161420
statusBarItem.warningBackground#A8E6CF
statusBarItem.warningForeground#161420
symbolIcon.arrayForeground#F9E79F
symbolIcon.booleanForeground#F9E79F
symbolIcon.classForeground#D7BDE2
symbolIcon.colorForeground#D7BDE2
symbolIcon.constantForeground#F9E79F
symbolIcon.constructorForeground#FFA8C5
symbolIcon.enumeratorForeground#D7BDE2
symbolIcon.enumeratorMemberForeground#F9E79F
symbolIcon.eventForeground#A8E6CF
symbolIcon.fieldForeground#82E0AA
symbolIcon.fileForeground#FF8DA1
symbolIcon.folderForeground#A8E6CF
symbolIcon.functionForeground#FFA8C5
symbolIcon.interfaceForeground#D7BDE2
symbolIcon.keyForeground#82E0AA
symbolIcon.keywordForeground#FF8DA1
symbolIcon.methodForeground#FFA8C5
symbolIcon.moduleForeground#D7BDE2
symbolIcon.namespaceForeground#D7BDE2
symbolIcon.nullForeground#F9E79F
symbolIcon.numberForeground#F9E79F
symbolIcon.objectForeground#A8E6CF
symbolIcon.operatorForeground#FF8DA1
symbolIcon.packageForeground#FF8DA1
symbolIcon.propertyForeground#82E0AA
symbolIcon.referenceForeground#848BBD
symbolIcon.snippetForeground#82E0AA
symbolIcon.stringForeground#82E0AA
symbolIcon.structForeground#D7BDE2
symbolIcon.textForeground#E2E0E7
symbolIcon.typeParameterForeground#D7BDE2
symbolIcon.unitForeground#F9E79F
symbolIcon.variableForeground#A8E6CF
tab.activeBackground#222033
tab.activeBorderTop#FF8DA1
tab.activeForeground#FF8DA1
tab.border#2E2B42
tab.hoverBackground#1B1928
tab.inactiveBackground#161420
tab.inactiveForeground#6C658C
terminal.ansiBlack#161420
terminal.ansiBlue#FFA8C5
terminal.ansiBrightBlack#565075
terminal.ansiBrightBlue#7A9DC6
terminal.ansiBrightCyan#78B4B5
terminal.ansiBrightGreen#92C492
terminal.ansiBrightMagenta#B3A7CF
terminal.ansiBrightRed#D7BDE2
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E5B667
terminal.ansiCyan#848BBD
terminal.ansiGreen#82E0AA
terminal.ansiMagenta#FF8DA1
terminal.ansiRed#FF6B6B
terminal.ansiWhite#E2E0E7
terminal.ansiYellow#A8E6CF
terminal.background#222033
terminal.foreground#E2E0E7
terminal.selectionBackground#FFA8C540
terminal.tab.activeBorder#FF8DA1
terminalCommandDecoration.defaultBackground#565075
terminalCommandDecoration.errorBackground#FF6B6B
terminalCommandDecoration.successBackground#82E0AA
terminalCursor.foreground#A8E6CF
testing.iconErrored#FF6B6B
testing.iconFailed#FF6B6B
testing.iconPassed#82E0AA
testing.iconQueued#A8E6CF
testing.iconSkipped#565075
testing.iconUnset#848BBD
testing.message.error.lineBackground#FF6B6B20
testing.message.info.decorationForeground#FFA8C5
testing.runAction#82E0AA
textBlockQuote.background#1B1928
textBlockQuote.border#FF8DA1
textLink.activeForeground#7A9DC6
textLink.foreground#FFA8C5
textPreformat.foreground#82E0AA
textSeparator.foreground#565075
titleBar.activeBackground#161420
titleBar.activeForeground#E2E0E7
titleBar.border#161420
titleBar.inactiveBackground#161420
walkThrough.embeddedEditorBackground#1B1928
walkthrough.stepTitle.foreground#FF8DA1
welcomePage.background#161420
welcomePage.tileBackground#1B1928
welcomePage.tileBorder#2E2B42
welcomePage.tileHoverBackground#222033
widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment	#848BBD	italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.word, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage, punctuation.definition.keyword, entity.name.tag	#FF8DA1	italic
entity.name.function, support.function, meta.function-call, variable.function, entity.name.method, support.method, meta.method-call, support.function.builtin	#FFA8C5	bold
string, string.quoted, string.template, string.unquoted, punctuation.definition.string, string.regexp, constant.character.escape	#82E0AA	—
variable, variable.other, variable.parameter, support.variable, variable.language, meta.variable, variable.other.readwrite, entity.other.attribute-name	#A8E6CF	—
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class, entity.name.namespace, entity.name.module, support.module, meta.type, meta.class, entity.name.interface, entity.name.enum, entity.name.struct, entity.name.union, support.type.primitive	#D7BDE2	—
constant.numeric, constant.language.boolean, constant.language.null, constant.language, constant.other, constant.character, keyword.other.unit, support.constant	#F9E79F	—
invalid, invalid.illegal, invalid.deprecated, message.error, string.regexp.error	#FF6B6B	bold underline
keyword.operator, punctuation, meta.brace, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.map, punctuation.definition.binding-pattern, punctuation.section, punctuation.terminator, punctuation.separator	#FF8DA1CC	—
support.type.property-name.json, entity.name.tag.yaml, meta.object-literal.key, variable.other.property, variable.other.object.property, meta.property-name	#82E0AA	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#82E0AA	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.scss	#D7BDE2	—
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.jsx, entity.name.tag.tsx	#FF8DA1	—
entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#A8E6CF	—
markup.heading, entity.name.section	#FF8DA1	bold
markup.inline.raw, markup.raw.block	#82E0AA	—
support.class.component, support.class.component.js, support.class.component.jsx, support.class.component.ts, support.class.component.tsx, entity.name.tag.jsx, entity.name.tag.tsx	#D7BDE2	bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, meta.tag.attributes.jsx, meta.tag.attributes.tsx	#A8E6CF	italic
support.function.react, support.function.builtin.react	#FFA8C5	bold italic
variable.other.env	#A8E6CF	bold
keyword.control.flow, keyword.control.trycatch, storage.modifier.async	#D7BDE2	bold italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, storage.type.module	#FF8DA1	bold italic
variable.language.this, variable.language.super, variable.language.self, keyword.other.this	#D7BDE2	bold italic
string.template, punctuation.definition.template-expression, punctuation.section.embedded	#82E0AA	—
variable.css, variable.scss, variable.other.less, support.type.custom-property.css, variable.argument.css	#A8E6CF	italic
string.other.link.title.markdown, string.other.link.description.markdown, markup.underline.link.markdown, markup.underline.link.image.markdown	#848BBD	underline
variable.other.readwrite.alias, meta.import variable.other.readwrite, meta.export variable.other.readwrite, meta.variable.declaration.js variable.other.readwrite	#FF6B6B	bold italic
string.regexp, constant.character.escape.regexp, support.other.match.regexp, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp	#D7BDE2	—
keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp	#A8E6CF	bold
markup.bold.markdown, markup.italic.markdown, markup.heading.markdown, entity.name.section.markdown	#FF8DA1	bold
markup.quote.markdown, markup.list.unnumbered.markdown, markup.list.numbered.markdown, markup.inline.raw.markdown	#82E0AA	—
markup.inserted.diff, markup.deleted.diff, meta.diff.header	#FFA8C5	—