Dusty Petal Theme

Name: Dusty Petal Theme
Author: lilin

Publisher: lilinThemes in package: 2

A refined dusty rose and graphite VS Code theme with carefully crafted light and dark variants.

Open in VS Code GitHub

Color themes

VS Code preview

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

Dusty Petal Theme — Dusty Petal Theme 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.activeBackground#352D31
activityBar.activeBorder#D98C9C
activityBar.background#2A2427
activityBar.border#3A3033
activityBar.dropBorder#C97E8E
activityBar.foreground#C7B2B6
activityBar.inactiveForeground#7A676B
activityBarBadge.background#C97E8E
activityBarBadge.foreground#1F1A1C
badge.background#C97E8E
badge.foreground#1F1A1C
breadcrumb.activeSelectionForeground#E8DDE0
breadcrumb.background#262021
breadcrumb.focusForeground#E8DDE0
breadcrumb.foreground#9B8A8E
button.background#C97E8E
button.foreground#1F1A1C
button.hoverBackground#D98C9C
button.secondaryBackground#3A3033
button.secondaryForeground#E8DDE0
button.secondaryHoverBackground#46393D
checkbox.background#2A2427
checkbox.border#C97E8E
checkbox.foreground#D98C9C
contrastBorder#3A3033
debugConsole.errorForeground#E29BA8
debugConsole.infoForeground#9AA7B3
debugConsole.sourceForeground#C7B2B6
debugConsole.warningForeground#D9B36A
debugConsoleInputIcon.foreground#D98C9C
debugIcon.breakpointDisabledForeground#7A676B
debugIcon.breakpointForeground#E29BA8
debugIcon.breakpointUnverifiedForeground#C97E8E
debugIcon.exceptionBreakpointForeground#D98C9C
debugToolBar.background#2A2427
debugView.exceptionLabelBackground#3A2A2E
debugView.exceptionLabelForeground#E29BA8
debugView.stateLabelBackground#322A2C
debugView.stateLabelForeground#9AA7B3
descriptionForeground#9B8A8E
diffEditor.border#3A3033
diffEditor.diagonalFill#322A2C
diffEditor.insertedLineBackground#2E3A2A80
diffEditor.insertedTextBackground#2E3A2A
diffEditor.removedLineBackground#3A2A2E80
diffEditor.removedTextBackground#3A2A2E
dropdown.background#2A2427
dropdown.border#3A3033
dropdown.foreground#E8DDE0
dropdown.listBackground#2A2427
editor.background#262021
editor.findMatchBackground#3A2A2E
editor.findMatchBorder#C97E8E
editor.findMatchHighlightBackground#4A2E33
editor.findMatchHighlightBorder#D98C9C
editor.foreground#E8DDE0
editor.inactiveSelectionBackground#3A3033
editor.lineHighlightBackground#2A2427
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#322A2C
editor.rangeHighlightBorder#00000000
editor.selectionBackground#46393D
editor.selectionForeground#FBEFF0
editor.selectionHighlightBackground#4A3A3E80
editor.selectionHighlightBorder#C97E8E80
editor.wordHighlightBackground#46393D80
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#5A454A80
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#46393D
editorBracketMatch.border#C97E8E
editorBracketMatch.borderStylesolid
editorCodeLens.foreground#7A676B
editorCursor.foreground#E29BA8
editorGhostText.foreground#6B5A5E
editorGutter.addedBackground#9DB87C
editorGutter.background#262021
editorGutter.commentRangeForeground#6B5A5E
editorGutter.deletedBackground#D98C9C
editorGutter.modifiedBackground#C9B27E
editorHoverWidget.background#1F1A1C
editorHoverWidget.border#3A3033
editorHoverWidget.foreground#E8DDE0
editorHoverWidget.statusBarBackground#2A2427
editorIndentGuide.activeBackground#C97E8E
editorIndentGuide.activeBackground1#C97E8E
editorIndentGuide.activeBackground2#D98C9C
editorIndentGuide.background#322A2C
editorIndentGuide.background1#322A2C
editorIndentGuide.background2#3A3033
editorLightBulb.foreground#D9B36A
editorLightBulbAutoFix.foreground#9DB87C
editorLineNumber.activeForeground#C7B2B6
editorLineNumber.foreground#6B5A5E
editorLink.activeForeground#D98C9C
editorOverviewRuler.addedForeground#9DB87C
editorOverviewRuler.border#3A3033
editorOverviewRuler.deletedForeground#D98C9C
editorOverviewRuler.errorForeground#E29BA8
editorOverviewRuler.infoForeground#8AA0B3
editorOverviewRuler.modifiedForeground#C9B27E
editorOverviewRuler.warningForeground#D9B36A
editorRuler.foreground#322A2C
editorStickyScroll.background#2A2427
editorStickyScrollHover.background#322A2C
editorSuggestWidget.background#1F1A1C
editorSuggestWidget.border#3A3033
editorSuggestWidget.foreground#E8DDE0
editorSuggestWidget.highlightForeground#E29BA8
editorSuggestWidget.selectedBackground#46393D
editorSuggestWidgetStatus.foreground#7A676B
editorWidget.background#1F1A1C
editorWidget.border#3A3033
editorWidget.foreground#E8DDE0
editorWidget.resizeBorder#C97E8E
errorForeground#E29BA8
extensionBadge.remoteBackground#C97E8E
extensionBadge.remoteForeground#1F1A1C
extensionButton.prominentBackground#C97E8E
extensionButton.prominentForeground#1F1A1C
extensionButton.prominentHoverBackground#D98C9C
extensionIcon.preReleaseForeground#8AA0B3
extensionIcon.sponsorForeground#C97E8E
extensionIcon.starForeground#D9B36A
extensionIcon.verifiedForeground#9DB87C
focusBorder#C97E8E
focusHighlightBorder#C97E8E
foreground#E8DDE0
gitDecoration.addedResourceForeground#9DB87C
gitDecoration.conflictingResourceForeground#B58FD8
gitDecoration.deletedResourceForeground#E29BA8
gitDecoration.ignoredResourceForeground#7A676B
gitDecoration.modifiedResourceForeground#D9B36A
gitDecoration.submoduleResourceForeground#8AA0B3
gitDecoration.untrackedResourceForeground#9DB87C
icon.foreground#C7B2B6
input.background#2A2427
input.border#3A3033
input.foreground#E8DDE0
input.placeholderForeground#7A676B
inputOption.activeBackground#46393D
inputOption.activeBorder#C97E8E
inputValidation.errorBackground#3A2A2E
inputValidation.errorBorder#E29BA8
inputValidation.errorForeground#E29BA8
inputValidation.infoBackground#26333A
inputValidation.infoBorder#8AA0B3
inputValidation.infoForeground#9AA7B3
inputValidation.warningBackground#3A3226
inputValidation.warningBorder#D9B36A
inputValidation.warningForeground#D9B36A
keybindingLabel.background#3A3033
keybindingLabel.border#46393D
keybindingLabel.bottomBorder#C97E8E
keybindingLabel.foreground#E8DDE0
list.activeSelectionBackground#46393D
list.activeSelectionForeground#FBEFF0
list.activeSelectionIconForeground#E29BA8
list.deemphasizedForeground#7A676B
list.dropBackground#46393D
list.dropOutline#C97E8E
list.errorForeground#E29BA8
list.filterMatchBackground#4A2E33
list.focusAndSelectionOutline#C97E8E
list.focusBackground#46393D
list.focusForeground#FBEFF0
list.focusOutline#C97E8E
list.highlightForeground#E29BA8
list.hoverBackground#2A2427
list.hoverForeground#FBEFF0
list.inactiveSelectionBackground#322A2C
list.inactiveSelectionForeground#E8DDE0
list.invalidItemForeground#E29BA8
list.warningForeground#D9B36A
listFilterWidget.background#1F1A1C
listFilterWidget.foreground#E8DDE0
listFilterWidget.noMatchesOutline#E29BA8
listFilterWidget.outline#3A3033
listFilterWidget.shadow#00000060
menu.background#1F1A1C
menu.border#3A3033
menu.foreground#E8DDE0
menu.selectionBackground#46393D
menu.selectionForeground#FBEFF0
menu.separatorBackground#3A3033
menubar.selectionBackground#46393D
menubar.selectionForeground#FBEFF0
merge.border#3A3033
merge.commonContentBackground#322A2C80
merge.commonHeaderBackground#322A2C
merge.currentContentBackground#2E3A2A80
merge.currentHeaderBackground#2E3A2A
merge.incomingContentBackground#3A2A2E80
merge.incomingHeaderBackground#3A2A2E
minimap.background#262021
minimap.errorHighlight#E29BA8
minimap.findMatchHighlight#3A2A2E
minimap.selectionHighlight#46393D
minimap.sliderBackground#C97E8E80
minimap.sliderHoverBackground#C97E8E
minimap.warningHighlight#D9B36A
minimapGutter.addedBackground#9DB87C
minimapGutter.deletedBackground#D98C9C
minimapGutter.modifiedBackground#C9B27E
notification.background#1F1A1C
notification.border#3A3033
notification.buttonBackground#3A3033
notification.buttonForeground#E8DDE0
notification.buttonHoverBackground#46393D
notification.errorBackground#3A2A2E
notification.errorForeground#E29BA8
notification.foreground#E8DDE0
notification.infoBackground#26333A
notification.infoForeground#9AA7B3
notification.warningBackground#3A3226
notification.warningForeground#D9B36A
notifications.background#1F1A1C
notifications.border#3A3033
notifications.focusBorder#C97E8E
notifications.foreground#E8DDE0
panel.background#221D1E
panel.border#3A3033
panelInput.border#3A3033
panelSectionHeader.background#2A2427
panelSectionHeader.border#3A3033
panelSectionHeader.foreground#E8DDE0
panelTitle.activeBorder#D98C9C
panelTitle.activeForeground#E8DDE0
panelTitle.inactiveForeground#7A676B
peekView.border#C97E8E
peekViewEditor.background#1F1A1C
peekViewEditor.foreground#E8DDE0
peekViewEditor.matchHighlightBackground#4A2E33
peekViewEditor.matchHighlightBorder#C97E8E
peekViewEditorGutter.background#1F1A1C
peekViewResult.background#1F1A1C
peekViewResult.fileForeground#E8DDE0
peekViewResult.foreground#E8DDE0
peekViewResult.lineForeground#9B8A8E
peekViewResult.matchHighlightBackground#4A2E33
peekViewResult.selectionBackground#46393D
peekViewResult.selectionForeground#FBEFF0
peekViewTitle.background#2A2427
peekViewTitle.foreground#C7B2B6
peekViewTitleDescription.foreground#7A676B
peekViewTitleLabel.foreground#E8DDE0
pickerGroup.border#3A3033
pickerGroup.foreground#7A676B
progressBar.background#C97E8E
quickInput.background#1F1A1C
quickInput.border#3A3033
quickInput.foreground#E8DDE0
quickInput.list.focusBackground#46393D
quickInput.list.focusForeground#FBEFF0
quickInputList.focusBackground#46393D
quickInputList.focusForeground#FBEFF0
quickInputTitle.background#2A2427
quickInputTitle.foreground#C7B2B6
scrollbar.shadow#00000060
scrollbarSlider.activeBackground#D98C9C
scrollbarSlider.background#C97E8E80
scrollbarSlider.hoverBackground#C97E8E
searchEditor.findMatchBackground#4A2E33
searchEditor.textInputBorder#3A3033
settings.checkboxBackground#2A2427
settings.checkboxBorder#C97E8E
settings.checkboxForeground#D98C9C
settings.dropdownBackground#2A2427
settings.dropdownBorder#3A3033
settings.dropdownForeground#E8DDE0
settings.dropdownListBorder#3A3033
settings.focusedRowBackground#352D31
settings.focusedRowBorder#C97E8E
settings.headerForeground#E8DDE0
settings.numberInputBackground#2A2427
settings.numberInputBorder#3A3033
settings.numberInputForeground#E8DDE0
settings.rowHoverBackground#2A2427
settings.textInputBackground#2A2427
settings.textInputBorder#3A3033
settings.textInputForeground#E8DDE0
sideBar.background#221D1E
sideBar.border#3A3033
sideBar.dropBackground#46393D
sideBar.foreground#C7B2B6
sideBarSectionHeader.background#2A2427
sideBarSectionHeader.border#3A3033
sideBarSectionHeader.foreground#E8DDE0
sideBarTitle.foreground#E8DDE0
statusBar.background#1F1A1C
statusBar.border#3A3033
statusBar.debuggingBackground#C97E8E
statusBar.debuggingForeground#1F1A1C
statusBar.foreground#E8DDE0
statusBar.itemActiveBackground#46393D
statusBar.itemHoverBackground#46393D
statusBar.noFolderBackground#1F1A1C
statusBar.noFolderForeground#E8DDE0
statusBarItem.prominentBackground#46393D
statusBarItem.prominentForeground#E8DDE0
statusBarItem.prominentHoverBackground#5A454A
statusBarItem.remoteBackground#C97E8E
statusBarItem.remoteForeground#1F1A1C
statusBarItem.warningBackground#D9B36A
statusBarItem.warningForeground#1F1A1C
tab.activeBackground#262021
tab.activeBorder#D98C9C
tab.activeBorderTop#D98C9C
tab.activeForeground#FBEFF0
tab.border#3A3033
tab.dragAndDropBorder#C97E8E
tab.hoverBackground#2A2427
tab.hoverForeground#FBEFF0
tab.inactiveBackground#221D1E
tab.inactiveForeground#7A676B
tab.lastPinnedBorder#C97E8E
tab.unfocusedActiveBackground#221D1E
tab.unfocusedActiveBorder#46393D
tab.unfocusedActiveBorderTop#46393D
tab.unfocusedActiveForeground#C7B2B6
tab.unfocusedHoverBackground#2A2427
tab.unfocusedInactiveBackground#221D1E
tab.unfocusedInactiveForeground#7A676B
terminal.ansiBlack#262021
terminal.ansiBlue#8AA7C4
terminal.ansiBrightBlack#6B5A5E
terminal.ansiBrightBlue#A0BBD8
terminal.ansiBrightCyan#8FD0D0
terminal.ansiBrightForeground#E8DDE0
terminal.ansiBrightGreen#B6D28C
terminal.ansiBrightMagenta#D2B0EC
terminal.ansiBrightRed#F0B3C0
terminal.ansiBrightWhite#E8DDE0
terminal.ansiBrightYellow#E8C57C
terminal.ansiCyan#79C2C2
terminal.ansiGreen#A6C27E
terminal.ansiMagenta#C49BE0
terminal.ansiRed#E29BA8
terminal.ansiWhite#C7B2B6
terminal.ansiYellow#D9B36A
terminal.background#262021
terminal.foreground#E8DDE0
terminal.inactiveSelectionBackground#3A3033
terminal.selectionBackground#46393D
terminalCursor.foreground#E29BA8
textBlockQuote.background#2A2427
textBlockQuote.border#C97E8E
textCodeBlock.background#352D31
textLink.activeForeground#E29BA8
textLink.foreground#D98C9C
textPreformat.foreground#C49BE0
textSeparator.foreground#3A3033
titleBar.activeBackground#1F1A1C
titleBar.activeForeground#E8DDE0
titleBar.border#3A3033
titleBar.inactiveBackground#221D1E
titleBar.inactiveForeground#7A676B
toolbar.activeBackground#46393D
toolbar.hoverBackground#2A2427
toolbar.hoverOutline#C97E8E
tree.indentGuidesStroke#3A3033
walkThrough.embeddedEditorBackground#1F1A1C
welcomePage.background#262021
welcomePage.buttonBackground#3A3033
welcomePage.buttonHoverBackground#46393D
welcomePage.progress.background#3A3033
welcomePage.progress.foreground#C97E8E
welcomePage.tileBackground#221D1E
welcomePage.tileBorder#3A3033
welcomePage.tileHoverBackground#2A2427
widget.border#3A3033
widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#7A676B	italic
comment.line	#7A676B	italic
comment.block	#7A676B	italic
string	#A6C27E	—
string.quoted	#A6C27E	—
string.template	#B6D28C	—
string.regexp	#D9B36A	—
constant.numeric	#D9B36A	—
constant.numeric.hex	#D9B36A	—
constant.language	#C49BE0	—
constant.language.boolean	#C49BE0	—
constant.language.null	#C49BE0	—
constant.language.undefined	#C49BE0	—
constant.character.escape	#D9B36A	—
constant.other.color	#D98C9C	—
keyword	#D98C9C	—
keyword.control	#D98C9C	—
keyword.operator	#9B8A8E	—
keyword.operator.new	#D98C9C	—
keyword.operator.logical	#D98C9C	—
keyword.other.unit	#D9B36A	—
keyword.other.special-method	#D98C9C	—
storage	#C49BE0	—
storage.type	#C49BE0	—
storage.modifier	#C49BE0	—
entity.name.function	#8AA7C4	—
entity.name.function.call	#8AA7C4	—
support.function	#8AA7C4	—
support.function.builtin	#79C2C2	—
entity.name.class	#D9B36A	—
entity.name.type	#D9B36A	—
entity.name.type.class	#D9B36A	—
support.type	#D9B36A	—
support.type.class	#D9B36A	—
entity.name.namespace	#9AA7B3	—
entity.name.module	#9AA7B3	—
entity.name.interface	#D9B36A	—
entity.name.enum	#D9B36A	—
entity.name.struct	#D9B36A	—
entity.name.tag	#D98C9C	—
entity.name.tag.css	#E29BA8	—
entity.name.tag.custom	#D98C9C	—
entity.other.attribute-name	#D9B36A	—
entity.other.attribute-name.class	#D9B36A	—
entity.other.attribute-name.id	#8AA7C4	—
variable	#E8DDE0	—
variable.parameter	#C7B2B6	—
variable.other.constant	#C49BE0	—
variable.other.property	#C7B2B6	—
variable.other.object.property	#C7B2B6	—
support.variable	#C7B2B6	—
support.variable.property	#C7B2B6	—
support.constant	#C49BE0	—
support.constant.property-value	#A6C27E	—
support.class	#D9B36A	—
punctuation.definition.comment	#7A676B	—
punctuation.definition.string	#A6C27E	—
punctuation.definition.character	#A6C27E	—
punctuation.definition.tag	#D98C9C	—
punctuation.definition.block	#9B8A8E	—
punctuation.definition.parameters	#9B8A8E	—
punctuation.definition.template-expression	#D9B36A	—
punctuation.section	#9B8A8E	—
punctuation.separator	#9B8A8E	—
punctuation.terminator	#9B8A8E	—
meta.brace	#9B8A8E	—
meta.delimiter	#9B8A8E	—
meta.tag	#9B8A8E	—
invalid	#E29BA8	—
invalid.deprecated	#E29BA8	—
invalid.illegal	#E29BA8	—
markup.heading	#E29BA8	bold
markup.heading.1	#E29BA8	bold
markup.heading.2	#E29BA8	bold
markup.heading.3	#D98C9C	bold
markup.heading.4	#D98C9C	bold
markup.heading.5	#D98C9C	—
markup.heading.6	#D98C9C	—
markup.bold	#C49BE0	bold
markup.italic	—	italic
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.quote	#A6C27E	italic
markup.list	#D98C9C	—
markup.list.unnumbered	#D98C9C	—
markup.list.numbered	#D9B36A	—
markup.raw.inline	#79C2C2	—
markup.fenced_code	#E8DDE0	—
markup.link	#8AA7C4	underline
markup.inserted	#A6C27E	—
markup.deleted	#E29BA8	—
markup.changed	#D9B36A	—
markup.prompt	#8AA7C4	—
meta.diff.header	#9AA7B3	—
source.diff	#9AA7B3	—
regexp	#D9B36A	—
json.key	#C7B2B6	—
source.json meta.structure.dictionary.key string	#C7B2B6	—
yaml.key	#C7B2B6	—
source.yaml entity.name.tag	#C7B2B6	—
sql.keyword	#D98C9C	—
sql.string	#A6C27E	—
sql.numeric	#D9B36A	—
sql.storage	#C49BE0	—
php.string	#A6C27E	—
php.keyword	#D98C9C	—
php.constant.language	#C49BE0	—
php.function-call	#8AA7C4	—
python.string	#A6C27E	—
python.keyword	#D98C9C	—
python.function-call	#8AA7C4	—
python.parameter	#C7B2B6	—
python.decorator	#D9B36A	—
rust.string	#A6C27E	—
rust.keyword	#D98C9C	—
rust.function	#8AA7C4	—
go.string	#A6C27E	—
go.keyword	#D98C9C	—
go.function	#8AA7C4	—
java.string	#A6C27E	—
java.keyword	#D98C9C	—
java.storage.type	#C49BE0	—
c.string	#A6C27E	—
c.keyword	#D98C9C	—
c.function	#8AA7C4	—
cpp.string	#A6C27E	—
cpp.keyword	#D98C9C	—
csharp.string	#A6C27E	—
csharp.keyword	#D98C9C	—
csharp.storage.type	#C49BE0	—
shell.string	#A6C27E	—
shell.keyword	#D98C9C	—
shell.function	#8AA7C4	—