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 — Tokyo Night

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#506aaa
activityBar.background#16161e
activityBar.border#16161e
activityBar.foreground#787c99
activityBar.inactiveForeground#3b3e52
activityBarBadge.background#3d59a1
activityBarBadge.foreground#fff
badge.background#506aaa
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#a9b1d6
breadcrumb.background#1a1b26
breadcrumb.focusForeground#a9b1d6
breadcrumb.foreground#5e668a
button.background#3d59a1dd
button.foreground#ffffff
button.hoverBackground#3d59a1AA
button.secondaryBackground#16161e
button.secondaryForeground#a9b1d6
button.secondaryHoverBackground#13131a
checkbox.background#16161e
checkbox.border#101014
commandCenter.background#16161e
commandCenter.border#101014
commandCenter.foreground#5e668a
debugIcon.continueForeground#73daca
debugIcon.disconnectForeground#f7768e
debugIcon.pauseForeground#7aa2f7
debugIcon.restartForeground#73daca
debugIcon.startForeground#73daca
debugIcon.stepIntoForeground#7aa2f7
debugIcon.stepOutForeground#7aa2f7
debugIcon.stepOverForeground#7aa2f7
debugIcon.stopForeground#f7768e
debugToolBar.background#16161e
descriptionForeground#515670
diffEditor.diagonalFill#5e668a26
diffEditor.insertedLineBackground#449dab18
diffEditor.insertedTextBackground#449dab30
diffEditor.removedLineBackground#914c5418
diffEditor.removedTextBackground#914c5430
disabledForeground#a9b1d666
dropdown.background#16161e
dropdown.border#101014
dropdown.foreground#a9b1d6
editor.background#1a1b26
editor.findMatchBackground#c0caf566
editor.findMatchHighlightBackground#c0caf535
editor.findRangeHighlightBackground#506aaa18
editor.foreground#a9b1d6
editor.hoverHighlightBackground#506aaa18
editor.inactiveSelectionBackground#506aaa33
editor.lineHighlightBackground#16161e
editor.selectionBackground#515c7e4d
editor.selectionHighlightBackground#506aaa33
editor.wordHighlightBackground#7aa2f725
editor.wordHighlightStrongBackground#bb9af730
editorBracketHighlight.foreground1#f7768e
editorBracketHighlight.foreground2#c0caf5
editorBracketHighlight.foreground3#73daca
editorBracketHighlight.foreground4#7aa2f7
editorBracketHighlight.foreground5#bb9af7
editorBracketHighlight.foreground6#7aa2f7
editorBracketMatch.background#506aaa22
editorBracketMatch.border#506aaa
editorBracketPairGuide.activeBackground1#506aaaa6
editorBracketPairGuide.activeBackground2#506aaaa6
editorBracketPairGuide.activeBackground3#506aaaa6
editorBracketPairGuide.activeBackground4#506aaaa6
editorBracketPairGuide.activeBackground5#506aaaa6
editorBracketPairGuide.activeBackground6#506aaaa6
editorBracketPairGuide.background1#a9b1d624
editorBracketPairGuide.background2#a9b1d624
editorBracketPairGuide.background3#a9b1d624
editorBracketPairGuide.background4#a9b1d624
editorBracketPairGuide.background5#a9b1d624
editorBracketPairGuide.background6#a9b1d624
editorCursor.foreground#c0caf5
editorError.foreground#f7768e
editorGroup.border#101014
editorGroupHeader.tabsBackground#16161e
editorGroupHeader.tabsBorder#101014
editorGutter.addedBackground#449dab
editorGutter.deletedBackground#914c54
editorGutter.modifiedBackground#7aa2f7
editorHint.foreground#73daca
editorHoverWidget.background#16161e
editorHoverWidget.border#101014
editorIndentGuide.activeBackground1#506aaaa6
editorIndentGuide.background1#a9b1d624
editorInfo.foreground#7aa2f7
editorLineNumber.activeForeground#5e668a
editorLineNumber.foreground#363b54
editorSuggestWidget.background#16161e
editorSuggestWidget.border#101014
editorSuggestWidget.selectedBackground#13131a
editorWarning.foreground#e0af68
editorWhitespace.foreground#a9b1d624
editorWidget.background#16161e
editorWidget.border#101014
editorWidget.foreground#a9b1d6
errorForeground#515670
focusBorder#545c7e33
foreground#787c99
gitDecoration.addedResourceForeground#449dab
gitDecoration.conflictingResourceForeground#c0caf5
gitDecoration.deletedResourceForeground#914c54
gitDecoration.ignoredResourceForeground#363b54
gitDecoration.modifiedResourceForeground#6183bb
gitDecoration.renamedResourceForeground#bb9af7
gitDecoration.untrackedResourceForeground#449dab
icon.foreground#5e668a
input.background#16161e
input.border#101014
input.foreground#a9b1d6
input.placeholderForeground#363b54
inputOption.activeBackground#506aaa55
inputOption.activeBorder#506aaa
inputValidation.errorBackground#f7768e22
inputValidation.errorBorder#f7768e
inputValidation.infoBackground#7aa2f722
inputValidation.infoBorder#7aa2f7
inputValidation.warningBackground#e0af6822
inputValidation.warningBorder#e0af68
list.activeSelectionBackground#506aaa55
list.activeSelectionForeground#a9b1d6
list.errorForeground#f7768e
list.focusBackground#506aaa44
list.highlightForeground#506aaa
list.hoverBackground#13131a
list.inactiveSelectionBackground#506aaa33
list.warningForeground#e0af68
menu.background#16161e
menu.foreground#a9b1d6
menu.selectionBackground#515c7e4d
menu.separatorBackground#101014
minimap.background#1a1b26
minimap.findMatchHighlight#c0caf580
minimap.selectionHighlight#506aaa66
notificationCenter.border#101014
notificationCenterHeader.background#16161e
notifications.background#16161e
notifications.border#101014
notifications.foreground#a9b1d6
panel.background#16161e
panel.border#101014
panelTitle.activeBorder#506aaa
panelTitle.activeForeground#a9b1d6
panelTitle.inactiveForeground#5e668a
peekView.border#506aaa
peekViewEditor.background#1a1b26
peekViewResult.background#16161e
peekViewResult.selectionBackground#515c7e4d
peekViewTitle.background#16161e
pickerGroup.border#101014
pickerGroup.foreground#506aaa
progressBar.background#506aaa
quickInput.background#16161e
quickInput.foreground#a9b1d6
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#a9b1d645
scrollbarSlider.background#a9b1d618
scrollbarSlider.hoverBackground#a9b1d62e
sideBar.background#16161e
sideBar.border#101014
sideBar.foreground#787c99
sideBarSectionHeader.background#16161e
sideBarSectionHeader.border#101014
sideBarSectionHeader.foreground#a9b1d6
sideBarTitle.foreground#787c99
statusBar.background#16161e
statusBar.border#101014
statusBar.debuggingBackground#f7768e
statusBar.debuggingForeground#111111
statusBar.foreground#5e668a
statusBar.noFolderBackground#16161e
tab.activeBackground#1a1b26
tab.activeBorder#1a1b26
tab.activeBorderTop#506aaa
tab.activeForeground#a9b1d6
tab.border#101014
tab.inactiveBackground#16161e
tab.inactiveForeground#5e668a
terminal.ansiBlack#363b54
terminal.ansiBlue#7aa2f7
terminal.ansiBrightBlack#363b54
terminal.ansiBrightBlue#7aa2f7
terminal.ansiBrightCyan#7dcfff
terminal.ansiBrightGreen#73daca
terminal.ansiBrightMagenta#bb9af7
terminal.ansiBrightRed#f7768e
terminal.ansiBrightWhite#acb0d0
terminal.ansiBrightYellow#e0af68
terminal.ansiCyan#7dcfff
terminal.ansiGreen#73daca
terminal.ansiMagenta#bb9af7
terminal.ansiRed#f7768e
terminal.ansiWhite#787c99
terminal.ansiYellow#e0af68
terminal.background#1a1b26
terminal.foreground#a9b1d6
terminal.selectionBackground#515c7e4d
terminalCursor.foreground#506aaa
textBlockQuote.background#16161e
textBlockQuote.border#506aaa
textCodeBlock.background#16161e
textLink.activeForeground#7dcfff
textLink.foreground#6183bb
titleBar.activeBackground#16161e
titleBar.activeForeground#a9b1d6
titleBar.border#101014
titleBar.inactiveBackground#16161e
titleBar.inactiveForeground#363b54
tree.inactiveIndentGuidesStroke#a9b1d624
tree.indentGuidesStroke#a9b1d652
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5e668a	—
string, constant.other.symbol, markup.inline.raw	#73daca	—
constant.numeric, constant.language.boolean, constant.language.null	#7aa2f7	—
constant, variable.other.constant	#c0caf5	—
keyword, storage.type, storage.modifier	#f7768e	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#c0caf5	—
variable.parameter, function.parameter	#5e668a	—
entity.name.function, support.function, variable.function, meta.function-call	#bb9af7	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#bb9af7	—
entity.name.namespace, entity.name.type.namespace	#c0caf5	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#7aa2f7	—
punctuation, meta.brace	#5e668a	—
entity.name.tag, punctuation.definition.tag	#f7768e	—
entity.other.attribute-name	#7aa2f7	—
string.regexp, constant.regexp	#7aa2f7	—
markup.heading, entity.name.section	#f7768e	bold
markup.bold, punctuation.definition.bold	#c0caf5	bold
markup.italic, punctuation.definition.italic	#f7768e	italic
markup.underline.link, string.other.link	#506aaa	underline
markup.inserted	#73daca	—
markup.deleted	#f7768e	—
markup.changed	#c0caf5	—
invalid	#ffffff	—

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Vercel 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#006efe
activityBar.background#000000
activityBar.border#ffffff22
activityBar.foreground#ededed
activityBar.inactiveForeground#666666
activityBarBadge.background#006efe
activityBarBadge.foreground#ffffff
badge.background#006efe
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#ededed
breadcrumb.background#000000
breadcrumb.focusForeground#ededed
breadcrumb.foreground#666666
button.background#006efe
button.foreground#ffffff
button.hoverBackground#9540D5
button.secondaryBackground#000000
button.secondaryForeground#ededed
button.secondaryHoverBackground#000000
checkbox.background#000000
checkbox.border#ffffff22
commandCenter.background#000000
commandCenter.border#ffffff22
commandCenter.foreground#666666
debugIcon.continueForeground#00AD3A
debugIcon.disconnectForeground#006efe
debugIcon.pauseForeground#9540D5
debugIcon.restartForeground#00AD3A
debugIcon.startForeground#00AD3A
debugIcon.stepIntoForeground#9540D5
debugIcon.stepOutForeground#9540D5
debugIcon.stepOverForeground#9540D5
debugIcon.stopForeground#006efe
debugToolBar.background#000000
descriptionForeground#666666
diffEditor.diagonalFill#66666626
diffEditor.insertedLineBackground#00AD3A18
diffEditor.insertedTextBackground#00AD3A30
diffEditor.removedLineBackground#006efe18
diffEditor.removedTextBackground#006efe30
disabledForeground#ededed66
dropdown.background#000000
dropdown.border#ffffff22
dropdown.foreground#ededed
editor.background#000000
editor.findMatchBackground#ededed66
editor.findMatchHighlightBackground#ededed35
editor.findRangeHighlightBackground#006efe18
editor.foreground#ededed
editor.hoverHighlightBackground#006efe18
editor.inactiveSelectionBackground#006efe33
editor.lineHighlightBackground#000000
editor.selectionBackground#006efe44
editor.selectionHighlightBackground#006efe33
editor.wordHighlightBackground#9540D525
editor.wordHighlightStrongBackground#9540D530
editorBracketHighlight.foreground1#006efe
editorBracketHighlight.foreground2#ededed
editorBracketHighlight.foreground3#00AD3A
editorBracketHighlight.foreground4#9540D5
editorBracketHighlight.foreground5#9540D5
editorBracketHighlight.foreground6#9540D5
editorBracketMatch.background#006efe22
editorBracketMatch.border#006efe
editorBracketPairGuide.activeBackground1#006efea6
editorBracketPairGuide.activeBackground2#006efea6
editorBracketPairGuide.activeBackground3#006efea6
editorBracketPairGuide.activeBackground4#006efea6
editorBracketPairGuide.activeBackground5#006efea6
editorBracketPairGuide.activeBackground6#006efea6
editorBracketPairGuide.background1#ededed24
editorBracketPairGuide.background2#ededed24
editorBracketPairGuide.background3#ededed24
editorBracketPairGuide.background4#ededed24
editorBracketPairGuide.background5#ededed24
editorBracketPairGuide.background6#ededed24
editorCursor.foreground#006efe
editorError.foreground#006efe
editorGroup.border#ffffff22
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#ffffff22
editorGutter.addedBackground#00AD3A
editorGutter.deletedBackground#006efe
editorGutter.modifiedBackground#9540D5
editorHint.foreground#00AD3A
editorHoverWidget.background#000000
editorHoverWidget.border#ffffff22
editorIndentGuide.activeBackground1#006efea6
editorIndentGuide.background1#ededed24
editorInfo.foreground#9540D5
editorLineNumber.activeForeground#666666
editorLineNumber.foreground#666666
editorSuggestWidget.background#000000
editorSuggestWidget.border#ffffff22
editorSuggestWidget.selectedBackground#000000
editorWarning.foreground#00AD3A
editorWhitespace.foreground#ededed24
editorWidget.background#000000
editorWidget.border#ffffff22
editorWidget.foreground#ededed
errorForeground#006efe
focusBorder#006efe
foreground#ededed
gitDecoration.addedResourceForeground#00AD3A
gitDecoration.conflictingResourceForeground#ededed
gitDecoration.deletedResourceForeground#006efe
gitDecoration.ignoredResourceForeground#666666
gitDecoration.modifiedResourceForeground#9540D5
gitDecoration.renamedResourceForeground#9540D5
gitDecoration.untrackedResourceForeground#00AD3A
icon.foreground#666666
input.background#000000
input.border#ffffff22
input.foreground#ededed
input.placeholderForeground#666666
inputOption.activeBackground#006efe55
inputOption.activeBorder#006efe
inputValidation.errorBackground#006efe22
inputValidation.errorBorder#006efe
inputValidation.infoBackground#9540D522
inputValidation.infoBorder#9540D5
inputValidation.warningBackground#00AD3A22
inputValidation.warningBorder#00AD3A
list.activeSelectionBackground#006efe55
list.activeSelectionForeground#ededed
list.errorForeground#006efe
list.focusBackground#006efe44
list.highlightForeground#006efe
list.hoverBackground#000000
list.inactiveSelectionBackground#006efe33
list.warningForeground#00AD3A
menu.background#000000
menu.foreground#ededed
menu.selectionBackground#006efe44
menu.separatorBackground#ffffff22
minimap.background#000000
minimap.findMatchHighlight#ededed80
minimap.selectionHighlight#006efe66
notificationCenter.border#ffffff22
notificationCenterHeader.background#000000
notifications.background#000000
notifications.border#ffffff22
notifications.foreground#ededed
panel.background#000000
panel.border#ffffff22
panelTitle.activeBorder#006efe
panelTitle.activeForeground#ededed
panelTitle.inactiveForeground#666666
peekView.border#006efe
peekViewEditor.background#000000
peekViewResult.background#000000
peekViewResult.selectionBackground#006efe44
peekViewTitle.background#000000
pickerGroup.border#ffffff22
pickerGroup.foreground#006efe
progressBar.background#006efe
quickInput.background#000000
quickInput.foreground#ededed
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#ededed45
scrollbarSlider.background#ededed18
scrollbarSlider.hoverBackground#ededed2e
sideBar.background#000000
sideBar.border#ffffff22
sideBar.foreground#a1a1a1
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#ffffff22
sideBarSectionHeader.foreground#ededed
sideBarTitle.foreground#ededed
statusBar.background#000000
statusBar.border#ffffff22
statusBar.debuggingBackground#006efe
statusBar.debuggingForeground#111111
statusBar.foreground#666666
statusBar.noFolderBackground#000000
tab.activeBackground#000000
tab.activeBorder#000000
tab.activeBorderTop#006efe
tab.activeForeground#ededed
tab.border#ffffff22
tab.inactiveBackground#000000
tab.inactiveForeground#666666
terminal.ansiBlack#111111
terminal.ansiBlue#9540D5
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#9540D5
terminal.ansiBrightCyan#9540D5
terminal.ansiBrightGreen#00AD3A
terminal.ansiBrightMagenta#9540D5
terminal.ansiBrightRed#006efe
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ededed
terminal.ansiCyan#9540D5
terminal.ansiGreen#00AD3A
terminal.ansiMagenta#9540D5
terminal.ansiRed#006efe
terminal.ansiWhite#d6d6d6
terminal.ansiYellow#00AD3A
terminal.background#000000
terminal.foreground#ededed
terminal.selectionBackground#006efe44
terminalCursor.foreground#006efe
textBlockQuote.background#000000
textBlockQuote.border#006efe
textCodeBlock.background#000000
textLink.activeForeground#9540D5
textLink.foreground#006efe
titleBar.activeBackground#000000
titleBar.activeForeground#ededed
titleBar.border#ffffff22
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#666666
tree.inactiveIndentGuidesStroke#ededed24
tree.indentGuidesStroke#ededed52
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Vercel 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#006aff
activityBar.background#ffffff
activityBar.border#00000022
activityBar.foreground#171717
activityBar.inactiveForeground#666666
activityBarBadge.background#006aff
activityBarBadge.foreground#ffffff
badge.background#006aff
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#171717
breadcrumb.background#ffffff
breadcrumb.focusForeground#171717
breadcrumb.foreground#666666
button.background#006aff
button.foreground#ffffff
button.hoverBackground#A100F8
button.secondaryBackground#ffffff
button.secondaryForeground#171717
button.secondaryHoverBackground#ffffff
checkbox.background#ffffff
checkbox.border#00000022
commandCenter.background#ffffff
commandCenter.border#00000022
commandCenter.foreground#666666
debugIcon.continueForeground#28A948
debugIcon.disconnectForeground#006aff
debugIcon.pauseForeground#A100F8
debugIcon.restartForeground#28A948
debugIcon.startForeground#28A948
debugIcon.stepIntoForeground#A100F8
debugIcon.stepOutForeground#A100F8
debugIcon.stepOverForeground#A100F8
debugIcon.stopForeground#006aff
debugToolBar.background#ffffff
descriptionForeground#666666
diffEditor.diagonalFill#66666626
diffEditor.insertedLineBackground#28A94812
diffEditor.insertedTextBackground#28A94820
diffEditor.removedLineBackground#006aff12
diffEditor.removedTextBackground#006aff20
disabledForeground#17171766
dropdown.background#ffffff
dropdown.border#00000022
dropdown.foreground#171717
editor.background#ffffff
editor.findMatchBackground#1717174d
editor.findMatchHighlightBackground#17171726
editor.findRangeHighlightBackground#006aff18
editor.foreground#171717
editor.hoverHighlightBackground#006aff18
editor.inactiveSelectionBackground#006aff1f
editor.lineHighlightBackground#ffffff
editor.selectionBackground#006aff44
editor.selectionHighlightBackground#006aff1f
editor.wordHighlightBackground#A100F818
editor.wordHighlightStrongBackground#A100F81f
editorBracketHighlight.foreground1#006aff
editorBracketHighlight.foreground2#171717
editorBracketHighlight.foreground3#28A948
editorBracketHighlight.foreground4#A100F8
editorBracketHighlight.foreground5#A100F8
editorBracketHighlight.foreground6#A100F8
editorBracketMatch.background#006aff22
editorBracketMatch.border#006aff
editorBracketPairGuide.activeBackground1#006aff8c
editorBracketPairGuide.activeBackground2#006aff8c
editorBracketPairGuide.activeBackground3#006aff8c
editorBracketPairGuide.activeBackground4#006aff8c
editorBracketPairGuide.activeBackground5#006aff8c
editorBracketPairGuide.activeBackground6#006aff8c
editorBracketPairGuide.background1#17171718
editorBracketPairGuide.background2#17171718
editorBracketPairGuide.background3#17171718
editorBracketPairGuide.background4#17171718
editorBracketPairGuide.background5#17171718
editorBracketPairGuide.background6#17171718
editorCursor.foreground#006aff
editorError.foreground#006aff
editorGroup.border#00000022
editorGroupHeader.tabsBackground#ffffff
editorGroupHeader.tabsBorder#00000022
editorGutter.addedBackground#28A948
editorGutter.deletedBackground#006aff
editorGutter.modifiedBackground#A100F8
editorHint.foreground#28A948
editorHoverWidget.background#ffffff
editorHoverWidget.border#00000022
editorIndentGuide.activeBackground1#006aff8c
editorIndentGuide.background1#17171718
editorInfo.foreground#A100F8
editorLineNumber.activeForeground#666666
editorLineNumber.foreground#666666
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#00000022
editorSuggestWidget.selectedBackground#ffffff
editorWarning.foreground#28A948
editorWhitespace.foreground#17171718
editorWidget.background#ffffff
editorWidget.border#00000022
editorWidget.foreground#171717
errorForeground#006aff
focusBorder#006aff
foreground#171717
gitDecoration.addedResourceForeground#28A948
gitDecoration.conflictingResourceForeground#171717
gitDecoration.deletedResourceForeground#006aff
gitDecoration.ignoredResourceForeground#666666
gitDecoration.modifiedResourceForeground#A100F8
gitDecoration.renamedResourceForeground#A100F8
gitDecoration.untrackedResourceForeground#28A948
icon.foreground#666666
input.background#ffffff
input.border#00000022
input.foreground#171717
input.placeholderForeground#666666
inputOption.activeBackground#006aff22
inputOption.activeBorder#006aff
inputValidation.errorBackground#006aff12
inputValidation.errorBorder#006aff
inputValidation.infoBackground#A100F812
inputValidation.infoBorder#A100F8
inputValidation.warningBackground#28A94812
inputValidation.warningBorder#28A948
list.activeSelectionBackground#006aff22
list.activeSelectionForeground#171717
list.errorForeground#006aff
list.focusBackground#006aff1f
list.highlightForeground#006aff
list.hoverBackground#ffffff
list.inactiveSelectionBackground#006aff14
list.warningForeground#28A948
menu.background#ffffff
menu.foreground#171717
menu.selectionBackground#006aff44
menu.separatorBackground#00000022
minimap.background#ffffff
minimap.findMatchHighlight#17171780
minimap.selectionHighlight#006aff66
notificationCenter.border#00000022
notificationCenterHeader.background#ffffff
notifications.background#ffffff
notifications.border#00000022
notifications.foreground#171717
panel.background#ffffff
panel.border#00000022
panelTitle.activeBorder#006aff
panelTitle.activeForeground#171717
panelTitle.inactiveForeground#666666
peekView.border#006aff
peekViewEditor.background#ffffff
peekViewResult.background#ffffff
peekViewResult.selectionBackground#006aff44
peekViewTitle.background#ffffff
pickerGroup.border#00000022
pickerGroup.foreground#006aff
progressBar.background#006aff
quickInput.background#ffffff
quickInput.foreground#171717
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#17171745
scrollbarSlider.background#17171718
scrollbarSlider.hoverBackground#1717172e
sideBar.background#ffffff
sideBar.border#00000022
sideBar.foreground#666666
sideBarSectionHeader.background#ffffff
sideBarSectionHeader.border#00000022
sideBarSectionHeader.foreground#171717
sideBarTitle.foreground#171717
statusBar.background#ffffff
statusBar.border#00000022
statusBar.debuggingBackground#006aff
statusBar.debuggingForeground#ffffff
statusBar.foreground#666666
statusBar.noFolderBackground#ffffff
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#006aff
tab.activeForeground#171717
tab.border#00000022
tab.inactiveBackground#ffffff
tab.inactiveForeground#666666
terminal.ansiBlack#0d0d0d
terminal.ansiBlue#A100F8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#A100F8
terminal.ansiBrightCyan#A100F8
terminal.ansiBrightGreen#28A948
terminal.ansiBrightMagenta#A100F8
terminal.ansiBrightRed#006aff
terminal.ansiBrightWhite#fcfcfc
terminal.ansiBrightYellow#171717
terminal.ansiCyan#A100F8
terminal.ansiGreen#28A948
terminal.ansiMagenta#A100F8
terminal.ansiRed#006aff
terminal.ansiWhite#d9d9d9
terminal.ansiYellow#28A948
terminal.background#ffffff
terminal.foreground#171717
terminal.selectionBackground#006aff44
terminalCursor.foreground#006aff
textBlockQuote.background#ffffff
textBlockQuote.border#006aff
textCodeBlock.background#ffffff
textLink.activeForeground#A100F8
textLink.foreground#006aff
titleBar.activeBackground#ffffff
titleBar.activeForeground#171717
titleBar.border#00000022
titleBar.inactiveBackground#ffffff
titleBar.inactiveForeground#666666
tree.inactiveIndentGuidesStroke#17171718
tree.indentGuidesStroke#1717173d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — VS Code Plus 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#58a6ff
activityBar.background#1E1E1E
activityBar.border#ffffff22
activityBar.foreground#D4D4D4
activityBar.inactiveForeground#A6A6A6
activityBarBadge.background#007ACC
activityBarBadge.foreground#ffffff
badge.background#58a6ff
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#D4D4D4
breadcrumb.background#1E1E1E
breadcrumb.focusForeground#D4D4D4
breadcrumb.foreground#6A9955
button.background#58a6ff
button.foreground#ffffff
button.hoverBackground#d16969
button.secondaryBackground#1E1E1E
button.secondaryForeground#D4D4D4
button.secondaryHoverBackground#1E1E1E
checkbox.background#1E1E1E
checkbox.border#ffffff22
commandCenter.background#1E1E1E
commandCenter.border#ffffff22
commandCenter.foreground#6A9955
debugIcon.continueForeground#ce9178
debugIcon.disconnectForeground#569cd6
debugIcon.pauseForeground#b5cea8
debugIcon.restartForeground#ce9178
debugIcon.startForeground#ce9178
debugIcon.stepIntoForeground#b5cea8
debugIcon.stepOutForeground#b5cea8
debugIcon.stepOverForeground#b5cea8
debugIcon.stopForeground#569cd6
debugToolBar.background#1E1E1E
descriptionForeground#6A9955
diffEditor.diagonalFill#6A995526
diffEditor.insertedLineBackground#ce917818
diffEditor.insertedTextBackground#ce917830
diffEditor.removedLineBackground#569cd618
diffEditor.removedTextBackground#569cd630
disabledForeground#D4D4D466
dropdown.background#1E1E1E
dropdown.border#ffffff22
dropdown.foreground#D4D4D4
editor.background#1E1E1E
editor.findMatchBackground#9CDCFE66
editor.findMatchHighlightBackground#9CDCFE35
editor.findRangeHighlightBackground#58a6ff18
editor.foreground#D4D4D4
editor.hoverHighlightBackground#58a6ff18
editor.inactiveSelectionBackground#58a6ff33
editor.lineHighlightBackground#1E1E1E
editor.selectionBackground#58a6ff44
editor.selectionHighlightBackground#58a6ff33
editor.wordHighlightBackground#b5cea825
editor.wordHighlightStrongBackground#DCDCAA30
editorBracketHighlight.foreground1#569cd6
editorBracketHighlight.foreground2#9CDCFE
editorBracketHighlight.foreground3#ce9178
editorBracketHighlight.foreground4#b5cea8
editorBracketHighlight.foreground5#DCDCAA
editorBracketHighlight.foreground6#d16969
editorBracketMatch.background#58a6ff22
editorBracketMatch.border#58a6ff
editorBracketPairGuide.activeBackground1#58a6ffa6
editorBracketPairGuide.activeBackground2#58a6ffa6
editorBracketPairGuide.activeBackground3#58a6ffa6
editorBracketPairGuide.activeBackground4#58a6ffa6
editorBracketPairGuide.activeBackground5#58a6ffa6
editorBracketPairGuide.activeBackground6#58a6ffa6
editorBracketPairGuide.background1#D4D4D424
editorBracketPairGuide.background2#D4D4D424
editorBracketPairGuide.background3#D4D4D424
editorBracketPairGuide.background4#D4D4D424
editorBracketPairGuide.background5#D4D4D424
editorBracketPairGuide.background6#D4D4D424
editorCursor.foreground#58a6ff
editorError.foreground#569cd6
editorGroup.border#ffffff22
editorGroupHeader.tabsBackground#1E1E1E
editorGroupHeader.tabsBorder#ffffff22
editorGutter.addedBackground#ce9178
editorGutter.deletedBackground#569cd6
editorGutter.modifiedBackground#b5cea8
editorHint.foreground#ce9178
editorHoverWidget.background#1E1E1E
editorHoverWidget.border#ffffff22
editorIndentGuide.activeBackground1#58a6ffa6
editorIndentGuide.background1#D4D4D424
editorInfo.foreground#b5cea8
editorLineNumber.activeForeground#6A9955
editorLineNumber.foreground#A6A6A6
editorSuggestWidget.background#1E1E1E
editorSuggestWidget.border#ffffff22
editorSuggestWidget.selectedBackground#1E1E1E
editorWarning.foreground#569cd6
editorWhitespace.foreground#D4D4D424
editorWidget.background#1E1E1E
editorWidget.border#ffffff22
editorWidget.foreground#D4D4D4
errorForeground#569cd6
focusBorder#58a6ff
foreground#D4D4D4
gitDecoration.addedResourceForeground#ce9178
gitDecoration.conflictingResourceForeground#9CDCFE
gitDecoration.deletedResourceForeground#569cd6
gitDecoration.ignoredResourceForeground#A6A6A6
gitDecoration.modifiedResourceForeground#b5cea8
gitDecoration.renamedResourceForeground#DCDCAA
gitDecoration.untrackedResourceForeground#ce9178
icon.foreground#6A9955
input.background#1E1E1E
input.border#ffffff22
input.foreground#D4D4D4
input.placeholderForeground#A6A6A6
inputOption.activeBackground#58a6ff55
inputOption.activeBorder#58a6ff
inputValidation.errorBackground#569cd622
inputValidation.errorBorder#569cd6
inputValidation.infoBackground#b5cea822
inputValidation.infoBorder#b5cea8
inputValidation.warningBackground#569cd622
inputValidation.warningBorder#569cd6
list.activeSelectionBackground#58a6ff55
list.activeSelectionForeground#D4D4D4
list.errorForeground#569cd6
list.focusBackground#58a6ff44
list.highlightForeground#58a6ff
list.hoverBackground#1E1E1E
list.inactiveSelectionBackground#58a6ff33
list.warningForeground#569cd6
menu.background#1E1E1E
menu.foreground#D4D4D4
menu.selectionBackground#58a6ff44
menu.separatorBackground#ffffff22
minimap.background#1E1E1E
minimap.findMatchHighlight#9CDCFE80
minimap.selectionHighlight#58a6ff66
notificationCenter.border#ffffff22
notificationCenterHeader.background#1E1E1E
notifications.background#1E1E1E
notifications.border#ffffff22
notifications.foreground#D4D4D4
panel.background#1E1E1E
panel.border#ffffff22
panelTitle.activeBorder#58a6ff
panelTitle.activeForeground#D4D4D4
panelTitle.inactiveForeground#6A9955
peekView.border#58a6ff
peekViewEditor.background#1E1E1E
peekViewResult.background#1E1E1E
peekViewResult.selectionBackground#58a6ff44
peekViewTitle.background#1E1E1E
pickerGroup.border#ffffff22
pickerGroup.foreground#58a6ff
progressBar.background#58a6ff
quickInput.background#1E1E1E
quickInput.foreground#D4D4D4
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#D4D4D445
scrollbarSlider.background#D4D4D418
scrollbarSlider.hoverBackground#D4D4D42e
sideBar.background#1E1E1E
sideBar.border#ffffff22
sideBar.foreground#6A9955
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#ccc3
sideBarSectionHeader.foreground#D4D4D4
sideBarTitle.foreground#BBBBBB
statusBar.background#1E1E1E
statusBar.border#ffffff22
statusBar.debuggingBackground#569cd6
statusBar.debuggingForeground#111111
statusBar.foreground#6A9955
statusBar.noFolderBackground#1E1E1E
tab.activeBackground#1E1E1E
tab.activeBorder#1E1E1E
tab.activeBorderTop#58a6ff
tab.activeForeground#D4D4D4
tab.border#ffffff22
tab.inactiveBackground#1E1E1E
tab.inactiveForeground#6A9955
terminal.ansiBlack#111111
terminal.ansiBlue#b5cea8
terminal.ansiBrightBlack#A6A6A6
terminal.ansiBrightBlue#d16969
terminal.ansiBrightCyan#b5cea8
terminal.ansiBrightGreen#ce9178
terminal.ansiBrightMagenta#DCDCAA
terminal.ansiBrightRed#569cd6
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#9CDCFE
terminal.ansiCyan#d16969
terminal.ansiGreen#ce9178
terminal.ansiMagenta#DCDCAA
terminal.ansiRed#569cd6
terminal.ansiWhite#d6d6d6
terminal.ansiYellow#569cd6
terminal.background#1E1E1E
terminal.foreground#D4D4D4
terminal.selectionBackground#58a6ff44
terminalCursor.foreground#58a6ff
textBlockQuote.background#1E1E1E
textBlockQuote.border#58a6ff
textCodeBlock.background#1E1E1E
textLink.activeForeground#d16969
textLink.foreground#58a6ff
titleBar.activeBackground#1E1E1E
titleBar.activeForeground#D4D4D4
titleBar.border#ffffff22
titleBar.inactiveBackground#1E1E1E
titleBar.inactiveForeground#A6A6A6
tree.inactiveIndentGuidesStroke#D4D4D424
tree.indentGuidesStroke#D4D4D452
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6A9955	—
string, constant.other.symbol, markup.inline.raw	#ce9178	—
constant.numeric, constant.language.boolean, constant.language.null	#b5cea8	—
constant, variable.other.constant	#9CDCFE	—
keyword, storage.type, storage.modifier	#569cd6	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#9CDCFE	—
variable.parameter, function.parameter	#6A9955	—
entity.name.function, support.function, variable.function, meta.function-call	#DCDCAA	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#DCDCAA	—
entity.name.namespace, entity.name.type.namespace	#9CDCFE	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#b5cea8	—
punctuation, meta.brace	#6A9955	—
entity.name.tag, punctuation.definition.tag	#569cd6	—
entity.other.attribute-name	#b5cea8	—
string.regexp, constant.regexp	#d16969	—
markup.heading, entity.name.section	#569cd6	bold
markup.bold, punctuation.definition.bold	#9CDCFE	bold
markup.italic, punctuation.definition.italic	#569cd6	italic
markup.underline.link, string.other.link	#58a6ff	underline
markup.inserted	#ce9178	—
markup.deleted	#569cd6	—
markup.changed	#9CDCFE	—
invalid	#ffffff	—