Macaron Dream Theme

Name: Macaron Dream Theme
Author: lilin

Publisher: lilinThemes in package: 2

A premium pastel VS Code theme collection inspired by macaron desserts — soft, dreamy, elegant. Includes both Light and Dark themes for designers, AI creators, and indie developers.

Open in VS Code GitHub

Color themes

VS Code preview

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

Macaron Dream Theme — Macaron Dream 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#20213A
activityBar.activeBorder#FF8FAB
activityBar.background#1C1D33
activityBar.focusBorder#00000000
activityBar.foreground#E6E1F2
activityBar.inactiveForeground#8A82A8
activityBarBadge.background#B8A4FF
activityBarBadge.foreground#17182B
badge.background#B8A4FF
badge.foreground#17182B
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.background#1C1D33
breadcrumb.focusForeground#FF8FAB
breadcrumb.foreground#8C84B0
button.background#FF8FAB
button.foreground#17182B
button.hoverBackground#FFA8BF
contrastBorder#3A3B5A
debugExceptionWidget.background#3A3320
debugExceptionWidget.border#FFD166
debugToolBar.background#272840
diffEditor.insertedTextBackground#7BDCB533
diffEditor.removedTextBackground#FF8FAB33
dropdown.background#272840
dropdown.border#3A3B5A
dropdown.foreground#E6E1F2
editor.background#20213A
editor.foreground#E6E1F2
editor.inactiveSelectionBackground#2F3052
editor.lineHighlightBackground#27284A
editor.lineHighlightBorder#00000000
editor.lineNumber.activeForeground#B8A4FF
editor.lineNumber.foreground#5A5384
editor.selectionBackground#3A3B5C
editor.selectionHighlightBackground#3A3B5A
editorBracketMatch.background#3A3B5C
editorBracketMatch.border#FF8FAB
editorCodeLens.foreground#8A82A8
editorCursor.foreground#FF8FAB
editorError.foreground#FF8FAB
editorGroup.background#17182B
editorGroup.border#3A3B5A
editorGroupHeader.tabsBackground#1C1D33
editorGroupHeader.tabsBorder#3A3B5A
editorGutter.background#20213A
editorHoverWidget.background#272840
editorHoverWidget.border#3A3B5A
editorIndentGuide.activeBackground#48496F
editorIndentGuide.background#2F3052
editorInfo.foreground#7DC8F7
editorOverviewRuler.border#3A3B5A
editorOverviewRuler.errorForeground#FF8FAB
editorOverviewRuler.infoForeground#7DC8F7
editorOverviewRuler.warningForeground#FFD166
editorRuler.foreground#3A3B5A
editorSuggestWidget.background#272840
editorSuggestWidget.border#3A3B5A
editorSuggestWidget.selectedBackground#3A3B5C
editorWarning.foreground#FFD166
editorWhitespace.foreground#3A3B5A
editorWidget.background#272840
editorWidget.border#3A3B5A
editorWidget.resizeBorder#FF8FAB
focusBorder#FF8FAB
foreground#C9C2E8
gitDecoration.addedResourceForeground#7BDCB5
gitDecoration.conflictingResourceForeground#B8A4FF
gitDecoration.deletedResourceForeground#FF8FAB
gitDecoration.ignoredResourceForeground#8A82A8
gitDecoration.modifiedResourceForeground#FFD166
gitDecoration.untrackedResourceForeground#7DC8F7
input.background#1C1D33
input.border#3A3B5A
input.foreground#E6E1F2
inputOption.activeBorder#FF8FAB
inputValidation.errorBackground#3A2436
inputValidation.errorBorder#FF8FAB
inputValidation.infoBackground#1E2E3A
inputValidation.infoBorder#7DC8F7
inputValidation.warningBackground#3A3320
inputValidation.warningBorder#FFD166
list.activeSelectionBackground#3A3B5C
list.activeSelectionForeground#FFFFFF
list.dropBackground#3A3B5C
list.errorForeground#FF8FAB
list.focusBackground#3A3B5C
list.highlightForeground#FF8FAB
list.hoverBackground#2F3052
list.inactiveSelectionBackground#27284A
menu.background#272840
menu.foreground#E6E1F2
menu.selectionBackground#3A3B5C
menu.selectionForeground#FFFFFF
menu.separatorBackground#3A3B5A
menubar.selectionForeground#FFFFFF
notification.background#272840
notification.border#3A3B5A
notification.foreground#E6E1F2
panel.background#272840
panel.border#3A3B5A
panelInput.border#3A3B5A
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#8C84B0
progressBar.background#FF8FAB
scrollbarSlider.activeBackground#FF8FAB66
scrollbarSlider.background#3A3B5A66
scrollbarSlider.hoverBackground#3A3B5AAA
sideBar.background#1C1D33
sideBar.border#3A3B5A
sideBar.foreground#C9C2E8
sideBarSectionHeader.background#27284A
sideBarSectionHeader.border#3A3B5A
sideBarSectionHeader.foreground#E6E1F2
sideBarTitle.foreground#E6E1F2
statusBar.background#FF8FAB
statusBar.debuggingBackground#B8A4FF
statusBar.foreground#17182B
statusBar.noFolderBackground#FF8FAB
statusBarItem.activeBackground#17182B44
statusBarItem.hoverBackground#17182B33
tab.activeBackground#20213A
tab.activeBorder#FF8FAB
tab.activeForeground#FFFFFF
tab.border#3A3B5A
tab.inactiveBackground#1C1D33
tab.inactiveForeground#8C84B0
tab.unfocusedActiveBorder#3A3B5A
tab.unfocusedActiveForeground#E6E1F2
tab.unfocusedInactiveForeground#8A82A8
terminal.ansiBlack#17182B
terminal.ansiBlue#7DC8F7
terminal.ansiBrightBlack#5A5384
terminal.ansiBrightBlue#A9E0F9
terminal.ansiBrightCyan#A0F0D4
terminal.ansiBrightGreen#A0F0D4
terminal.ansiBrightMagenta#FFB3D8
terminal.ansiBrightRed#FFB3C6
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFE08A
terminal.ansiCyan#7BDCB5
terminal.ansiGreen#7BDCB5
terminal.ansiMagenta#FF9EC2
terminal.ansiRed#FF8FAB
terminal.ansiWhite#C9C2E8
terminal.ansiYellow#FFD166
terminal.background#20213A
terminal.foreground#E6E1F2
textBlockQuote.background#1C1D33
textBlockQuote.border#FF8FAB
textCodeBlock.background#1C1D33
textLink.activeForeground#FF8FAB
textLink.foreground#7DC8F7
textPreformat.foreground#FF8FAB
titleBar.activeBackground#1C1D33
titleBar.activeForeground#E6E1F2
titleBar.border#3A3B5A
titleBar.inactiveBackground#17182B
titleBar.inactiveForeground#8C84B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8A82A8	italic
comment.line, comment.block	#8A82A8	—
string	#FFD166	—
string.quoted, string.unquoted	#FFD166	—
constant.numeric	#B8A4FF	—
constant.language	#FF8FAB	—
constant.character.escape	#7DC8F7	—
keyword	#FF8FAB	—
keyword.control	#B8A4FF	—
keyword.operator	#FF8FAB	—
storage.type, storage.modifier	#FF8FAB	—
storage.modifier	#B8A4FF	—
entity.name.function	#7BDCB5	—
entity.name.type, entity.name.class, entity.name.namespace	#7BDCB5	—
entity.other.inherited-class	#7BDCB5	—
variable	#7DC8F7	—
variable.parameter	#A9B6E8	—
variable.other.constant	#B8A4FF	—
support.function	#7BDCB5	—
support.type, support.class	#7BDCB5	—
support.constant	#B8A4FF	—
punctuation, meta.brace	#8C84B0	—
entity.name.tag	#FF8FAB	—
entity.other.attribute-name	#7BDCB5	—
markup.heading	#FF8FAB	bold
markup.bold	#E6E1F2	bold
markup.italic	—	italic
markup.inserted	#7BDCB5	—
markup.deleted	#FF8FAB	—
meta.diff.range, meta.separator	#B8A4FF	—