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 — One 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#70757f
activityBar.background#282c34
activityBar.border#3e4452
activityBar.foreground#d7dae0
activityBar.inactiveForeground#495162
activityBarBadge.background#4d78cc
activityBarBadge.foreground#f8fafd
badge.background#70757f
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#abb2bf
breadcrumb.background#282c34
breadcrumb.focusForeground#abb2bf
breadcrumb.foreground#abb2bf
button.background#404754
button.foreground#ffffff
button.hoverBackground#4dc4ff
button.secondaryBackground#21252b
button.secondaryForeground#abb2bf
button.secondaryHoverBackground#2c313a
checkbox.background#21252b
checkbox.border#3e4452
commandCenter.background#21252b
commandCenter.border#3e4452
commandCenter.foreground#abb2bf
debugIcon.continueForeground#8cc265
debugIcon.disconnectForeground#e05561
debugIcon.pauseForeground#4aa5f0
debugIcon.restartForeground#8cc265
debugIcon.startForeground#8cc265
debugIcon.stepIntoForeground#4aa5f0
debugIcon.stepOutForeground#4aa5f0
debugIcon.stepOverForeground#4aa5f0
debugIcon.stopForeground#e05561
debugToolBar.background#21252b
descriptionForeground#abb2bf
diffEditor.diagonalFill#abb2bf26
diffEditor.insertedLineBackground#10986818
diffEditor.insertedTextBackground#10986830
diffEditor.removedLineBackground#9A353D18
diffEditor.removedTextBackground#9A353D30
disabledForeground#abb2bf66
dropdown.background#21252b
dropdown.border#3e4452
dropdown.foreground#abb2bf
editor.background#282c34
editor.findMatchBackground#e06c7566
editor.findMatchHighlightBackground#e06c7535
editor.findRangeHighlightBackground#70757f18
editor.foreground#abb2bf
editor.hoverHighlightBackground#70757f18
editor.inactiveSelectionBackground#70757f33
editor.lineHighlightBackground#21252b
editor.selectionBackground#67769660
editor.selectionHighlightBackground#70757f33
editor.wordHighlightBackground#4aa5f025
editor.wordHighlightStrongBackground#c162de30
editorBracketHighlight.foreground1#e05561
editorBracketHighlight.foreground2#e06c75
editorBracketHighlight.foreground3#8cc265
editorBracketHighlight.foreground4#4aa5f0
editorBracketHighlight.foreground5#c162de
editorBracketHighlight.foreground6#4dc4ff
editorBracketMatch.background#70757f22
editorBracketMatch.border#70757f
editorBracketPairGuide.activeBackground1#70757fa6
editorBracketPairGuide.activeBackground2#70757fa6
editorBracketPairGuide.activeBackground3#70757fa6
editorBracketPairGuide.activeBackground4#70757fa6
editorBracketPairGuide.activeBackground5#70757fa6
editorBracketPairGuide.activeBackground6#70757fa6
editorBracketPairGuide.background1#abb2bf24
editorBracketPairGuide.background2#abb2bf24
editorBracketPairGuide.background3#abb2bf24
editorBracketPairGuide.background4#abb2bf24
editorBracketPairGuide.background5#abb2bf24
editorBracketPairGuide.background6#abb2bf24
editorCursor.foreground#528bff
editorError.foreground#e05561
editorGroup.border#3e4452
editorGroupHeader.tabsBackground#21252b
editorGroupHeader.tabsBorder#3e4452
editorGutter.addedBackground#109868
editorGutter.deletedBackground#9A353D
editorGutter.modifiedBackground#4aa5f0
editorHint.foreground#8cc265
editorHoverWidget.background#21252b
editorHoverWidget.border#3e4452
editorIndentGuide.activeBackground1#70757fa6
editorIndentGuide.background1#abb2bf24
editorInfo.foreground#4aa5f0
editorLineNumber.activeForeground#abb2bf
editorLineNumber.foreground#495162
editorSuggestWidget.background#21252b
editorSuggestWidget.border#3e4452
editorSuggestWidget.selectedBackground#2c313a
editorWarning.foreground#d18f52
editorWhitespace.foreground#abb2bf24
editorWidget.background#21252b
editorWidget.border#3e4452
editorWidget.foreground#abb2bf
errorForeground#e05561
focusBorder#3e4452
foreground#abb2bf
gitDecoration.addedResourceForeground#109868
gitDecoration.conflictingResourceForeground#e06c75
gitDecoration.deletedResourceForeground#9A353D
gitDecoration.ignoredResourceForeground#495162
gitDecoration.modifiedResourceForeground#4aa5f0
gitDecoration.renamedResourceForeground#c162de
gitDecoration.untrackedResourceForeground#109868
icon.foreground#abb2bf
input.background#21252b
input.border#3e4452
input.foreground#abb2bf
input.placeholderForeground#495162
inputOption.activeBackground#70757f55
inputOption.activeBorder#70757f
inputValidation.errorBackground#e0556122
inputValidation.errorBorder#e05561
inputValidation.infoBackground#4aa5f022
inputValidation.infoBorder#4aa5f0
inputValidation.warningBackground#d18f5222
inputValidation.warningBorder#d18f52
list.activeSelectionBackground#70757f55
list.activeSelectionForeground#abb2bf
list.errorForeground#e05561
list.focusBackground#70757f44
list.highlightForeground#70757f
list.hoverBackground#2c313a
list.inactiveSelectionBackground#70757f33
list.warningForeground#d18f52
menu.background#21252b
menu.foreground#abb2bf
menu.selectionBackground#67769660
menu.separatorBackground#3e4452
minimap.background#282c34
minimap.findMatchHighlight#e06c7580
minimap.selectionHighlight#70757f66
notificationCenter.border#3e4452
notificationCenterHeader.background#21252b
notifications.background#21252b
notifications.border#3e4452
notifications.foreground#abb2bf
panel.background#21252b
panel.border#3e4452
panelTitle.activeBorder#70757f
panelTitle.activeForeground#abb2bf
panelTitle.inactiveForeground#abb2bf
peekView.border#70757f
peekViewEditor.background#282c34
peekViewResult.background#21252b
peekViewResult.selectionBackground#67769660
peekViewTitle.background#21252b
pickerGroup.border#3e4452
pickerGroup.foreground#70757f
progressBar.background#70757f
quickInput.background#21252b
quickInput.foreground#abb2bf
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#abb2bf45
scrollbarSlider.background#abb2bf18
scrollbarSlider.hoverBackground#abb2bf2e
sideBar.background#21252b
sideBar.border#3e4452
sideBar.foreground#abb2bf
sideBarSectionHeader.background#282c34
sideBarSectionHeader.border#3e4452
sideBarSectionHeader.foreground#abb2bf
sideBarTitle.foreground#abb2bf
statusBar.background#21252b
statusBar.border#3e4452
statusBar.debuggingBackground#e05561
statusBar.debuggingForeground#111111
statusBar.foreground#abb2bf
statusBar.noFolderBackground#21252b
tab.activeBackground#282c34
tab.activeBorder#282c34
tab.activeBorderTop#70757f
tab.activeForeground#abb2bf
tab.border#3e4452
tab.inactiveBackground#21252b
tab.inactiveForeground#abb2bf
terminal.ansiBlack#3f4451
terminal.ansiBlue#4aa5f0
terminal.ansiBrightBlack#4f5666
terminal.ansiBrightBlue#4dc4ff
terminal.ansiBrightCyan#4cd1e0
terminal.ansiBrightGreen#a5e075
terminal.ansiBrightMagenta#de73ff
terminal.ansiBrightRed#ff616e
terminal.ansiBrightWhite#e6e6e6
terminal.ansiBrightYellow#f0a45d
terminal.ansiCyan#42b3c2
terminal.ansiGreen#8cc265
terminal.ansiMagenta#c162de
terminal.ansiRed#e05561
terminal.ansiWhite#d7dae0
terminal.ansiYellow#d18f52
terminal.background#282c34
terminal.foreground#abb2bf
terminal.selectionBackground#67769660
terminalCursor.foreground#70757f
textBlockQuote.background#21252b
textBlockQuote.border#70757f
textCodeBlock.background#21252b
textLink.activeForeground#4dc4ff
textLink.foreground#61afef
titleBar.activeBackground#21252b
titleBar.activeForeground#abb2bf
titleBar.border#3e4452
titleBar.inactiveBackground#21252b
titleBar.inactiveForeground#495162
tree.inactiveIndentGuidesStroke#abb2bf24
tree.indentGuidesStroke#abb2bf52
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#abb2bf	—
string, constant.other.symbol, markup.inline.raw	#8cc265	—
constant.numeric, constant.language.boolean, constant.language.null	#4aa5f0	—
constant, variable.other.constant	#e06c75	—
keyword, storage.type, storage.modifier	#e05561	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#e06c75	—
variable.parameter, function.parameter	#abb2bf	—
entity.name.function, support.function, variable.function, meta.function-call	#c162de	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#c162de	—
entity.name.namespace, entity.name.type.namespace	#e06c75	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#4aa5f0	—
punctuation, meta.brace	#abb2bf	—
entity.name.tag, punctuation.definition.tag	#e05561	—
entity.other.attribute-name	#4aa5f0	—
string.regexp, constant.regexp	#4dc4ff	—
markup.heading, entity.name.section	#e05561	bold
markup.bold, punctuation.definition.bold	#e06c75	bold
markup.italic, punctuation.definition.italic	#e05561	italic
markup.underline.link, string.other.link	#70757f	underline
markup.inserted	#8cc265	—
markup.deleted	#e05561	—
markup.changed	#e06c75	—
invalid	#ffffff	—

VS Code preview

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

Codex Palette for VS Code — Codex Palette — One 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#5871EF
activityBar.background#FAFAFA
activityBar.border#E5E5E6
activityBar.foreground#121417
activityBar.inactiveForeground#9D9D9F
activityBarBadge.background#526FFF
activityBarBadge.foreground#FFFFFF
badge.background#5871EF
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#383A42
breadcrumb.background#FAFAFA
breadcrumb.focusForeground#383A42
breadcrumb.foreground#8b8c93
button.background#5871EF
button.foreground#FFFFFF
button.hoverBackground#6B83ED
button.secondaryBackground#EAEAEB
button.secondaryForeground#383A42
button.secondaryHoverBackground#DBDBDC66
checkbox.background#EAEAEB
checkbox.border#E5E5E6
commandCenter.background#EAEAEB
commandCenter.border#E5E5E6
commandCenter.foreground#8b8c93
debugIcon.continueForeground#50A14F
debugIcon.disconnectForeground#A626A4
debugIcon.pauseForeground#986801
debugIcon.restartForeground#50A14F
debugIcon.startForeground#50A14F
debugIcon.stepIntoForeground#986801
debugIcon.stepOutForeground#986801
debugIcon.stepOverForeground#986801
debugIcon.stopForeground#A626A4
debugToolBar.background#EAEAEB
descriptionForeground#8b8c93
diffEditor.diagonalFill#8b8c9326
diffEditor.insertedLineBackground#50A14F12
diffEditor.insertedTextBackground#50A14F20
diffEditor.removedLineBackground#A626A412
diffEditor.removedTextBackground#A626A420
disabledForeground#383A4266
dropdown.background#EAEAEB
dropdown.border#E5E5E6
dropdown.foreground#383A42
editor.background#FAFAFA
editor.findMatchBackground#E456494d
editor.findMatchHighlightBackground#E4564926
editor.findRangeHighlightBackground#5871EF18
editor.foreground#383A42
editor.hoverHighlightBackground#5871EF18
editor.inactiveSelectionBackground#5871EF1f
editor.lineHighlightBackground#EAEAEB
editor.selectionBackground#E5E5E6
editor.selectionHighlightBackground#5871EF1f
editor.wordHighlightBackground#98680118
editor.wordHighlightStrongBackground#4078F21f
editorBracketHighlight.foreground1#A626A4
editorBracketHighlight.foreground2#E45649
editorBracketHighlight.foreground3#50A14F
editorBracketHighlight.foreground4#986801
editorBracketHighlight.foreground5#4078F2
editorBracketHighlight.foreground6#0184BC
editorBracketMatch.background#5871EF22
editorBracketMatch.border#5871EF
editorBracketPairGuide.activeBackground1#5871EF8c
editorBracketPairGuide.activeBackground2#5871EF8c
editorBracketPairGuide.activeBackground3#5871EF8c
editorBracketPairGuide.activeBackground4#5871EF8c
editorBracketPairGuide.activeBackground5#5871EF8c
editorBracketPairGuide.activeBackground6#5871EF8c
editorBracketPairGuide.background1#383A4218
editorBracketPairGuide.background2#383A4218
editorBracketPairGuide.background3#383A4218
editorBracketPairGuide.background4#383A4218
editorBracketPairGuide.background5#383A4218
editorBracketPairGuide.background6#383A4218
editorCursor.foreground#526FFF
editorError.foreground#A626A4
editorGroup.border#E5E5E6
editorGroupHeader.tabsBackground#EAEAEB
editorGroupHeader.tabsBorder#E5E5E6
editorGutter.addedBackground#50A14F
editorGutter.deletedBackground#A626A4
editorGutter.modifiedBackground#986801
editorHint.foreground#50A14F
editorHoverWidget.background#EAEAEB
editorHoverWidget.border#E5E5E6
editorIndentGuide.activeBackground1#5871EF8c
editorIndentGuide.background1#383A4218
editorInfo.foreground#986801
editorLineNumber.activeForeground#8b8c93
editorLineNumber.foreground#9D9D9F
editorSuggestWidget.background#EAEAEB
editorSuggestWidget.border#E5E5E6
editorSuggestWidget.selectedBackground#DBDBDC66
editorWarning.foreground#986801
editorWhitespace.foreground#383A4218
editorWidget.background#EAEAEB
editorWidget.border#E5E5E6
editorWidget.foreground#383A42
errorForeground#A626A4
focusBorder#526FFF
foreground#383A42
gitDecoration.addedResourceForeground#50A14F
gitDecoration.conflictingResourceForeground#E45649
gitDecoration.deletedResourceForeground#A626A4
gitDecoration.ignoredResourceForeground#9D9D9F
gitDecoration.modifiedResourceForeground#986801
gitDecoration.renamedResourceForeground#4078F2
gitDecoration.untrackedResourceForeground#50A14F
icon.foreground#8b8c93
input.background#EAEAEB
input.border#E5E5E6
input.foreground#383A42
input.placeholderForeground#9D9D9F
inputOption.activeBackground#5871EF22
inputOption.activeBorder#5871EF
inputValidation.errorBackground#A626A412
inputValidation.errorBorder#A626A4
inputValidation.infoBackground#98680112
inputValidation.infoBorder#986801
inputValidation.warningBackground#98680112
inputValidation.warningBorder#986801
list.activeSelectionBackground#5871EF22
list.activeSelectionForeground#383A42
list.errorForeground#A626A4
list.focusBackground#5871EF1f
list.highlightForeground#5871EF
list.hoverBackground#DBDBDC66
list.inactiveSelectionBackground#5871EF14
list.warningForeground#986801
menu.background#EAEAEB
menu.foreground#383A42
menu.selectionBackground#E5E5E6
menu.separatorBackground#E5E5E6
minimap.background#FAFAFA
minimap.findMatchHighlight#E4564980
minimap.selectionHighlight#5871EF66
notificationCenter.border#E5E5E6
notificationCenterHeader.background#EAEAEB
notifications.background#EAEAEB
notifications.border#E5E5E6
notifications.foreground#383A42
panel.background#EAEAEB
panel.border#E5E5E6
panelTitle.activeBorder#5871EF
panelTitle.activeForeground#383A42
panelTitle.inactiveForeground#8b8c93
peekView.border#5871EF
peekViewEditor.background#FAFAFA
peekViewResult.background#EAEAEB
peekViewResult.selectionBackground#E5E5E6
peekViewTitle.background#EAEAEB
pickerGroup.border#E5E5E6
pickerGroup.foreground#5871EF
progressBar.background#5871EF
quickInput.background#EAEAEB
quickInput.foreground#383A42
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#383A4245
scrollbarSlider.background#383A4218
scrollbarSlider.hoverBackground#383A422e
sideBar.background#EAEAEB
sideBar.border#E5E5E6
sideBar.foreground#8b8c93
sideBarSectionHeader.background#FAFAFA
sideBarSectionHeader.border#E5E5E6
sideBarSectionHeader.foreground#383A42
sideBarTitle.foreground#383A42
statusBar.background#EAEAEB
statusBar.border#E5E5E6
statusBar.debuggingBackground#A626A4
statusBar.debuggingForeground#ffffff
statusBar.foreground#8b8c93
statusBar.noFolderBackground#EAEAEB
tab.activeBackground#FAFAFA
tab.activeBorder#FAFAFA
tab.activeBorderTop#5871EF
tab.activeForeground#383A42
tab.border#E5E5E6
tab.inactiveBackground#EAEAEB
tab.inactiveForeground#8b8c93
terminal.ansiBlack#0d0d0d
terminal.ansiBlue#986801
terminal.ansiBrightBlack#9D9D9F
terminal.ansiBrightBlue#0184BC
terminal.ansiBrightCyan#986801
terminal.ansiBrightGreen#50A14F
terminal.ansiBrightMagenta#4078F2
terminal.ansiBrightRed#A626A4
terminal.ansiBrightWhite#fcfcfc
terminal.ansiBrightYellow#E45649
terminal.ansiCyan#0184BC
terminal.ansiGreen#50A14F
terminal.ansiMagenta#4078F2
terminal.ansiRed#A626A4
terminal.ansiWhite#d9d9d9
terminal.ansiYellow#986801
terminal.background#FAFAFA
terminal.foreground#383A42
terminal.selectionBackground#E5E5E6
terminalCursor.foreground#5871EF
textBlockQuote.background#EAEAEB
textBlockQuote.border#5871EF
textCodeBlock.background#EAEAEB
textLink.activeForeground#0184BC
textLink.foreground#5871EF
titleBar.activeBackground#EAEAEB
titleBar.activeForeground#383A42
titleBar.border#E5E5E6
titleBar.inactiveBackground#EAEAEB
titleBar.inactiveForeground#9D9D9F
tree.inactiveIndentGuidesStroke#383A4218
tree.indentGuidesStroke#383A423d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8b8c93	—
string, constant.other.symbol, markup.inline.raw	#50A14F	—
constant.numeric, constant.language.boolean, constant.language.null	#986801	—
constant, variable.other.constant	#E45649	—
keyword, storage.type, storage.modifier	#A626A4	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#E45649	—
variable.parameter, function.parameter	#8b8c93	—
entity.name.function, support.function, variable.function, meta.function-call	#4078F2	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#4078F2	—
entity.name.namespace, entity.name.type.namespace	#E45649	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#986801	—
punctuation, meta.brace	#8b8c93	—
entity.name.tag, punctuation.definition.tag	#A626A4	—
entity.other.attribute-name	#986801	—
string.regexp, constant.regexp	#0184BC	—
markup.heading, entity.name.section	#A626A4	bold
markup.bold, punctuation.definition.bold	#E45649	bold
markup.italic, punctuation.definition.italic	#A626A4	italic
markup.underline.link, string.other.link	#5871EF	underline
markup.inserted	#50A14F	—
markup.deleted	#A626A4	—
markup.changed	#E45649	—
invalid	#ffffff	—

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Oscurange

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#F9B98C
activityBar.background#0B0B0F
activityBar.border#ffffff22
activityBar.foreground#E6E6E6
activityBar.inactiveForeground#5e5f66
activityBarBadge.background#F9B98C
activityBarBadge.foreground#ffffff
badge.background#F9B98C
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#E6E6E6
breadcrumb.background#0B0B0F
breadcrumb.focusForeground#E6E6E6
breadcrumb.foreground#5e5f66
button.background#F9B98C
button.foreground#ffffff
button.hoverBackground#9592A4
button.secondaryBackground#0B0B0F
button.secondaryForeground#E6E6E6
button.secondaryHoverBackground#0B0B0F
checkbox.background#0B0B0F
checkbox.border#ffffff22
commandCenter.background#0B0B0F
commandCenter.border#ffffff22
commandCenter.foreground#5e5f66
debugIcon.continueForeground#E6E6E6
debugIcon.disconnectForeground#9099A1
debugIcon.pauseForeground#F9B98C
debugIcon.restartForeground#E6E6E6
debugIcon.startForeground#E6E6E6
debugIcon.stepIntoForeground#F9B98C
debugIcon.stepOutForeground#F9B98C
debugIcon.stepOverForeground#F9B98C
debugIcon.stopForeground#9099A1
debugToolBar.background#0B0B0F
descriptionForeground#5e5f66
diffEditor.diagonalFill#5e5f6626
diffEditor.insertedLineBackground#E6E6E618
diffEditor.insertedTextBackground#E6E6E630
diffEditor.removedLineBackground#9099A118
diffEditor.removedTextBackground#9099A130
disabledForeground#E6E6E666
dropdown.background#0B0B0F
dropdown.border#ffffff22
dropdown.foreground#E6E6E6
editor.background#0B0B0F
editor.findMatchBackground#E6E6E666
editor.findMatchHighlightBackground#E6E6E635
editor.findRangeHighlightBackground#F9B98C18
editor.foreground#E6E6E6
editor.hoverHighlightBackground#F9B98C18
editor.inactiveSelectionBackground#F9B98C33
editor.lineHighlightBackground#0B0B0F
editor.selectionBackground#F9B98C44
editor.selectionHighlightBackground#F9B98C33
editor.wordHighlightBackground#F9B98C25
editor.wordHighlightStrongBackground#F9B98C30
editorBracketHighlight.foreground1#9099A1
editorBracketHighlight.foreground2#E6E6E6
editorBracketHighlight.foreground3#E6E6E6
editorBracketHighlight.foreground4#F9B98C
editorBracketHighlight.foreground5#F9B98C
editorBracketHighlight.foreground6#9592A4
editorBracketMatch.background#F9B98C22
editorBracketMatch.border#F9B98C
editorBracketPairGuide.activeBackground1#F9B98Ca6
editorBracketPairGuide.activeBackground2#F9B98Ca6
editorBracketPairGuide.activeBackground3#F9B98Ca6
editorBracketPairGuide.activeBackground4#F9B98Ca6
editorBracketPairGuide.activeBackground5#F9B98Ca6
editorBracketPairGuide.activeBackground6#F9B98Ca6
editorBracketPairGuide.background1#E6E6E624
editorBracketPairGuide.background2#E6E6E624
editorBracketPairGuide.background3#E6E6E624
editorBracketPairGuide.background4#E6E6E624
editorBracketPairGuide.background5#E6E6E624
editorBracketPairGuide.background6#E6E6E624
editorCursor.foreground#F9B98C
editorError.foreground#9099A1
editorGroup.border#ffffff22
editorGroupHeader.tabsBackground#0B0B0F
editorGroupHeader.tabsBorder#ffffff22
editorGutter.addedBackground#E6E6E6
editorGutter.deletedBackground#9099A1
editorGutter.modifiedBackground#F9B98C
editorHint.foreground#E6E6E6
editorHoverWidget.background#0B0B0F
editorHoverWidget.border#ffffff22
editorIndentGuide.activeBackground1#F9B98Ca6
editorIndentGuide.background1#E6E6E624
editorInfo.foreground#F9B98C
editorLineNumber.activeForeground#5e5f66
editorLineNumber.foreground#5e5f66
editorSuggestWidget.background#0B0B0F
editorSuggestWidget.border#ffffff22
editorSuggestWidget.selectedBackground#0B0B0F
editorWarning.foreground#F9B98C
editorWhitespace.foreground#E6E6E624
editorWidget.background#0B0B0F
editorWidget.border#ffffff22
editorWidget.foreground#E6E6E6
errorForeground#9099A1
focusBorder#F9B98C
foreground#E6E6E6
gitDecoration.addedResourceForeground#E6E6E6
gitDecoration.conflictingResourceForeground#E6E6E6
gitDecoration.deletedResourceForeground#9099A1
gitDecoration.ignoredResourceForeground#5e5f66
gitDecoration.modifiedResourceForeground#F9B98C
gitDecoration.renamedResourceForeground#F9B98C
gitDecoration.untrackedResourceForeground#E6E6E6
icon.foreground#5e5f66
input.background#0B0B0F
input.border#ffffff22
input.foreground#E6E6E6
input.placeholderForeground#5e5f66
inputOption.activeBackground#F9B98C55
inputOption.activeBorder#F9B98C
inputValidation.errorBackground#9099A122
inputValidation.errorBorder#9099A1
inputValidation.infoBackground#F9B98C22
inputValidation.infoBorder#F9B98C
inputValidation.warningBackground#F9B98C22
inputValidation.warningBorder#F9B98C
list.activeSelectionBackground#F9B98C55
list.activeSelectionForeground#E6E6E6
list.errorForeground#9099A1
list.focusBackground#F9B98C44
list.highlightForeground#F9B98C
list.hoverBackground#0B0B0F
list.inactiveSelectionBackground#F9B98C33
list.warningForeground#F9B98C
menu.background#0B0B0F
menu.foreground#E6E6E6
menu.selectionBackground#F9B98C44
menu.separatorBackground#ffffff22
minimap.background#0B0B0F
minimap.findMatchHighlight#E6E6E680
minimap.selectionHighlight#F9B98C66
notificationCenter.border#ffffff22
notificationCenterHeader.background#0B0B0F
notifications.background#0B0B0F
notifications.border#ffffff22
notifications.foreground#E6E6E6
panel.background#0B0B0F
panel.border#ffffff22
panelTitle.activeBorder#F9B98C
panelTitle.activeForeground#E6E6E6
panelTitle.inactiveForeground#5e5f66
peekView.border#F9B98C
peekViewEditor.background#0B0B0F
peekViewResult.background#0B0B0F
peekViewResult.selectionBackground#F9B98C44
peekViewTitle.background#0B0B0F
pickerGroup.border#ffffff22
pickerGroup.foreground#F9B98C
progressBar.background#F9B98C
quickInput.background#0B0B0F
quickInput.foreground#E6E6E6
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#E6E6E645
scrollbarSlider.background#E6E6E618
scrollbarSlider.hoverBackground#E6E6E62e
sideBar.background#0B0B0F
sideBar.border#ffffff22
sideBar.foreground#5e5f66
sideBarSectionHeader.background#0B0B0F
sideBarSectionHeader.border#ffffff22
sideBarSectionHeader.foreground#E6E6E6
sideBarTitle.foreground#E6E6E6
statusBar.background#0B0B0F
statusBar.border#ffffff22
statusBar.debuggingBackground#9099A1
statusBar.debuggingForeground#111111
statusBar.foreground#5e5f66
statusBar.noFolderBackground#0B0B0F
tab.activeBackground#0B0B0F
tab.activeBorder#0B0B0F
tab.activeBorderTop#F9B98C
tab.activeForeground#E6E6E6
tab.border#ffffff22
tab.inactiveBackground#0B0B0F
tab.inactiveForeground#5e5f66
terminal.ansiBlack#111111
terminal.ansiBlue#F9B98C
terminal.ansiBrightBlack#5e5f66
terminal.ansiBrightBlue#9592A4
terminal.ansiBrightCyan#F9B98C
terminal.ansiBrightGreen#E6E6E6
terminal.ansiBrightMagenta#F9B98C
terminal.ansiBrightRed#9099A1
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#E6E6E6
terminal.ansiCyan#9592A4
terminal.ansiGreen#E6E6E6
terminal.ansiMagenta#F9B98C
terminal.ansiRed#9099A1
terminal.ansiWhite#d6d6d6
terminal.ansiYellow#F9B98C
terminal.background#0B0B0F
terminal.foreground#E6E6E6
terminal.selectionBackground#F9B98C44
terminalCursor.foreground#F9B98C
textBlockQuote.background#0B0B0F
textBlockQuote.border#F9B98C
textCodeBlock.background#0B0B0F
textLink.activeForeground#9592A4
textLink.foreground#F9B98C
titleBar.activeBackground#0B0B0F
titleBar.activeForeground#E6E6E6
titleBar.border#ffffff22
titleBar.inactiveBackground#0B0B0F
titleBar.inactiveForeground#5e5f66
tree.inactiveIndentGuidesStroke#E6E6E624
tree.indentGuidesStroke#E6E6E652
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Proof 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#3d755d
activityBar.background#efede6
activityBar.border#00000022
activityBar.foreground#2f312d
activityBar.inactiveForeground#8b877c
activityBarBadge.background#3d755d
activityBarBadge.foreground#ffffff
badge.background#3d755d
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#2f312d
breadcrumb.background#f5f3ed
breadcrumb.focusForeground#2f312d
breadcrumb.foreground#8b877c
button.background#3d755d
button.foreground#ffffff
button.hoverBackground#d3b45b
button.secondaryBackground#efede6
button.secondaryForeground#2f312d
button.secondaryHoverBackground#efede6
checkbox.background#efede6
checkbox.border#00000022
commandCenter.background#efede6
commandCenter.border#00000022
commandCenter.foreground#8b877c
debugIcon.continueForeground#3d755d
debugIcon.disconnectForeground#5f6ac2
debugIcon.pauseForeground#d3b45b
debugIcon.restartForeground#3d755d
debugIcon.startForeground#3d755d
debugIcon.stepIntoForeground#d3b45b
debugIcon.stepOutForeground#d3b45b
debugIcon.stepOverForeground#d3b45b
debugIcon.stopForeground#5f6ac2
debugToolBar.background#efede6
descriptionForeground#8b877c
diffEditor.diagonalFill#8b877c26
diffEditor.insertedLineBackground#3d755d12
diffEditor.insertedTextBackground#3d755d20
diffEditor.removedLineBackground#5f6ac212
diffEditor.removedTextBackground#5f6ac220
disabledForeground#2f312d66
dropdown.background#efede6
dropdown.border#00000022
dropdown.foreground#2f312d
editor.background#f5f3ed
editor.findMatchBackground#2f312d4d
editor.findMatchHighlightBackground#2f312d26
editor.findRangeHighlightBackground#3d755d18
editor.foreground#2f312d
editor.hoverHighlightBackground#3d755d18
editor.inactiveSelectionBackground#3d755d1f
editor.lineHighlightBackground#efede6
editor.selectionBackground#3d755d44
editor.selectionHighlightBackground#3d755d1f
editor.wordHighlightBackground#d3b45b18
editor.wordHighlightStrongBackground#3d755d1f
editorBracketHighlight.foreground1#5f6ac2
editorBracketHighlight.foreground2#2f312d
editorBracketHighlight.foreground3#3d755d
editorBracketHighlight.foreground4#d3b45b
editorBracketHighlight.foreground5#3d755d
editorBracketHighlight.foreground6#d3b45b
editorBracketMatch.background#3d755d22
editorBracketMatch.border#3d755d
editorBracketPairGuide.activeBackground1#3d755d8c
editorBracketPairGuide.activeBackground2#3d755d8c
editorBracketPairGuide.activeBackground3#3d755d8c
editorBracketPairGuide.activeBackground4#3d755d8c
editorBracketPairGuide.activeBackground5#3d755d8c
editorBracketPairGuide.activeBackground6#3d755d8c
editorBracketPairGuide.background1#2f312d18
editorBracketPairGuide.background2#2f312d18
editorBracketPairGuide.background3#2f312d18
editorBracketPairGuide.background4#2f312d18
editorBracketPairGuide.background5#2f312d18
editorBracketPairGuide.background6#2f312d18
editorCursor.foreground#3d755d
editorError.foreground#5f6ac2
editorGroup.border#00000022
editorGroupHeader.tabsBackground#efede6
editorGroupHeader.tabsBorder#00000022
editorGutter.addedBackground#3d755d
editorGutter.deletedBackground#5f6ac2
editorGutter.modifiedBackground#d3b45b
editorHint.foreground#3d755d
editorHoverWidget.background#efede6
editorHoverWidget.border#00000022
editorIndentGuide.activeBackground1#3d755d8c
editorIndentGuide.background1#2f312d18
editorInfo.foreground#d3b45b
editorLineNumber.activeForeground#8b877c
editorLineNumber.foreground#8b877c
editorSuggestWidget.background#efede6
editorSuggestWidget.border#00000022
editorSuggestWidget.selectedBackground#efede6
editorWarning.foreground#3d755d
editorWhitespace.foreground#2f312d18
editorWidget.background#efede6
editorWidget.border#00000022
editorWidget.foreground#2f312d
errorForeground#5f6ac2
focusBorder#3d755d
foreground#2f312d
gitDecoration.addedResourceForeground#3d755d
gitDecoration.conflictingResourceForeground#2f312d
gitDecoration.deletedResourceForeground#5f6ac2
gitDecoration.ignoredResourceForeground#8b877c
gitDecoration.modifiedResourceForeground#d3b45b
gitDecoration.renamedResourceForeground#3d755d
gitDecoration.untrackedResourceForeground#3d755d
icon.foreground#8b877c
input.background#efede6
input.border#00000022
input.foreground#2f312d
input.placeholderForeground#8b877c
inputOption.activeBackground#3d755d22
inputOption.activeBorder#3d755d
inputValidation.errorBackground#5f6ac212
inputValidation.errorBorder#5f6ac2
inputValidation.infoBackground#d3b45b12
inputValidation.infoBorder#d3b45b
inputValidation.warningBackground#3d755d12
inputValidation.warningBorder#3d755d
list.activeSelectionBackground#3d755d22
list.activeSelectionForeground#2f312d
list.errorForeground#5f6ac2
list.focusBackground#3d755d1f
list.highlightForeground#3d755d
list.hoverBackground#efede6
list.inactiveSelectionBackground#3d755d14
list.warningForeground#3d755d
menu.background#efede6
menu.foreground#2f312d
menu.selectionBackground#3d755d44
menu.separatorBackground#00000022
minimap.background#f5f3ed
minimap.findMatchHighlight#2f312d80
minimap.selectionHighlight#3d755d66
notificationCenter.border#00000022
notificationCenterHeader.background#efede6
notifications.background#efede6
notifications.border#00000022
notifications.foreground#2f312d
panel.background#efede6
panel.border#00000022
panelTitle.activeBorder#3d755d
panelTitle.activeForeground#2f312d
panelTitle.inactiveForeground#8b877c
peekView.border#3d755d
peekViewEditor.background#f5f3ed
peekViewResult.background#efede6
peekViewResult.selectionBackground#3d755d44
peekViewTitle.background#efede6
pickerGroup.border#00000022
pickerGroup.foreground#3d755d
progressBar.background#3d755d
quickInput.background#efede6
quickInput.foreground#2f312d
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#2f312d45
scrollbarSlider.background#2f312d18
scrollbarSlider.hoverBackground#2f312d2e
sideBar.background#efede6
sideBar.border#00000022
sideBar.foreground#4b4d48
sideBarSectionHeader.background#efede6
sideBarSectionHeader.border#00000022
sideBarSectionHeader.foreground#2f312d
sideBarTitle.foreground#2f312d
statusBar.background#efede6
statusBar.border#00000022
statusBar.debuggingBackground#5f6ac2
statusBar.debuggingForeground#ffffff
statusBar.foreground#8b877c
statusBar.noFolderBackground#efede6
tab.activeBackground#f5f3ed
tab.activeBorder#f5f3ed
tab.activeBorderTop#3d755d
tab.activeForeground#2f312d
tab.border#00000022
tab.inactiveBackground#efede6
tab.inactiveForeground#8b877c
terminal.ansiBlack#0d0d0d
terminal.ansiBlue#d3b45b
terminal.ansiBrightBlack#8b877c
terminal.ansiBrightBlue#d3b45b
terminal.ansiBrightCyan#d3b45b
terminal.ansiBrightGreen#3d755d
terminal.ansiBrightMagenta#3d755d
terminal.ansiBrightRed#5f6ac2
terminal.ansiBrightWhite#fcfcfc
terminal.ansiBrightYellow#2f312d
terminal.ansiCyan#d3b45b
terminal.ansiGreen#3d755d
terminal.ansiMagenta#3d755d
terminal.ansiRed#5f6ac2
terminal.ansiWhite#d9d9d9
terminal.ansiYellow#3d755d
terminal.background#f5f3ed
terminal.foreground#2f312d
terminal.selectionBackground#3d755d44
terminalCursor.foreground#3d755d
textBlockQuote.background#efede6
textBlockQuote.border#3d755d
textCodeBlock.background#efede6
textLink.activeForeground#d3b45b
textLink.foreground#3d755d
titleBar.activeBackground#efede6
titleBar.activeForeground#2f312d
titleBar.border#00000022
titleBar.inactiveBackground#efede6
titleBar.inactiveForeground#8b877c
tree.inactiveIndentGuidesStroke#2f312d18
tree.indentGuidesStroke#2f312d3d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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