Voyage Mate Color Themes

Name: Voyage Mate Color Themes
Author: Zhengfei Yang

Publisher: Zhengfei YangThemes in package: 2

A soft and cozy VS Code theme collection with mint green, pastel pink, and warm brown tones.

Open in VS Code GitHub

Color themes

VS Code preview

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

Voyage Mate Color Themes — Voyage Mate Dark

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.background#564d4d
activityBar.border#7a7a7a
activityBar.foreground#fff7fb
activityBar.inactiveForeground#d7f0ec
activityBarBadge.background#fad8ed
activityBarBadge.foreground#564d4d
breadcrumb.activeSelectionForeground#fad8ed
breadcrumb.background#564d4d
breadcrumb.focusForeground#fff7fb
breadcrumb.foreground#d7f0ec
button.background#93CCC3
button.foreground#564d4d
button.hoverBackground#d7f0ec
button.secondaryBackground#7a7a7a
button.secondaryForeground#fff7fb
button.secondaryHoverBackground#8a7d7d
chat.avatarBackground#93CCC3
chat.avatarForeground#564d4d
chat.linesAddedForeground#93CCC3
chat.linesRemovedForeground#fad8ed
chat.requestBackground#6a5f5f
chat.requestBorder#93CCC3
chat.requestBubbleBackground#7a7a7a
chat.requestBubbleHoverBackground#8a7d7d
chat.requestCodeBorder#93CCC3
chat.slashCommandBackground#d7f0ec
chat.slashCommandForeground#564d4d
checkbox.background#6a5f5f
checkbox.border#93CCC3
checkbox.foreground#fff7fb
debugIcon.breakpointForeground#fad8ed
debugIcon.continueForeground#93CCC3
debugIcon.disconnectForeground#fad8ed
debugIcon.pauseForeground#d7f0ec
debugIcon.restartForeground#93CCC3
debugIcon.startForeground#93CCC3
debugIcon.stepBackForeground#d7f0ec
debugIcon.stepIntoForeground#d7f0ec
debugIcon.stepOutForeground#d7f0ec
debugIcon.stepOverForeground#d7f0ec
debugIcon.stopForeground#fad8ed
debugToolBar.background#6a5f5f
debugToolBar.border#7a7a7a
descriptionForeground#d7f0ec
diffEditor.insertedLineBackground#d7f0ec44
diffEditor.insertedTextBackground#93CCC388
diffEditor.removedLineBackground#7a7a7a88
diffEditor.removedTextBackground#fad8ed88
disabledForeground#9b8c8c
dropdown.background#6a5f5f
dropdown.border#7a7a7a
dropdown.foreground#fff7fb
editor.background#564d4d
editor.findMatchBackground#8a7d7d
editor.findMatchHighlightBackground#6f6666
editor.findRangeHighlightBackground#655b5b
editor.foreground#fff7fb
editor.hoverHighlightBackground#655b5b
editor.inactiveSelectionBackground#665c5c
editor.lineHighlightBackground#5f5555
editor.lineHighlightBorder#7a7a7a
editor.selectionBackground#7a7a7a
editor.selectionHighlightBackground#665c5c
editor.wordHighlightBackground#655b5b
editor.wordHighlightStrongBackground#6f6666
editorBracketMatch.background#6f8480
editorBracketMatch.border#93CCC3
editorCodeLens.foreground#d7f0ec
editorCursor.foreground#93CCC3
editorError.foreground#fad8ed
editorGutter.addedBackground#93CCC3
editorGutter.background#564d4d
editorGutter.deletedBackground#fad8ed
editorGutter.modifiedBackground#d7f0ec
editorHint.foreground#d7f0ec
editorHoverWidget.background#6a5f5f
editorHoverWidget.border#7a7a7a
editorHoverWidget.foreground#fff7fb
editorIndentGuide.activeBackground1#93CCC3
editorIndentGuide.background1#7a7a7a
editorInfo.foreground#93CCC3
editorLineNumber.activeForeground#d7f0ec
editorLineNumber.foreground#a79a9a
editorLink.activeForeground#93CCC3
editorOverviewRuler.border#564d4d
editorOverviewRuler.errorForeground#fad8ed
editorOverviewRuler.findMatchForeground#8a7d7d
editorOverviewRuler.infoForeground#93CCC3
editorOverviewRuler.warningForeground#fad8ed
editorRuler.foreground#7a7a7a
editorSuggestWidget.background#6a5f5f
editorSuggestWidget.border#7a7a7a
editorSuggestWidget.foreground#fff7fb
editorSuggestWidget.highlightForeground#93CCC3
editorSuggestWidget.selectedBackground#7a7a7a
editorWarning.foreground#fad8ed
editorWhitespace.foreground#7a7a7a
editorWidget.background#6a5f5f
editorWidget.border#7a7a7a
editorWidget.foreground#fff7fb
errorForeground#fad8ed
focusBorder#93CCC3
foreground#fff7fb
gitDecoration.addedResourceForeground#93CCC3
gitDecoration.conflictingResourceForeground#fad8ed
gitDecoration.deletedResourceForeground#fad8ed
gitDecoration.ignoredResourceForeground#9b8c8c
gitDecoration.modifiedResourceForeground#d7f0ec
gitDecoration.renamedResourceForeground#93CCC3
gitDecoration.stageDeletedResourceForeground#fad8ed
gitDecoration.stageModifiedResourceForeground#d7f0ec
gitDecoration.untrackedResourceForeground#93CCC3
icon.foreground#d7f0ec
input.background#6a5f5f
input.border#7a7a7a
input.foreground#fff7fb
input.placeholderForeground#d2c0c8
inputOption.activeBackground#6f8480
inputOption.activeBorder#93CCC3
inputValidation.errorBackground#7a5f69
inputValidation.errorBorder#fad8ed
inputValidation.infoBackground#5f7470
inputValidation.infoBorder#93CCC3
inputValidation.warningBackground#766b5d
inputValidation.warningBorder#fad8ed
list.activeSelectionBackground#7a7a7a
list.activeSelectionForeground#fff7fb
list.dropBackground#7a7a7a
list.errorForeground#fad8ed
list.focusBackground#6a5f5f
list.focusForeground#fff7fb
list.highlightForeground#93CCC3
list.hoverBackground#655b5b
list.hoverForeground#fff7fb
list.inactiveSelectionBackground#665c5c
list.inactiveSelectionForeground#d7f0ec
list.warningForeground#fad8ed
menu.background#6a5f5f
menu.foreground#fff7fb
menu.selectionBackground#7a7a7a
menu.selectionForeground#fff7fb
menu.separatorBackground#7a7a7a
menubar.selectionBackground#655b5b
menubar.selectionForeground#fff7fb
notificationCenter.border#7a7a7a
notificationCenterHeader.background#6a5f5f
notificationCenterHeader.foreground#fff7fb
notifications.background#6a5f5f
notifications.border#7a7a7a
notifications.foreground#fff7fb
notificationsErrorIcon.foreground#fad8ed
notificationsInfoIcon.foreground#93CCC3
notificationsWarningIcon.foreground#fad8ed
panel.background#564d4d
panel.border#7a7a7a
panelTitle.activeBorder#93CCC3
panelTitle.activeForeground#fff7fb
panelTitle.inactiveForeground#d7f0ec
peekView.border#93CCC3
peekViewEditor.background#564d4d
peekViewEditor.matchHighlightBackground#7a7a7a
peekViewResult.background#6a5f5f
peekViewResult.fileForeground#fff7fb
peekViewResult.lineForeground#d7f0ec
peekViewResult.matchHighlightBackground#7a7a7a
peekViewResult.selectionBackground#7a7a7a
peekViewResult.selectionForeground#fff7fb
peekViewTitle.background#6a5f5f
peekViewTitleDescription.foreground#d7f0ec
peekViewTitleLabel.foreground#fff7fb
sash.hoverBorder#93CCC3
sideBar.background#373434
sideBar.border#7a7a7a
sideBar.foreground#fff7fb
sideBarSectionHeader.background#6a5f5f
sideBarSectionHeader.border#7a7a7a
sideBarSectionHeader.foreground#d7f0ec
sideBarTitle.foreground#fff7fb
statusBar.background#7a7a7a
statusBar.border#564d4d
statusBar.debuggingBackground#7a7a7a
statusBar.debuggingForeground#fad8ed
statusBar.foreground#fff7fb
statusBar.noFolderBackground#564d4d
statusBar.noFolderForeground#fff7fb
statusBarItem.hoverBackground#8a7d7d
statusBarItem.remoteBackground#93CCC3
statusBarItem.remoteForeground#564d4d
tab.activeBackground#564d4d
tab.activeBorderTop#93CCC3
tab.activeForeground#fff7fb
tab.border#7a7a7a
tab.hoverBackground#655b5b
tab.inactiveBackground#6a5f5f
tab.inactiveForeground#d7f0ec
tab.unfocusedActiveForeground#fff7fb
tab.unfocusedInactiveForeground#cfc0c8
terminal.ansiBlack#564d4d
terminal.ansiBlue#d7f0ec
terminal.ansiBrightBlack#7a7a7a
terminal.ansiBrightBlue#d7f0ec
terminal.ansiBrightCyan#93CCC3
terminal.ansiBrightGreen#d7f0ec
terminal.ansiBrightMagenta#fad8ed
terminal.ansiBrightRed#fad8ed
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#fff7fb
terminal.ansiCyan#93CCC3
terminal.ansiGreen#93CCC3
terminal.ansiMagenta#fad8ed
terminal.ansiRed#fad8ed
terminal.ansiWhite#fff7fb
terminal.ansiYellow#d7f0ec
terminal.background#564d4d
terminal.foreground#fff7fb
terminalCursor.background#564d4d
terminalCursor.foreground#93CCC3
textBlockQuote.background#6a5f5f
textBlockQuote.border#93CCC3
textCodeBlock.background#6a5f5f
textLink.activeForeground#d7f0ec
textLink.foreground#93CCC3
textPreformat.foreground#fff7fb
textSeparator.foreground#7a7a7a
titleBar.activeBackground#564d4d
titleBar.activeForeground#fff7fb
titleBar.border#7a7a7a
titleBar.inactiveBackground#7a7a7a
titleBar.inactiveForeground#d7f0ec
window.activeBorder#93CCC3
window.inactiveBorder#7a7a7a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#d7f0ec	italic
string, constant.other.symbol	#93CCC3	—
constant.numeric, constant.language, constant.character, variable.other.constant	#fad8ed	—
keyword, storage.type, storage.modifier	#fad8ed	—
keyword.operator, punctuation.separator, punctuation.terminator	#fff7fb	—
entity.name.function, support.function, meta.function-call	#d7f0ec	—
entity.name.type, entity.name.class, support.type, support.class	#93CCC3	—
variable, meta.definition.variable.name	#fff7fb	—
variable.parameter, meta.function.parameters	#fad8ed	—
variable.other.property, support.variable.property, meta.property-name	#d7f0ec	—
entity.name.tag, punctuation.definition.tag	#fad8ed	—
entity.other.attribute-name	#93CCC3	—
invalid, invalid.illegal	#564d4d	—
markup.heading, entity.name.section	#93CCC3	bold
markup.bold	#fff7fb	bold
markup.italic	#fff7fb	italic
markup.underline.link	#93CCC3	—
markup.inserted	#93CCC3	—
markup.deleted	#fad8ed	—
markup.changed	#d7f0ec	—
support.type.property-name.json, support.type.property-name.json.comments	#d7f0ec	—
string.quoted.double.json, string.quoted.double.json.comments	#93CCC3	—
constant.numeric.json, constant.language.json	#fad8ed	—