Codex Palette for VS Code

Name: Codex Palette for VS Code
Author: smallyu

Publisher: smallyuThemes in package: 43

All 43 Codex appearance presets for VS Code, with faithful colors and one-click system appearance switching.

Open in VS Code GitHub

Color themes

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Absolutely 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.activeBorder#cc7d5e
activityBar.background#373735
activityBar.border#ffffff22
activityBar.foreground#f9f9f7
activityBar.inactiveForeground#b2b2b0
activityBarBadge.background#cc7d5e
activityBarBadge.foreground#ffffff
badge.background#cc7d5e
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#f9f9f7
breadcrumb.background#2d2d2b
breadcrumb.focusForeground#f9f9f7
breadcrumb.foreground#b2b2b0
button.background#cc7d5e
button.foreground#ffffff
button.hoverBackground#ff5f38
button.secondaryBackground#373735
button.secondaryForeground#f9f9f7
button.secondaryHoverBackground#373735
checkbox.background#373735
checkbox.border#ffffff22
commandCenter.background#373735
commandCenter.border#ffffff22
commandCenter.foreground#b2b2b0
debugIcon.continueForeground#00c853
debugIcon.disconnectForeground#ff5f38
debugIcon.pauseForeground#ff5f38
debugIcon.restartForeground#00c853
debugIcon.startForeground#00c853
debugIcon.stepIntoForeground#ff5f38
debugIcon.stepOutForeground#ff5f38
debugIcon.stepOverForeground#ff5f38
debugIcon.stopForeground#ff5f38
debugToolBar.background#373735
descriptionForeground#b2b2b0
diffEditor.diagonalFill#b2b2b026
diffEditor.insertedLineBackground#00c85318
diffEditor.insertedTextBackground#00c85330
diffEditor.removedLineBackground#ff5f3818
diffEditor.removedTextBackground#ff5f3830
disabledForeground#f9f9f766
dropdown.background#373735
dropdown.border#ffffff22
dropdown.foreground#f9f9f7
editor.background#2d2d2b
editor.findMatchBackground#f9f9f766
editor.findMatchHighlightBackground#f9f9f735
editor.findRangeHighlightBackground#cc7d5e18
editor.foreground#f9f9f7
editor.hoverHighlightBackground#cc7d5e18
editor.inactiveSelectionBackground#cc7d5e33
editor.lineHighlightBackground#373735
editor.selectionBackground#cc7d5e44
editor.selectionHighlightBackground#cc7d5e33
editor.wordHighlightBackground#ff5f3825
editor.wordHighlightStrongBackground#f9f9f730
editorBracketHighlight.foreground1#ff5f38
editorBracketHighlight.foreground2#f9f9f7
editorBracketHighlight.foreground3#00c853
editorBracketHighlight.foreground4#ff5f38
editorBracketHighlight.foreground5#f9f9f7
editorBracketHighlight.foreground6#ff5f38
editorBracketMatch.background#cc7d5e22
editorBracketMatch.border#cc7d5e
editorBracketPairGuide.activeBackground1#cc7d5ea6
editorBracketPairGuide.activeBackground2#cc7d5ea6
editorBracketPairGuide.activeBackground3#cc7d5ea6
editorBracketPairGuide.activeBackground4#cc7d5ea6
editorBracketPairGuide.activeBackground5#cc7d5ea6
editorBracketPairGuide.activeBackground6#cc7d5ea6
editorBracketPairGuide.background1#f9f9f724
editorBracketPairGuide.background2#f9f9f724
editorBracketPairGuide.background3#f9f9f724
editorBracketPairGuide.background4#f9f9f724
editorBracketPairGuide.background5#f9f9f724
editorBracketPairGuide.background6#f9f9f724
editorCursor.foreground#cc7d5e
editorError.foreground#ff5f38
editorGroup.border#ffffff22
editorGroupHeader.tabsBackground#373735
editorGroupHeader.tabsBorder#ffffff22
editorGutter.addedBackground#00c853
editorGutter.deletedBackground#ff5f38
editorGutter.modifiedBackground#ff5f38
editorHint.foreground#00c853
editorHoverWidget.background#373735
editorHoverWidget.border#ffffff22
editorIndentGuide.activeBackground1#cc7d5ea6
editorIndentGuide.background1#f9f9f724
editorInfo.foreground#ff5f38
editorLineNumber.activeForeground#b2b2b0
editorLineNumber.foreground#b2b2b0
editorSuggestWidget.background#373735
editorSuggestWidget.border#ffffff22
editorSuggestWidget.selectedBackground#373735
editorWarning.foreground#00c853
editorWhitespace.foreground#f9f9f724
editorWidget.background#373735
editorWidget.border#ffffff22
editorWidget.foreground#f9f9f7
errorForeground#ff5f38
focusBorder#cc7d5e
foreground#f9f9f7
gitDecoration.addedResourceForeground#00c853
gitDecoration.conflictingResourceForeground#f9f9f7
gitDecoration.deletedResourceForeground#ff5f38
gitDecoration.ignoredResourceForeground#b2b2b0
gitDecoration.modifiedResourceForeground#ff5f38
gitDecoration.renamedResourceForeground#f9f9f7
gitDecoration.untrackedResourceForeground#00c853
icon.foreground#b2b2b0
input.background#373735
input.border#ffffff22
input.foreground#f9f9f7
input.placeholderForeground#b2b2b0
inputOption.activeBackground#cc7d5e55
inputOption.activeBorder#cc7d5e
inputValidation.errorBackground#ff5f3822
inputValidation.errorBorder#ff5f38
inputValidation.infoBackground#ff5f3822
inputValidation.infoBorder#ff5f38
inputValidation.warningBackground#00c85322
inputValidation.warningBorder#00c853
list.activeSelectionBackground#cc7d5e55
list.activeSelectionForeground#f9f9f7
list.errorForeground#ff5f38
list.focusBackground#cc7d5e44
list.highlightForeground#cc7d5e
list.hoverBackground#373735
list.inactiveSelectionBackground#cc7d5e33
list.warningForeground#00c853
menu.background#373735
menu.foreground#f9f9f7
menu.selectionBackground#cc7d5e44
menu.separatorBackground#ffffff22
minimap.background#2d2d2b
minimap.findMatchHighlight#f9f9f780
minimap.selectionHighlight#cc7d5e66
notificationCenter.border#ffffff22
notificationCenterHeader.background#373735
notifications.background#373735
notifications.border#ffffff22
notifications.foreground#f9f9f7
panel.background#373735
panel.border#ffffff22
panelTitle.activeBorder#cc7d5e
panelTitle.activeForeground#f9f9f7
panelTitle.inactiveForeground#b2b2b0
peekView.border#cc7d5e
peekViewEditor.background#2d2d2b
peekViewResult.background#373735
peekViewResult.selectionBackground#cc7d5e44
peekViewTitle.background#373735
pickerGroup.border#ffffff22
pickerGroup.foreground#cc7d5e
progressBar.background#cc7d5e
quickInput.background#373735
quickInput.foreground#f9f9f7
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#f9f9f745
scrollbarSlider.background#f9f9f718
scrollbarSlider.hoverBackground#f9f9f72e
sideBar.background#373735
sideBar.border#ffffff22
sideBar.foreground#f9f9f7
sideBarSectionHeader.background#373735
sideBarSectionHeader.border#ffffff22
sideBarSectionHeader.foreground#f9f9f7
sideBarTitle.foreground#f9f9f7
statusBar.background#373735
statusBar.border#ffffff22
statusBar.debuggingBackground#ff5f38
statusBar.debuggingForeground#111111
statusBar.foreground#b2b2b0
statusBar.noFolderBackground#373735
tab.activeBackground#2d2d2b
tab.activeBorder#2d2d2b
tab.activeBorderTop#cc7d5e
tab.activeForeground#f9f9f7
tab.border#ffffff22
tab.inactiveBackground#373735
tab.inactiveForeground#b2b2b0
terminal.ansiBlack#111111
terminal.ansiBlue#ff5f38
terminal.ansiBrightBlack#b2b2b0
terminal.ansiBrightBlue#ff5f38
terminal.ansiBrightCyan#ff5f38
terminal.ansiBrightGreen#00c853
terminal.ansiBrightMagenta#f9f9f7
terminal.ansiBrightRed#ff5f38
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f9f9f7
terminal.ansiCyan#ff5f38
terminal.ansiGreen#00c853
terminal.ansiMagenta#f9f9f7
terminal.ansiRed#ff5f38
terminal.ansiWhite#d6d6d6
terminal.ansiYellow#00c853
terminal.background#2d2d2b
terminal.foreground#f9f9f7
terminal.selectionBackground#cc7d5e44
terminalCursor.foreground#cc7d5e
textBlockQuote.background#373735
textBlockQuote.border#cc7d5e
textCodeBlock.background#373735
textLink.activeForeground#ff5f38
textLink.foreground#cc7d5e
titleBar.activeBackground#373735
titleBar.activeForeground#f9f9f7
titleBar.border#ffffff22
titleBar.inactiveBackground#373735
titleBar.inactiveForeground#b2b2b0
tree.inactiveIndentGuidesStroke#f9f9f724
tree.indentGuidesStroke#f9f9f752
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#b2b2b0	—
string, constant.other.symbol, markup.inline.raw	#00c853	—
constant.numeric, constant.language.boolean, constant.language.null	#ff5f38	—
constant, variable.other.constant	#f9f9f7	—
keyword, storage.type, storage.modifier	#ff5f38	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#f9f9f7	—
variable.parameter, function.parameter	#b2b2b0	—
entity.name.function, support.function, variable.function, meta.function-call	#f9f9f7	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#f9f9f7	—
entity.name.namespace, entity.name.type.namespace	#f9f9f7	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#ff5f38	—
punctuation, meta.brace	#b2b2b0	—
entity.name.tag, punctuation.definition.tag	#ff5f38	—
entity.other.attribute-name	#ff5f38	—
string.regexp, constant.regexp	#ff5f38	—
markup.heading, entity.name.section	#ff5f38	bold
markup.bold, punctuation.definition.bold	#f9f9f7	bold
markup.italic, punctuation.definition.italic	#ff5f38	italic
markup.underline.link, string.other.link	#cc7d5e	underline
markup.inserted	#00c853	—
markup.deleted	#ff5f38	—
markup.changed	#f9f9f7	—
invalid	#ffffff	—

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Absolutely Light

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#cc7d5e
activityBar.background#f4f4f2
activityBar.border#00000022
activityBar.foreground#2d2d2b
activityBar.inactiveForeground#8e8e8c
activityBarBadge.background#cc7d5e
activityBarBadge.foreground#ffffff
badge.background#c27759
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#2d2d2b
breadcrumb.background#f9f9f7
breadcrumb.focusForeground#2d2d2b
breadcrumb.foreground#8e8e8c
button.background#cc7d5e
button.foreground#ffffff
button.hoverBackground#ff5f38
button.secondaryBackground#f4f4f2
button.secondaryForeground#2d2d2b
button.secondaryHoverBackground#f4f4f2
checkbox.background#f4f4f2
checkbox.border#00000022
commandCenter.background#f4f4f2
commandCenter.border#00000022
commandCenter.foreground#8e8e8c
debugIcon.continueForeground#00c853
debugIcon.disconnectForeground#ff5f38
debugIcon.pauseForeground#ff5f38
debugIcon.restartForeground#00c853
debugIcon.startForeground#00c853
debugIcon.stepIntoForeground#ff5f38
debugIcon.stepOutForeground#ff5f38
debugIcon.stepOverForeground#ff5f38
debugIcon.stopForeground#ff5f38
debugToolBar.background#f4f4f2
descriptionForeground#8e8e8c
diffEditor.diagonalFill#8e8e8c26
diffEditor.insertedLineBackground#00c85312
diffEditor.insertedTextBackground#00c85320
diffEditor.removedLineBackground#ff5f3812
diffEditor.removedTextBackground#ff5f3820
disabledForeground#2d2d2b66
dropdown.background#f4f4f2
dropdown.border#00000022
dropdown.foreground#2d2d2b
editor.background#f9f9f7
editor.findMatchBackground#2d2d2b4d
editor.findMatchHighlightBackground#2d2d2b26
editor.findRangeHighlightBackground#c2775918
editor.foreground#2d2d2b
editor.hoverHighlightBackground#c2775918
editor.inactiveSelectionBackground#c277591f
editor.lineHighlightBackground#f4f4f2
editor.selectionBackground#c2775944
editor.selectionHighlightBackground#c277591f
editor.wordHighlightBackground#ff5f3818
editor.wordHighlightStrongBackground#2d2d2b1f
editorBracketHighlight.foreground1#ff5f38
editorBracketHighlight.foreground2#2d2d2b
editorBracketHighlight.foreground3#00c853
editorBracketHighlight.foreground4#ff5f38
editorBracketHighlight.foreground5#2d2d2b
editorBracketHighlight.foreground6#ff5f38
editorBracketMatch.background#c2775922
editorBracketMatch.border#c27759
editorBracketPairGuide.activeBackground1#c277598c
editorBracketPairGuide.activeBackground2#c277598c
editorBracketPairGuide.activeBackground3#c277598c
editorBracketPairGuide.activeBackground4#c277598c
editorBracketPairGuide.activeBackground5#c277598c
editorBracketPairGuide.activeBackground6#c277598c
editorBracketPairGuide.background1#2d2d2b18
editorBracketPairGuide.background2#2d2d2b18
editorBracketPairGuide.background3#2d2d2b18
editorBracketPairGuide.background4#2d2d2b18
editorBracketPairGuide.background5#2d2d2b18
editorBracketPairGuide.background6#2d2d2b18
editorCursor.foreground#cc7d5e
editorError.foreground#ff5f38
editorGroup.border#00000022
editorGroupHeader.tabsBackground#f4f4f2
editorGroupHeader.tabsBorder#00000022
editorGutter.addedBackground#00c853
editorGutter.deletedBackground#ff5f38
editorGutter.modifiedBackground#ff5f38
editorHint.foreground#00c853
editorHoverWidget.background#f4f4f2
editorHoverWidget.border#00000022
editorIndentGuide.activeBackground1#c277598c
editorIndentGuide.background1#2d2d2b18
editorInfo.foreground#ff5f38
editorLineNumber.activeForeground#8e8e8c
editorLineNumber.foreground#8e8e8c
editorSuggestWidget.background#f4f4f2
editorSuggestWidget.border#00000022
editorSuggestWidget.selectedBackground#f4f4f2
editorWarning.foreground#00c853
editorWhitespace.foreground#2d2d2b18
editorWidget.background#f4f4f2
editorWidget.border#00000022
editorWidget.foreground#2d2d2b
errorForeground#ff5f38
focusBorder#cc7d5e
foreground#2d2d2b
gitDecoration.addedResourceForeground#00c853
gitDecoration.conflictingResourceForeground#2d2d2b
gitDecoration.deletedResourceForeground#ff5f38
gitDecoration.ignoredResourceForeground#8e8e8c
gitDecoration.modifiedResourceForeground#ff5f38
gitDecoration.renamedResourceForeground#2d2d2b
gitDecoration.untrackedResourceForeground#00c853
icon.foreground#8e8e8c
input.background#f4f4f2
input.border#00000022
input.foreground#2d2d2b
input.placeholderForeground#8e8e8c
inputOption.activeBackground#c2775922
inputOption.activeBorder#c27759
inputValidation.errorBackground#ff5f3812
inputValidation.errorBorder#ff5f38
inputValidation.infoBackground#ff5f3812
inputValidation.infoBorder#ff5f38
inputValidation.warningBackground#00c85312
inputValidation.warningBorder#00c853
list.activeSelectionBackground#c2775922
list.activeSelectionForeground#2d2d2b
list.errorForeground#ff5f38
list.focusBackground#c277591f
list.highlightForeground#c27759
list.hoverBackground#f4f4f2
list.inactiveSelectionBackground#c2775914
list.warningForeground#00c853
menu.background#f4f4f2
menu.foreground#2d2d2b
menu.selectionBackground#c2775944
menu.separatorBackground#00000022
minimap.background#f9f9f7
minimap.findMatchHighlight#2d2d2b80
minimap.selectionHighlight#c2775966
notificationCenter.border#00000022
notificationCenterHeader.background#f4f4f2
notifications.background#f4f4f2
notifications.border#00000022
notifications.foreground#2d2d2b
panel.background#f4f4f2
panel.border#00000022
panelTitle.activeBorder#c27759
panelTitle.activeForeground#2d2d2b
panelTitle.inactiveForeground#8e8e8c
peekView.border#c27759
peekViewEditor.background#f9f9f7
peekViewResult.background#f4f4f2
peekViewResult.selectionBackground#c2775944
peekViewTitle.background#f4f4f2
pickerGroup.border#00000022
pickerGroup.foreground#c27759
progressBar.background#c27759
quickInput.background#f4f4f2
quickInput.foreground#2d2d2b
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#2d2d2b45
scrollbarSlider.background#2d2d2b18
scrollbarSlider.hoverBackground#2d2d2b2e
sideBar.background#f4f4f2
sideBar.border#00000022
sideBar.foreground#2d2d2b
sideBarSectionHeader.background#f4f4f2
sideBarSectionHeader.border#00000022
sideBarSectionHeader.foreground#2d2d2b
sideBarTitle.foreground#2d2d2b
statusBar.background#f4f4f2
statusBar.border#00000022
statusBar.debuggingBackground#ff5f38
statusBar.debuggingForeground#ffffff
statusBar.foreground#8e8e8c
statusBar.noFolderBackground#f4f4f2
tab.activeBackground#f9f9f7
tab.activeBorder#f9f9f7
tab.activeBorderTop#c27759
tab.activeForeground#2d2d2b
tab.border#00000022
tab.inactiveBackground#f4f4f2
tab.inactiveForeground#8e8e8c
terminal.ansiBlack#0d0d0d
terminal.ansiBlue#ff5f38
terminal.ansiBrightBlack#8e8e8c
terminal.ansiBrightBlue#ff5f38
terminal.ansiBrightCyan#ff5f38
terminal.ansiBrightGreen#00c853
terminal.ansiBrightMagenta#2d2d2b
terminal.ansiBrightRed#ff5f38
terminal.ansiBrightWhite#fcfcfc
terminal.ansiBrightYellow#2d2d2b
terminal.ansiCyan#ff5f38
terminal.ansiGreen#00c853
terminal.ansiMagenta#2d2d2b
terminal.ansiRed#ff5f38
terminal.ansiWhite#d9d9d9
terminal.ansiYellow#00c853
terminal.background#f9f9f7
terminal.foreground#2d2d2b
terminal.selectionBackground#c2775944
terminalCursor.foreground#c27759
textBlockQuote.background#f4f4f2
textBlockQuote.border#c27759
textCodeBlock.background#f4f4f2
textLink.activeForeground#ff5f38
textLink.foreground#cc7d5e
titleBar.activeBackground#f4f4f2
titleBar.activeForeground#2d2d2b
titleBar.border#00000022
titleBar.inactiveBackground#f4f4f2
titleBar.inactiveForeground#8e8e8c
tree.inactiveIndentGuidesStroke#2d2d2b18
tree.indentGuidesStroke#2d2d2b3d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8e8e8c	—
string, constant.other.symbol, markup.inline.raw	#00c853	—
constant.numeric, constant.language.boolean, constant.language.null	#ff5f38	—
constant, variable.other.constant	#2d2d2b	—
keyword, storage.type, storage.modifier	#ff5f38	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#2d2d2b	—
variable.parameter, function.parameter	#8e8e8c	—
entity.name.function, support.function, variable.function, meta.function-call	#2d2d2b	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#2d2d2b	—
entity.name.namespace, entity.name.type.namespace	#2d2d2b	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#ff5f38	—
punctuation, meta.brace	#8e8e8c	—
entity.name.tag, punctuation.definition.tag	#ff5f38	—
entity.other.attribute-name	#ff5f38	—
string.regexp, constant.regexp	#ff5f38	—
markup.heading, entity.name.section	#ff5f38	bold
markup.bold, punctuation.definition.bold	#2d2d2b	bold
markup.italic, punctuation.definition.italic	#ff5f38	italic
markup.underline.link, string.other.link	#c27759	underline
markup.inserted	#00c853	—
markup.deleted	#ff5f38	—
markup.changed	#2d2d2b	—
invalid	#ffffff	—

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Ayu 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.activeBorder#e6b450
activityBar.background#0d1017
activityBar.border#1b1f29
activityBar.foreground#5a6378cc
activityBar.inactiveForeground#5a637899
activityBarBadge.background#e6b450
activityBarBadge.foreground#765b24
badge.background#e6b450
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#bfbdb6
breadcrumb.background#10141c
breadcrumb.focusForeground#bfbdb6
breadcrumb.foreground#5a6673
button.background#e6b450
button.foreground#765b24
button.hoverBackground#deae4d
button.secondaryBackground#141821
button.secondaryForeground#bfbdb6
button.secondaryHoverBackground#47526640
checkbox.background#141821
checkbox.border#1b1f29
commandCenter.background#141821
commandCenter.border#1b1f29
commandCenter.foreground#5a6673
debugIcon.continueForeground#70bf56
debugIcon.disconnectForeground#f06b73
debugIcon.pauseForeground#4fbfff
debugIcon.restartForeground#70bf56
debugIcon.startForeground#70bf56
debugIcon.stepIntoForeground#4fbfff
debugIcon.stepOutForeground#4fbfff
debugIcon.stepOverForeground#4fbfff
debugIcon.stopForeground#f06b73
debugToolBar.background#141821
descriptionForeground#5a6378
diffEditor.diagonalFill#5a667326
diffEditor.insertedLineBackground#70bf5618
diffEditor.insertedTextBackground#70bf5630
diffEditor.removedLineBackground#f26d7818
diffEditor.removedTextBackground#f26d7830
disabledForeground#bfbdb666
dropdown.background#141821
dropdown.border#1b1f29
dropdown.foreground#bfbdb6
editor.background#10141c
editor.findMatchBackground#bfbdb666
editor.findMatchHighlightBackground#bfbdb635
editor.findRangeHighlightBackground#e6b45018
editor.foreground#bfbdb6
editor.hoverHighlightBackground#e6b45018
editor.inactiveSelectionBackground#e6b45033
editor.lineHighlightBackground#0d1017
editor.selectionBackground#3388ff40
editor.selectionHighlightBackground#e6b45033
editor.wordHighlightBackground#4fbfff25
editor.wordHighlightStrongBackground#d0a1ff30
editorBracketHighlight.foreground1#f06b73
editorBracketHighlight.foreground2#bfbdb6
editorBracketHighlight.foreground3#70bf56
editorBracketHighlight.foreground4#4fbfff
editorBracketHighlight.foreground5#d0a1ff
editorBracketHighlight.foreground6#59c2ff
editorBracketMatch.background#e6b45022
editorBracketMatch.border#e6b450
editorBracketPairGuide.activeBackground1#e6b450a6
editorBracketPairGuide.activeBackground2#e6b450a6
editorBracketPairGuide.activeBackground3#e6b450a6
editorBracketPairGuide.activeBackground4#e6b450a6
editorBracketPairGuide.activeBackground5#e6b450a6
editorBracketPairGuide.activeBackground6#e6b450a6
editorBracketPairGuide.background1#bfbdb624
editorBracketPairGuide.background2#bfbdb624
editorBracketPairGuide.background3#bfbdb624
editorBracketPairGuide.background4#bfbdb624
editorBracketPairGuide.background5#bfbdb624
editorBracketPairGuide.background6#bfbdb624
editorCursor.foreground#e6b450
editorError.foreground#f06b73
editorGroup.border#1b1f29
editorGroupHeader.tabsBackground#0d1017
editorGroupHeader.tabsBorder#1b1f29
editorGutter.addedBackground#70bf56
editorGutter.deletedBackground#f26d78
editorGutter.modifiedBackground#4fbfff
editorHint.foreground#70bf56
editorHoverWidget.background#141821
editorHoverWidget.border#1b1f29
editorIndentGuide.activeBackground1#e6b450a6
editorIndentGuide.background1#bfbdb624
editorInfo.foreground#4fbfff
editorLineNumber.activeForeground#5a6673
editorLineNumber.foreground#5a6378a6
editorSuggestWidget.background#141821
editorSuggestWidget.border#1b1f29
editorSuggestWidget.selectedBackground#47526640
editorWarning.foreground#fdb04c
editorWhitespace.foreground#bfbdb624
editorWidget.background#141821
editorWidget.border#1b1f29
editorWidget.foreground#bfbdb6
errorForeground#d95757
focusBorder#e6b450
foreground#5a6378
gitDecoration.addedResourceForeground#70bf56
gitDecoration.conflictingResourceForeground#bfbdb6
gitDecoration.deletedResourceForeground#f26d78
gitDecoration.ignoredResourceForeground#5a6378a6
gitDecoration.modifiedResourceForeground#73b8ff
gitDecoration.renamedResourceForeground#d0a1ff
gitDecoration.untrackedResourceForeground#70bf56
icon.foreground#5a6673
input.background#141821
input.border#1b1f29
input.foreground#bfbdb6
input.placeholderForeground#5a6378a6
inputOption.activeBackground#e6b45055
inputOption.activeBorder#e6b450
inputValidation.errorBackground#f06b7322
inputValidation.errorBorder#f06b73
inputValidation.infoBackground#4fbfff22
inputValidation.infoBorder#4fbfff
inputValidation.warningBackground#fdb04c22
inputValidation.warningBorder#fdb04c
list.activeSelectionBackground#e6b45055
list.activeSelectionForeground#bfbdb6
list.errorForeground#f06b73
list.focusBackground#e6b45044
list.highlightForeground#e6b450
list.hoverBackground#47526640
list.inactiveSelectionBackground#e6b45033
list.warningForeground#fdb04c
menu.background#141821
menu.foreground#bfbdb6
menu.selectionBackground#3388ff40
menu.separatorBackground#1b1f29
minimap.background#10141c
minimap.findMatchHighlight#bfbdb680
minimap.selectionHighlight#e6b45066
notificationCenter.border#1b1f29
notificationCenterHeader.background#141821
notifications.background#141821
notifications.border#1b1f29
notifications.foreground#bfbdb6
panel.background#0d1017
panel.border#1b1f29
panelTitle.activeBorder#e6b450
panelTitle.activeForeground#bfbdb6
panelTitle.inactiveForeground#5a6673
peekView.border#e6b450
peekViewEditor.background#10141c
peekViewResult.background#0d1017
peekViewResult.selectionBackground#3388ff40
peekViewTitle.background#141821
pickerGroup.border#1b1f29
pickerGroup.foreground#e6b450
progressBar.background#e6b450
quickInput.background#141821
quickInput.foreground#bfbdb6
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#bfbdb645
scrollbarSlider.background#bfbdb618
scrollbarSlider.hoverBackground#bfbdb62e
sideBar.background#0d1017
sideBar.border#1b1f29
sideBar.foreground#5a6673
sideBarSectionHeader.background#0d1017
sideBarSectionHeader.border#1b1f29
sideBarSectionHeader.foreground#5a6378
sideBarTitle.foreground#5a6378
statusBar.background#0d1017
statusBar.border#1b1f29
statusBar.debuggingBackground#f06b73
statusBar.debuggingForeground#111111
statusBar.foreground#5a6673
statusBar.noFolderBackground#0d1017
tab.activeBackground#10141c
tab.activeBorder#10141c
tab.activeBorderTop#e6b450
tab.activeForeground#bfbdb6
tab.border#1b1f29
tab.inactiveBackground#0d1017
tab.inactiveForeground#5a6673
terminal.ansiBlack#1b1f29
terminal.ansiBlue#4fbfff
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#59c2ff
terminal.ansiBrightCyan#95e6cb
terminal.ansiBrightGreen#aad94c
terminal.ansiBrightMagenta#d2a6ff
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffb454
terminal.ansiCyan#93e2c8
terminal.ansiGreen#70bf56
terminal.ansiMagenta#d0a1ff
terminal.ansiRed#f06b73
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#fdb04c
terminal.background#10141c
terminal.foreground#bfbdb6
terminal.selectionBackground#3388ff40
terminalCursor.foreground#e6b450
textBlockQuote.background#0d1017
textBlockQuote.border#e6b450
textCodeBlock.background#141821
textLink.activeForeground#e6b450
textLink.foreground#e6b450
titleBar.activeBackground#0d1017
titleBar.activeForeground#bfbdb6
titleBar.border#1b1f29
titleBar.inactiveBackground#0d1017
titleBar.inactiveForeground#5a6378a6
tree.inactiveIndentGuidesStroke#bfbdb624
tree.indentGuidesStroke#bfbdb652
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5a6673	—
string, constant.other.symbol, markup.inline.raw	#70bf56	—
constant.numeric, constant.language.boolean, constant.language.null	#4fbfff	—
constant, variable.other.constant	#bfbdb6	—
keyword, storage.type, storage.modifier	#f06b73	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#bfbdb6	—
variable.parameter, function.parameter	#5a6673	—
entity.name.function, support.function, variable.function, meta.function-call	#d0a1ff	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#d0a1ff	—
entity.name.namespace, entity.name.type.namespace	#bfbdb6	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#4fbfff	—
punctuation, meta.brace	#5a6673	—
entity.name.tag, punctuation.definition.tag	#f06b73	—
entity.other.attribute-name	#4fbfff	—
string.regexp, constant.regexp	#59c2ff	—
markup.heading, entity.name.section	#f06b73	bold
markup.bold, punctuation.definition.bold	#bfbdb6	bold
markup.italic, punctuation.definition.italic	#f06b73	italic
markup.underline.link, string.other.link	#e6b450	underline
markup.inserted	#70bf56	—
markup.deleted	#f06b73	—
markup.changed	#bfbdb6	—
invalid	#ffffff	—

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Catppuccin Latte

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#00000000
activityBar.background#dce0e8
activityBar.border#00000000
activityBar.foreground#8839ef
activityBar.inactiveForeground#9ca0b0
activityBarBadge.background#8839ef
activityBarBadge.foreground#dce0e8
badge.background#8839ef
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#4c4f69
breadcrumb.background#eff1f5
breadcrumb.focusForeground#4c4f69
breadcrumb.foreground#7c7f93
button.background#8839ef
button.foreground#dce0e8
button.hoverBackground#9c5af2
button.secondaryBackground#e6e9ef
button.secondaryForeground#4c4f69
button.secondaryHoverBackground#ccd0da80
checkbox.background#e6e9ef
checkbox.border#acb0be
commandCenter.background#e6e9ef
commandCenter.border#acb0be
commandCenter.foreground#7c7f93
debugIcon.continueForeground#40a02b
debugIcon.disconnectForeground#d20f39
debugIcon.pauseForeground#1e66f5
debugIcon.restartForeground#40a02b
debugIcon.startForeground#40a02b
debugIcon.stepIntoForeground#1e66f5
debugIcon.stepOutForeground#1e66f5
debugIcon.stepOverForeground#1e66f5
debugIcon.stopForeground#d20f39
debugToolBar.background#e6e9ef
descriptionForeground#4c4f69
diffEditor.diagonalFill#7c7f9326
diffEditor.insertedLineBackground#40a02b12
diffEditor.insertedTextBackground#40a02b20
diffEditor.removedLineBackground#d20f3912
diffEditor.removedTextBackground#d20f3920
disabledForeground#4c4f6966
dropdown.background#e6e9ef
dropdown.border#acb0be
dropdown.foreground#4c4f69
editor.background#eff1f5
editor.findMatchBackground#4c4f694d
editor.findMatchHighlightBackground#4c4f6926
editor.findRangeHighlightBackground#8839ef18
editor.foreground#4c4f69
editor.hoverHighlightBackground#8839ef18
editor.inactiveSelectionBackground#8839ef1f
editor.lineHighlightBackground#e6e9ef
editor.selectionBackground#7c7f934d
editor.selectionHighlightBackground#8839ef1f
editor.wordHighlightBackground#1e66f518
editor.wordHighlightStrongBackground#ea76cb1f
editorBracketHighlight.foreground1#d20f39
editorBracketHighlight.foreground2#4c4f69
editorBracketHighlight.foreground3#40a02b
editorBracketHighlight.foreground4#1e66f5
editorBracketHighlight.foreground5#ea76cb
editorBracketHighlight.foreground6#456eff
editorBracketMatch.background#8839ef22
editorBracketMatch.border#8839ef
editorBracketPairGuide.activeBackground1#8839ef8c
editorBracketPairGuide.activeBackground2#8839ef8c
editorBracketPairGuide.activeBackground3#8839ef8c
editorBracketPairGuide.activeBackground4#8839ef8c
editorBracketPairGuide.activeBackground5#8839ef8c
editorBracketPairGuide.activeBackground6#8839ef8c
editorBracketPairGuide.background1#4c4f6918
editorBracketPairGuide.background2#4c4f6918
editorBracketPairGuide.background3#4c4f6918
editorBracketPairGuide.background4#4c4f6918
editorBracketPairGuide.background5#4c4f6918
editorBracketPairGuide.background6#4c4f6918
editorCursor.foreground#dc8a78
editorError.foreground#d20f39
editorGroup.border#acb0be
editorGroupHeader.tabsBackground#dce0e8
editorGroupHeader.tabsBorder#acb0be
editorGutter.addedBackground#40a02b
editorGutter.deletedBackground#d20f39
editorGutter.modifiedBackground#1e66f5
editorHint.foreground#40a02b
editorHoverWidget.background#e6e9ef
editorHoverWidget.border#acb0be
editorIndentGuide.activeBackground1#8839ef8c
editorIndentGuide.background1#4c4f6918
editorInfo.foreground#1e66f5
editorLineNumber.activeForeground#7c7f93
editorLineNumber.foreground#8c8fa1
editorSuggestWidget.background#e6e9ef
editorSuggestWidget.border#acb0be
editorSuggestWidget.selectedBackground#ccd0da80
editorWarning.foreground#df8e1d
editorWhitespace.foreground#4c4f6918
editorWidget.background#e6e9ef
editorWidget.border#acb0be
editorWidget.foreground#4c4f69
errorForeground#d20f39
focusBorder#8839ef
foreground#4c4f69
gitDecoration.addedResourceForeground#40a02b
gitDecoration.conflictingResourceForeground#4c4f69
gitDecoration.deletedResourceForeground#d20f39
gitDecoration.ignoredResourceForeground#8c8fa1
gitDecoration.modifiedResourceForeground#df8e1d
gitDecoration.renamedResourceForeground#ea76cb
gitDecoration.untrackedResourceForeground#40a02b
icon.foreground#7c7f93
input.background#e6e9ef
input.border#acb0be
input.foreground#4c4f69
input.placeholderForeground#8c8fa1
inputOption.activeBackground#8839ef22
inputOption.activeBorder#8839ef
inputValidation.errorBackground#d20f3912
inputValidation.errorBorder#d20f39
inputValidation.infoBackground#1e66f512
inputValidation.infoBorder#1e66f5
inputValidation.warningBackground#df8e1d12
inputValidation.warningBorder#df8e1d
list.activeSelectionBackground#8839ef22
list.activeSelectionForeground#4c4f69
list.errorForeground#d20f39
list.focusBackground#8839ef1f
list.highlightForeground#8839ef
list.hoverBackground#ccd0da80
list.inactiveSelectionBackground#8839ef14
list.warningForeground#df8e1d
menu.background#e6e9ef
menu.foreground#4c4f69
menu.selectionBackground#7c7f934d
menu.separatorBackground#acb0be
minimap.background#eff1f5
minimap.findMatchHighlight#4c4f6980
minimap.selectionHighlight#8839ef66
notificationCenter.border#acb0be
notificationCenterHeader.background#e6e9ef
notifications.background#e6e9ef
notifications.border#acb0be
notifications.foreground#4c4f69
panel.background#eff1f5
panel.border#acb0be
panelTitle.activeBorder#8839ef
panelTitle.activeForeground#4c4f69
panelTitle.inactiveForeground#7c7f93
peekView.border#8839ef
peekViewEditor.background#eff1f5
peekViewResult.background#e6e9ef
peekViewResult.selectionBackground#7c7f934d
peekViewTitle.background#e6e9ef
pickerGroup.border#acb0be
pickerGroup.foreground#8839ef
progressBar.background#8839ef
quickInput.background#e6e9ef
quickInput.foreground#4c4f69
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#4c4f6945
scrollbarSlider.background#4c4f6918
scrollbarSlider.hoverBackground#4c4f692e
sideBar.background#e6e9ef
sideBar.border#00000000
sideBar.foreground#4c4f69
sideBarSectionHeader.background#e6e9ef
sideBarSectionHeader.border#acb0be
sideBarSectionHeader.foreground#4c4f69
sideBarTitle.foreground#8839ef
statusBar.background#e6e9ef
statusBar.border#acb0be
statusBar.debuggingBackground#d20f39
statusBar.debuggingForeground#ffffff
statusBar.foreground#7c7f93
statusBar.noFolderBackground#e6e9ef
tab.activeBackground#eff1f5
tab.activeBorder#eff1f5
tab.activeBorderTop#8839ef
tab.activeForeground#4c4f69
tab.border#acb0be
tab.inactiveBackground#e6e9ef
tab.inactiveForeground#7c7f93
terminal.ansiBlack#5c5f77
terminal.ansiBlue#1e66f5
terminal.ansiBrightBlack#6c6f85
terminal.ansiBrightBlue#456eff
terminal.ansiBrightCyan#2d9fa8
terminal.ansiBrightGreen#49af3d
terminal.ansiBrightMagenta#fe85d8
terminal.ansiBrightRed#de293e
terminal.ansiBrightWhite#bcc0cc
terminal.ansiBrightYellow#eea02d
terminal.ansiCyan#179299
terminal.ansiGreen#40a02b
terminal.ansiMagenta#ea76cb
terminal.ansiRed#d20f39
terminal.ansiWhite#acb0be
terminal.ansiYellow#df8e1d
terminal.background#eff1f5
terminal.foreground#4c4f69
terminal.selectionBackground#7c7f934d
terminalCursor.foreground#8839ef
textBlockQuote.background#e6e9ef
textBlockQuote.border#8839ef
textCodeBlock.background#e6e9ef
textLink.activeForeground#04a5e5
textLink.foreground#1e66f5
titleBar.activeBackground#e6e9ef
titleBar.activeForeground#4c4f69
titleBar.border#acb0be
titleBar.inactiveBackground#e6e9ef
titleBar.inactiveForeground#8c8fa1
tree.inactiveIndentGuidesStroke#4c4f6918
tree.indentGuidesStroke#4c4f693d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7c7f93	—
string, constant.other.symbol, markup.inline.raw	#40a02b	—
constant.numeric, constant.language.boolean, constant.language.null	#1e66f5	—
constant, variable.other.constant	#4c4f69	—
keyword, storage.type, storage.modifier	#d20f39	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#4c4f69	—
variable.parameter, function.parameter	#7c7f93	—
entity.name.function, support.function, variable.function, meta.function-call	#ea76cb	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#ea76cb	—
entity.name.namespace, entity.name.type.namespace	#4c4f69	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#1e66f5	—
punctuation, meta.brace	#7c7f93	—
entity.name.tag, punctuation.definition.tag	#d20f39	—
entity.other.attribute-name	#1e66f5	—
string.regexp, constant.regexp	#456eff	—
markup.heading, entity.name.section	#d20f39	bold
markup.bold, punctuation.definition.bold	#4c4f69	bold
markup.italic, punctuation.definition.italic	#d20f39	italic
markup.underline.link, string.other.link	#8839ef	underline
markup.inserted	#40a02b	—
markup.deleted	#d20f39	—
markup.changed	#4c4f69	—
invalid	#ffffff	—