Peachy Themes

Name: Peachy Themes
Author: VoxelwaveStudio

Publisher: VoxelwaveStudioThemes in package: 2

A sweet peach-toned VS Code theme with cozy contrast and soft candy syntax colors.

Open in VS Code GitHub

Color themes

VS Code preview

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

Peachy Themes — Peachy Themes - Peach

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#ff928b
activityBar.background#202330
activityBar.foreground#ff928b
activityBarBadge.background#ff928b
activityBarBadge.foreground#202330
badge.background#6d5d72
badge.foreground#fff8f8
breadcrumb.activeSelectionForeground#fff8f8
breadcrumb.background#202330
breadcrumb.foreground#f3b4bf
button.background#fe7c8e
button.foreground#202330
button.hoverBackground#ff928b
button.secondaryBackground#472541
button.secondaryForeground#fff8f8
button.secondaryHoverBackground#6d5d72
checkbox.background#2d2f42
checkbox.border#6d5d72
checkbox.foreground#fff8f8
descriptionForeground#f3b4bfcc
dropdown.background#2d2f42
dropdown.border#6d5d72
dropdown.foreground#fff8f8
editor.background#202330
editor.findMatchBackground#efe9ae66
editor.findMatchHighlightBackground#efe9ae2b
editor.findRangeHighlightBackground#2d2f42
editor.foreground#fff8f8
editor.hoverHighlightBackground#ff928b14
editor.inactiveSelectionBackground#47254188
editor.lineHighlightBackground#2d2f42
editor.lineHighlightBorder#00000000
editor.selectionBackground#472541cc
editor.selectionHighlightBackground#6d5d724d
editor.wordHighlightBackground#ff928b22
editor.wordHighlightStrongBackground#fec3d633
editorBracketHighlight.foreground1#ff928b
editorBracketHighlight.foreground2#cdeac0
editorBracketHighlight.foreground3#fec3d6
editorBracketHighlight.foreground4#efe9ae
editorBracketHighlight.foreground5#ffac81
editorBracketHighlight.foreground6#3bc089
editorBracketMatch.background#ff928b1f
editorBracketMatch.border#ff928b88
editorCursor.foreground#fff8f8
editorError.foreground#ff62a5
editorGutter.addedBackground#3bc089
editorGutter.deletedBackground#ff62a5
editorGutter.modifiedBackground#ffac81
editorHint.foreground#3bc089
editorHoverWidget.background#2d2f42
editorHoverWidget.border#6d5d72
editorIndentGuide.activeBackground#ff928b55
editorIndentGuide.background#f3b4bf1f
editorInfo.foreground#ffac81
editorInlayHint.background#2d2f42cc
editorInlayHint.foreground#f3b4bfcc
editorInlayHint.parameterBackground#472541b3
editorInlayHint.parameterForeground#fec3d6
editorInlayHint.typeBackground#2d2f42cc
editorInlayHint.typeForeground#cdeac0
editorLineNumber.activeForeground#ff928b
editorLineNumber.foreground#9b9999
editorLink.activeForeground#ffac81
editorOverviewRuler.errorForeground#ff62a5
editorOverviewRuler.infoForeground#ffac81
editorOverviewRuler.warningForeground#d0963a
editorSuggestWidget.background#2d2f42
editorSuggestWidget.border#6d5d72
editorSuggestWidget.foreground#fff8f8
editorSuggestWidget.highlightForeground#ff928b
editorSuggestWidget.selectedBackground#472541
editorWarning.foreground#d0963a
editorWhitespace.foreground#f3b4bf22
editorWidget.background#2d2f42
editorWidget.border#6d5d72
errorForeground#ff62a5
focusBorder#fe7c8e
foreground#fff8f8
icon.foreground#fec3d6
input.background#2d2f42
input.border#6d5d72
input.foreground#fff8f8
input.placeholderForeground#f3b4bf88
inputOption.activeBackground#fe7c8e44
inputOption.activeBorder#fe7c8e
inputOption.activeForeground#fff8f8
list.activeSelectionBackground#472541
list.activeSelectionForeground#fff8f8
list.focusBackground#472541
list.focusHighlightForeground#ff928b
list.highlightForeground#ff928b
list.hoverBackground#2d2f42
list.inactiveSelectionBackground#2d2f42
menu.background#2d2f42
menu.foreground#fff8f8
menu.selectionBackground#472541
menu.selectionForeground#fff8f8
menu.separatorBackground#6d5d72
minimap.selectionHighlight#ff928b30
minimapSlider.activeBackground#f3b4bf55
minimapSlider.background#f3b4bf24
minimapSlider.hoverBackground#f3b4bf3b
notificationCenter.border#6d5d72
notificationCenterHeader.background#2d2f42
notificationCenterHeader.foreground#fff8f8
notifications.background#2d2f42
notifications.border#6d5d72
notifications.foreground#fff8f8
notificationsErrorIcon.foreground#ff62a5
notificationsInfoIcon.foreground#ffac81
notificationsWarningIcon.foreground#d0963a
panel.background#202330
panel.border#6d5d72
panelTitle.activeBorder#ff928b
panelTitle.activeForeground#fff8f8
panelTitle.inactiveForeground#f3b4bf99
peekView.border#ff928b66
peekViewEditor.background#202330
peekViewResult.background#2d2f42
peekViewResult.matchHighlightBackground#efe9ae33
peekViewTitle.background#2d2f42
pickerGroup.border#6d5d72
pickerGroup.foreground#fec3d6
ports.iconRunningProcessForeground#3bc089
progressBar.background#ff928b
quickInput.background#2d2f42
quickInput.foreground#fff8f8
quickInputList.focusBackground#472541
sash.hoverBorder#fe7c8e
scrollbar.shadow#00000055
scrollbarSlider.activeBackground#f3b4bf66
scrollbarSlider.background#f3b4bf30
scrollbarSlider.hoverBackground#f3b4bf45
selection.background#472541cc
sideBar.background#2d2f42
sideBar.border#202330
sideBar.foreground#fff8f8
sideBarSectionHeader.background#202330
sideBarSectionHeader.foreground#fec3d6
sideBarTitle.foreground#fff8f8
statusBar.background#ff928b
statusBar.debuggingBackground#efe9ae
statusBar.debuggingForeground#202330
statusBar.foreground#202330
statusBar.noFolderBackground#fec3d6
statusBar.noFolderForeground#202330
statusBarItem.hoverBackground#ffffff22
statusBarItem.prominentBackground#20233022
statusBarItem.prominentForeground#202330
statusBarItem.remoteBackground#cdeac0
statusBarItem.remoteForeground#202330
symbolIcon.classForeground#fec3d6
symbolIcon.functionForeground#efe9ae
symbolIcon.interfaceForeground#ffac81
symbolIcon.keyForeground#ff928b
symbolIcon.methodForeground#efe9ae
symbolIcon.variableForeground#fff8f8
tab.activeBackground#202330
tab.activeBorderTop#ff928b
tab.activeForeground#fff8f8
tab.border#2d2f42
tab.hoverBackground#2d2f42
tab.inactiveBackground#2d2f42
tab.inactiveForeground#f3b4bfcc
terminal.ansiBlack#2d2f42
terminal.ansiBlue#fec3d6
terminal.ansiBrightBlack#6d5d72
terminal.ansiBrightBlue#ffac81
terminal.ansiBrightCyan#bde8db
terminal.ansiBrightGreen#3bc089
terminal.ansiBrightMagenta#fec3d6
terminal.ansiBrightRed#ff928b
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#efe9ae
terminal.ansiCyan#3bc089
terminal.ansiGreen#cdeac0
terminal.ansiMagenta#ff62a5
terminal.ansiRed#fe7c8e
terminal.ansiWhite#fff8f8
terminal.ansiYellow#d0963a
terminal.background#202330
terminal.border#6d5d72
terminal.foreground#fff8f8
terminal.selectionBackground#472541aa
terminalCursor.background#202330
terminalCursor.foreground#fff8f8
testing.iconErrored#ff62a5
testing.iconFailed#ff62a5
testing.iconPassed#3bc089
testing.iconQueued#d0963a
testing.iconSkipped#9b9999
testing.message.error.decorationForeground#ff62a5
testing.message.info.decorationForeground#ffac81
textBlockQuote.background#2d2f42
textBlockQuote.border#ff928b66
textCodeBlock.background#2d2f42
textLink.activeForeground#efe9ae
textLink.foreground#ffac81
titleBar.activeBackground#2d2f42
titleBar.activeForeground#fff8f8
titleBar.inactiveBackground#2d2f42cc
titleBar.inactiveForeground#f3b4bf99
tree.indentGuidesStroke#6d5d72
welcomePage.background#202330
welcomePage.progress.background#2d2f42
welcomePage.progress.foreground#ff928b
welcomePage.tileBackground#2d2f42
welcomePage.tileHoverBackground#472541
widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#729760	italic
string, string.template, punctuation.definition.string, punctuation.definition.template-expression	#ff928b	—
constant.numeric, constant.language, constant.character.escape, constant.other.color	#ffac81	—
keyword, storage, storage.type, keyword.control, keyword.operator.expression, keyword.other.unit	#cdeac0	—
keyword.operator, punctuation.separator, punctuation.terminator	#f3b4bf	—
entity.name.function, support.function, meta.function-call, variable.function	#efe9ae	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#fec3d6	—
variable, identifier, entity.name.variable	#fff8f8	—
variable.parameter, variable.parameter.function, entity.name.label	#f3b4bf	italic
variable.other.property, meta.object-literal.key, support.variable.property	#fec3d6	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#fe7c8e	—
entity.other.attribute-name, meta.attribute-with-value	#ffac81	—
markup.heading, markup.heading.setext	#efe9ae	bold
markup.bold, markup.italic, markup.quote	#fec3d6	—
markup.inline.raw, markup.underline.link, string.other.link.title.markdown	#ffac81	—
markup.inserted, markup.inserted.diff	#3bc089	—
markup.changed, markup.changed.diff	#d0963a	—
markup.deleted, markup.deleted.diff	#ff62a5	—
source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json string.quoted.double.json	#fec3d6	—
source.json punctuation.separator.key-value, source.json punctuation.separator.array, source.json punctuation.definition.string	#f3b4bf	—
source.yaml entity.name.tag.yaml, source.yaml support.type.property-name.yaml	#fec3d6	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css	#efe9ae	—
support.type.property-name.css, meta.property-name.css	#fec3d6	—
constant.character.entity, punctuation.definition.entity	#ffac81	—
meta.decorator, entity.name.function.decorator, storage.modifier	#ffac81	—
template.expression punctuation.definition.template-expression.begin, template.expression punctuation.definition.template-expression.end	#fec3d6	—
support.function.builtin.python, variable.language.special.python, storage.type.function.arrow	#efe9ae	—
support.function.builtin.shell, meta.function-call.shell, source.shell variable.other.readwrite	#cdeac0	—
storage.modifier.lifetime.rust, support.macro.rust, entity.name.function.macro.rust	#ffac81	—
entity.name.package.go, constant.other.go	#fec3d6	—

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