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 — Sentry 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#7055f6
activityBar.background#26222d
activityBar.border#ffffff22
activityBar.foreground#e6dff9
activityBar.inactiveForeground#8d849f
activityBarBadge.background#7055f6
activityBarBadge.foreground#ffffff
badge.background#775ef6
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#e6dff9
breadcrumb.background#2d2935
breadcrumb.focusForeground#e6dff9
breadcrumb.foreground#8d849f
button.background#7055f6
button.foreground#ffffff
button.hoverBackground#f4c46a
button.secondaryBackground#26222d
button.secondaryForeground#e6dff9
button.secondaryHoverBackground#26222d
checkbox.background#26222d
checkbox.border#ffffff22
commandCenter.background#26222d
commandCenter.border#ffffff22
commandCenter.foreground#8d849f
debugIcon.continueForeground#8ee6d7
debugIcon.disconnectForeground#7055f6
debugIcon.pauseForeground#f4c46a
debugIcon.restartForeground#8ee6d7
debugIcon.startForeground#8ee6d7
debugIcon.stepIntoForeground#f4c46a
debugIcon.stepOutForeground#f4c46a
debugIcon.stepOverForeground#f4c46a
debugIcon.stopForeground#7055f6
debugToolBar.background#26222d
descriptionForeground#8d849f
diffEditor.diagonalFill#8d849f26
diffEditor.insertedLineBackground#8ee6d718
diffEditor.insertedTextBackground#8ee6d730
diffEditor.removedLineBackground#7055f618
diffEditor.removedTextBackground#7055f630
disabledForeground#e6dff966
dropdown.background#26222d
dropdown.border#ffffff22
dropdown.foreground#e6dff9
editor.background#2d2935
editor.findMatchBackground#e6dff966
editor.findMatchHighlightBackground#e6dff935
editor.findRangeHighlightBackground#775ef618
editor.foreground#e6dff9
editor.hoverHighlightBackground#775ef618
editor.inactiveSelectionBackground#775ef633
editor.lineHighlightBackground#26222d
editor.selectionBackground#775ef644
editor.selectionHighlightBackground#775ef633
editor.wordHighlightBackground#f4c46a25
editor.wordHighlightStrongBackground#a58cff30
editorBracketHighlight.foreground1#7055f6
editorBracketHighlight.foreground2#e6dff9
editorBracketHighlight.foreground3#8ee6d7
editorBracketHighlight.foreground4#f4c46a
editorBracketHighlight.foreground5#a58cff
editorBracketHighlight.foreground6#f4c46a
editorBracketMatch.background#775ef622
editorBracketMatch.border#775ef6
editorBracketPairGuide.activeBackground1#775ef6a6
editorBracketPairGuide.activeBackground2#775ef6a6
editorBracketPairGuide.activeBackground3#775ef6a6
editorBracketPairGuide.activeBackground4#775ef6a6
editorBracketPairGuide.activeBackground5#775ef6a6
editorBracketPairGuide.activeBackground6#775ef6a6
editorBracketPairGuide.background1#e6dff924
editorBracketPairGuide.background2#e6dff924
editorBracketPairGuide.background3#e6dff924
editorBracketPairGuide.background4#e6dff924
editorBracketPairGuide.background5#e6dff924
editorBracketPairGuide.background6#e6dff924
editorCursor.foreground#7055f6
editorError.foreground#7055f6
editorGroup.border#ffffff22
editorGroupHeader.tabsBackground#26222d
editorGroupHeader.tabsBorder#ffffff22
editorGutter.addedBackground#8ee6d7
editorGutter.deletedBackground#7055f6
editorGutter.modifiedBackground#f4c46a
editorHint.foreground#8ee6d7
editorHoverWidget.background#26222d
editorHoverWidget.border#ffffff22
editorIndentGuide.activeBackground1#775ef6a6
editorIndentGuide.background1#e6dff924
editorInfo.foreground#f4c46a
editorLineNumber.activeForeground#8d849f
editorLineNumber.foreground#8d849f
editorSuggestWidget.background#26222d
editorSuggestWidget.border#ffffff22
editorSuggestWidget.selectedBackground#26222d
editorWarning.foreground#8ee6d7
editorWhitespace.foreground#e6dff924
editorWidget.background#26222d
editorWidget.border#ffffff22
editorWidget.foreground#e6dff9
errorForeground#7055f6
focusBorder#7055f6
foreground#e6dff9
gitDecoration.addedResourceForeground#8ee6d7
gitDecoration.conflictingResourceForeground#e6dff9
gitDecoration.deletedResourceForeground#7055f6
gitDecoration.ignoredResourceForeground#8d849f
gitDecoration.modifiedResourceForeground#f4c46a
gitDecoration.renamedResourceForeground#a58cff
gitDecoration.untrackedResourceForeground#8ee6d7
icon.foreground#8d849f
input.background#26222d
input.border#ffffff22
input.foreground#e6dff9
input.placeholderForeground#8d849f
inputOption.activeBackground#775ef655
inputOption.activeBorder#775ef6
inputValidation.errorBackground#7055f622
inputValidation.errorBorder#7055f6
inputValidation.infoBackground#f4c46a22
inputValidation.infoBorder#f4c46a
inputValidation.warningBackground#8ee6d722
inputValidation.warningBorder#8ee6d7
list.activeSelectionBackground#775ef655
list.activeSelectionForeground#e6dff9
list.errorForeground#7055f6
list.focusBackground#775ef644
list.highlightForeground#775ef6
list.hoverBackground#26222d
list.inactiveSelectionBackground#775ef633
list.warningForeground#8ee6d7
menu.background#26222d
menu.foreground#e6dff9
menu.selectionBackground#775ef644
menu.separatorBackground#ffffff22
minimap.background#2d2935
minimap.findMatchHighlight#e6dff980
minimap.selectionHighlight#775ef666
notificationCenter.border#ffffff22
notificationCenterHeader.background#26222d
notifications.background#26222d
notifications.border#ffffff22
notifications.foreground#e6dff9
panel.background#26222d
panel.border#ffffff22
panelTitle.activeBorder#775ef6
panelTitle.activeForeground#e6dff9
panelTitle.inactiveForeground#8d849f
peekView.border#775ef6
peekViewEditor.background#2d2935
peekViewResult.background#26222d
peekViewResult.selectionBackground#775ef644
peekViewTitle.background#26222d
pickerGroup.border#ffffff22
pickerGroup.foreground#775ef6
progressBar.background#775ef6
quickInput.background#26222d
quickInput.foreground#e6dff9
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#e6dff945
scrollbarSlider.background#e6dff918
scrollbarSlider.hoverBackground#e6dff92e
sideBar.background#26222d
sideBar.border#ffffff22
sideBar.foreground#d5cdee
sideBarSectionHeader.background#26222d
sideBarSectionHeader.border#ffffff22
sideBarSectionHeader.foreground#e6dff9
sideBarTitle.foreground#f4f1ff
statusBar.background#26222d
statusBar.border#ffffff22
statusBar.debuggingBackground#7055f6
statusBar.debuggingForeground#111111
statusBar.foreground#8d849f
statusBar.noFolderBackground#26222d
tab.activeBackground#2d2935
tab.activeBorder#2d2935
tab.activeBorderTop#775ef6
tab.activeForeground#e6dff9
tab.border#ffffff22
tab.inactiveBackground#26222d
tab.inactiveForeground#8d849f
terminal.ansiBlack#111111
terminal.ansiBlue#f4c46a
terminal.ansiBrightBlack#8d849f
terminal.ansiBrightBlue#f4c46a
terminal.ansiBrightCyan#f4c46a
terminal.ansiBrightGreen#8ee6d7
terminal.ansiBrightMagenta#a58cff
terminal.ansiBrightRed#7055f6
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e6dff9
terminal.ansiCyan#f4c46a
terminal.ansiGreen#8ee6d7
terminal.ansiMagenta#a58cff
terminal.ansiRed#7055f6
terminal.ansiWhite#d6d6d6
terminal.ansiYellow#8ee6d7
terminal.background#2d2935
terminal.foreground#e6dff9
terminal.selectionBackground#775ef644
terminalCursor.foreground#775ef6
textBlockQuote.background#26222d
textBlockQuote.border#775ef6
textCodeBlock.background#26222d
textLink.activeForeground#f4c46a
textLink.foreground#7055f6
titleBar.activeBackground#26222d
titleBar.activeForeground#e6dff9
titleBar.border#ffffff22
titleBar.inactiveBackground#26222d
titleBar.inactiveForeground#8d849f
tree.inactiveIndentGuidesStroke#e6dff924
tree.indentGuidesStroke#e6dff952
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8d849f	—
string, constant.other.symbol, markup.inline.raw	#8ee6d7	—
constant.numeric, constant.language.boolean, constant.language.null	#f4c46a	—
constant, variable.other.constant	#e6dff9	—
keyword, storage.type, storage.modifier	#7055f6	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#e6dff9	—
variable.parameter, function.parameter	#8d849f	—
entity.name.function, support.function, variable.function, meta.function-call	#a58cff	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#a58cff	—
entity.name.namespace, entity.name.type.namespace	#e6dff9	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#f4c46a	—
punctuation, meta.brace	#8d849f	—
entity.name.tag, punctuation.definition.tag	#7055f6	—
entity.other.attribute-name	#f4c46a	—
string.regexp, constant.regexp	#f4c46a	—
markup.heading, entity.name.section	#7055f6	bold
markup.bold, punctuation.definition.bold	#e6dff9	bold
markup.italic, punctuation.definition.italic	#7055f6	italic
markup.underline.link, string.other.link	#775ef6	underline
markup.inserted	#8ee6d7	—
markup.deleted	#7055f6	—
markup.changed	#e6dff9	—
invalid	#ffffff	—

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Solarized 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#2AA198
activityBar.background#003847
activityBar.border#2b2b4a
activityBar.foreground#839496
activityBar.inactiveForeground#93A1A1AA
activityBarBadge.background#2AA198
activityBarBadge.foreground#ffffff
badge.background#2AA198
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#839496
breadcrumb.background#002B36
breadcrumb.focusForeground#839496
breadcrumb.foreground#5e747a
button.background#2AA19899
button.foreground#ffffff
button.hoverBackground#839496
button.secondaryBackground#00212B
button.secondaryForeground#839496
button.secondaryHoverBackground#004454AA
checkbox.background#00212B
checkbox.border#2b2b4a
commandCenter.background#00212B
commandCenter.border#2b2b4a
commandCenter.foreground#5e747a
debugIcon.continueForeground#859900
debugIcon.disconnectForeground#dc322f
debugIcon.pauseForeground#268bd2
debugIcon.restartForeground#859900
debugIcon.startForeground#859900
debugIcon.stepIntoForeground#268bd2
debugIcon.stepOutForeground#268bd2
debugIcon.stepOverForeground#268bd2
debugIcon.stopForeground#dc322f
debugToolBar.background#00212B
descriptionForeground#5e747a
diffEditor.diagonalFill#5e747a26
diffEditor.insertedLineBackground#85990018
diffEditor.insertedTextBackground#85990030
diffEditor.removedLineBackground#dc322f18
diffEditor.removedTextBackground#dc322f30
disabledForeground#83949666
dropdown.background#00212B
dropdown.border#2b2b4a
dropdown.foreground#839496
editor.background#002B36
editor.findMatchBackground#83949666
editor.findMatchHighlightBackground#83949635
editor.findRangeHighlightBackground#2AA19818
editor.foreground#839496
editor.hoverHighlightBackground#2AA19818
editor.inactiveSelectionBackground#2AA19833
editor.lineHighlightBackground#00212B
editor.selectionBackground#274642
editor.selectionHighlightBackground#2AA19833
editor.wordHighlightBackground#268bd225
editor.wordHighlightStrongBackground#d3368230
editorBracketHighlight.foreground1#dc322f
editorBracketHighlight.foreground2#839496
editorBracketHighlight.foreground3#859900
editorBracketHighlight.foreground4#268bd2
editorBracketHighlight.foreground5#d33682
editorBracketHighlight.foreground6#839496
editorBracketMatch.background#2AA19822
editorBracketMatch.border#2AA198
editorBracketPairGuide.activeBackground1#2AA198a6
editorBracketPairGuide.activeBackground2#2AA198a6
editorBracketPairGuide.activeBackground3#2AA198a6
editorBracketPairGuide.activeBackground4#2AA198a6
editorBracketPairGuide.activeBackground5#2AA198a6
editorBracketPairGuide.activeBackground6#2AA198a6
editorBracketPairGuide.background1#83949624
editorBracketPairGuide.background2#83949624
editorBracketPairGuide.background3#83949624
editorBracketPairGuide.background4#83949624
editorBracketPairGuide.background5#83949624
editorBracketPairGuide.background6#83949624
editorCursor.foreground#D30102
editorError.foreground#dc322f
editorGroup.border#2b2b4a
editorGroupHeader.tabsBackground#004052
editorGroupHeader.tabsBorder#2b2b4a
editorGutter.addedBackground#859900
editorGutter.deletedBackground#dc322f
editorGutter.modifiedBackground#268bd2
editorHint.foreground#859900
editorHoverWidget.background#00212B
editorHoverWidget.border#2b2b4a
editorIndentGuide.activeBackground1#2AA198a6
editorIndentGuide.background1#83949624
editorInfo.foreground#268bd2
editorLineNumber.activeForeground#5e747a
editorLineNumber.foreground#93A1A1AA
editorSuggestWidget.background#00212B
editorSuggestWidget.border#2b2b4a
editorSuggestWidget.selectedBackground#004454AA
editorWarning.foreground#b58900
editorWhitespace.foreground#83949624
editorWidget.background#00212B
editorWidget.border#2b2b4a
editorWidget.foreground#839496
errorForeground#ffeaea
focusBorder#2AA19899
foreground#839496
gitDecoration.addedResourceForeground#859900
gitDecoration.conflictingResourceForeground#839496
gitDecoration.deletedResourceForeground#dc322f
gitDecoration.ignoredResourceForeground#93A1A1AA
gitDecoration.modifiedResourceForeground#268bd2
gitDecoration.renamedResourceForeground#d33682
gitDecoration.untrackedResourceForeground#859900
icon.foreground#5e747a
input.background#00212B
input.border#2b2b4a
input.foreground#839496
input.placeholderForeground#93A1A1AA
inputOption.activeBackground#2AA19855
inputOption.activeBorder#2AA198
inputValidation.errorBackground#dc322f22
inputValidation.errorBorder#dc322f
inputValidation.infoBackground#268bd222
inputValidation.infoBorder#268bd2
inputValidation.warningBackground#b5890022
inputValidation.warningBorder#b58900
list.activeSelectionBackground#2AA19855
list.activeSelectionForeground#839496
list.errorForeground#dc322f
list.focusBackground#2AA19844
list.highlightForeground#2AA198
list.hoverBackground#004454AA
list.inactiveSelectionBackground#2AA19833
list.warningForeground#b58900
menu.background#00212B
menu.foreground#839496
menu.selectionBackground#274642
menu.separatorBackground#2b2b4a
minimap.background#002B36
minimap.findMatchHighlight#83949680
minimap.selectionHighlight#2AA19866
notificationCenter.border#2b2b4a
notificationCenterHeader.background#00212B
notifications.background#00212B
notifications.border#2b2b4a
notifications.foreground#839496
panel.background#00212B
panel.border#2b2b4a
panelTitle.activeBorder#2AA198
panelTitle.activeForeground#839496
panelTitle.inactiveForeground#5e747a
peekView.border#2AA198
peekViewEditor.background#002B36
peekViewResult.background#00212B
peekViewResult.selectionBackground#274642
peekViewTitle.background#00212B
pickerGroup.border#2b2b4a
pickerGroup.foreground#2AA198
progressBar.background#2AA198
quickInput.background#00212B
quickInput.foreground#839496
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#83949645
scrollbarSlider.background#83949618
scrollbarSlider.hoverBackground#8394962e
sideBar.background#00212B
sideBar.border#2b2b4a
sideBar.foreground#5e747a
sideBarSectionHeader.background#00212B
sideBarSectionHeader.border#2b2b4a
sideBarSectionHeader.foreground#839496
sideBarTitle.foreground#93A1A1
statusBar.background#00212B
statusBar.border#2b2b4a
statusBar.debuggingBackground#dc322f
statusBar.debuggingForeground#111111
statusBar.foreground#5e747a
statusBar.noFolderBackground#00212B
tab.activeBackground#002B36
tab.activeBorder#002B36
tab.activeBorderTop#2AA198
tab.activeForeground#839496
tab.border#2b2b4a
tab.inactiveBackground#00212B
tab.inactiveForeground#5e747a
terminal.ansiBlack#073642
terminal.ansiBlue#268bd2
terminal.ansiBrightBlack#002b36
terminal.ansiBrightBlue#839496
terminal.ansiBrightCyan#93a1a1
terminal.ansiBrightGreen#586e75
terminal.ansiBrightMagenta#6c71c4
terminal.ansiBrightRed#cb4b16
terminal.ansiBrightWhite#fdf6e3
terminal.ansiBrightYellow#657b83
terminal.ansiCyan#2aa198
terminal.ansiGreen#859900
terminal.ansiMagenta#d33682
terminal.ansiRed#dc322f
terminal.ansiWhite#eee8d5
terminal.ansiYellow#b58900
terminal.background#002B36
terminal.foreground#839496
terminal.selectionBackground#274642
terminalCursor.foreground#2AA198
textBlockQuote.background#00212B
textBlockQuote.border#2AA198
textCodeBlock.background#00212B
textLink.activeForeground#839496
textLink.foreground#2AA198
titleBar.activeBackground#00212B
titleBar.activeForeground#839496
titleBar.border#2b2b4a
titleBar.inactiveBackground#00212B
titleBar.inactiveForeground#93A1A1AA
tree.inactiveIndentGuidesStroke#83949624
tree.indentGuidesStroke#83949652
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Solarized 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#9b8d4e
activityBar.background#DDD6C1
activityBar.border#DDD6C1
activityBar.foreground#584c27
activityBar.inactiveForeground#586E75AA
activityBarBadge.background#B58900
activityBarBadge.foreground#ffffff
badge.background#9b8d4e
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#5b6f76
breadcrumb.background#FDF6E3
breadcrumb.focusForeground#5b6f76
breadcrumb.foreground#829294
button.background#AC9D57
button.foreground#ffffff
button.hoverBackground#839496
button.secondaryBackground#EEE8D5
button.secondaryForeground#5b6f76
button.secondaryHoverBackground#DFCA8844
checkbox.background#EEE8D5
checkbox.border#DDD6C1
commandCenter.background#EEE8D5
commandCenter.border#DDD6C1
commandCenter.foreground#829294
debugIcon.continueForeground#859900
debugIcon.disconnectForeground#dc322f
debugIcon.pauseForeground#268bd2
debugIcon.restartForeground#859900
debugIcon.startForeground#859900
debugIcon.stepIntoForeground#268bd2
debugIcon.stepOutForeground#268bd2
debugIcon.stepOverForeground#268bd2
debugIcon.stopForeground#dc322f
debugToolBar.background#EEE8D5
descriptionForeground#829294
diffEditor.diagonalFill#82929426
diffEditor.insertedLineBackground#85990012
diffEditor.insertedTextBackground#85990020
diffEditor.removedLineBackground#dc322f12
diffEditor.removedTextBackground#dc322f20
disabledForeground#5b6f7666
dropdown.background#EEE8D5
dropdown.border#DDD6C1
dropdown.foreground#5b6f76
editor.background#FDF6E3
editor.findMatchBackground#657B834d
editor.findMatchHighlightBackground#657B8326
editor.findRangeHighlightBackground#9b8d4e18
editor.foreground#657B83
editor.hoverHighlightBackground#9b8d4e18
editor.inactiveSelectionBackground#9b8d4e1f
editor.lineHighlightBackground#EEE8D5
editor.selectionBackground#EEE8D5
editor.selectionHighlightBackground#9b8d4e1f
editor.wordHighlightBackground#268bd218
editor.wordHighlightStrongBackground#d336821f
editorBracketHighlight.foreground1#dc322f
editorBracketHighlight.foreground2#657B83
editorBracketHighlight.foreground3#859900
editorBracketHighlight.foreground4#268bd2
editorBracketHighlight.foreground5#d33682
editorBracketHighlight.foreground6#839496
editorBracketMatch.background#9b8d4e22
editorBracketMatch.border#9b8d4e
editorBracketPairGuide.activeBackground1#9b8d4e8c
editorBracketPairGuide.activeBackground2#9b8d4e8c
editorBracketPairGuide.activeBackground3#9b8d4e8c
editorBracketPairGuide.activeBackground4#9b8d4e8c
editorBracketPairGuide.activeBackground5#9b8d4e8c
editorBracketPairGuide.activeBackground6#9b8d4e8c
editorBracketPairGuide.background1#5b6f7618
editorBracketPairGuide.background2#5b6f7618
editorBracketPairGuide.background3#5b6f7618
editorBracketPairGuide.background4#5b6f7618
editorBracketPairGuide.background5#5b6f7618
editorBracketPairGuide.background6#5b6f7618
editorCursor.foreground#657B83
editorError.foreground#dc322f
editorGroup.border#DDD6C1
editorGroupHeader.tabsBackground#D9D2C2
editorGroupHeader.tabsBorder#DDD6C1
editorGutter.addedBackground#859900
editorGutter.deletedBackground#dc322f
editorGutter.modifiedBackground#268bd2
editorHint.foreground#859900
editorHoverWidget.background#EEE8D5
editorHoverWidget.border#DDD6C1
editorIndentGuide.activeBackground1#9b8d4e8c
editorIndentGuide.background1#5b6f7618
editorInfo.foreground#268bd2
editorLineNumber.activeForeground#829294
editorLineNumber.foreground#586E75AA
editorSuggestWidget.background#EEE8D5
editorSuggestWidget.border#DDD6C1
editorSuggestWidget.selectedBackground#DFCA8844
editorWarning.foreground#b58900
editorWhitespace.foreground#5b6f7618
editorWidget.background#EEE8D5
editorWidget.border#DDD6C1
editorWidget.foreground#5b6f76
errorForeground#dc322f
focusBorder#b49471
foreground#5b6f76
gitDecoration.addedResourceForeground#859900
gitDecoration.conflictingResourceForeground#657B83
gitDecoration.deletedResourceForeground#dc322f
gitDecoration.ignoredResourceForeground#586E75AA
gitDecoration.modifiedResourceForeground#268bd2
gitDecoration.renamedResourceForeground#d33682
gitDecoration.untrackedResourceForeground#859900
icon.foreground#829294
input.background#EEE8D5
input.border#DDD6C1
input.foreground#5b6f76
input.placeholderForeground#586E75AA
inputOption.activeBackground#9b8d4e22
inputOption.activeBorder#9b8d4e
inputValidation.errorBackground#dc322f12
inputValidation.errorBorder#dc322f
inputValidation.infoBackground#268bd212
inputValidation.infoBorder#268bd2
inputValidation.warningBackground#b5890012
inputValidation.warningBorder#b58900
list.activeSelectionBackground#9b8d4e22
list.activeSelectionForeground#5b6f76
list.errorForeground#dc322f
list.focusBackground#9b8d4e1f
list.highlightForeground#9b8d4e
list.hoverBackground#DFCA8844
list.inactiveSelectionBackground#9b8d4e14
list.warningForeground#b58900
menu.background#EEE8D5
menu.foreground#5b6f76
menu.selectionBackground#EEE8D5
menu.separatorBackground#DDD6C1
minimap.background#FDF6E3
minimap.findMatchHighlight#657B8380
minimap.selectionHighlight#9b8d4e66
notificationCenter.border#DDD6C1
notificationCenterHeader.background#EEE8D5
notifications.background#EEE8D5
notifications.border#DDD6C1
notifications.foreground#5b6f76
panel.background#EEE8D5
panel.border#DDD6C1
panelTitle.activeBorder#9b8d4e
panelTitle.activeForeground#5b6f76
panelTitle.inactiveForeground#829294
peekView.border#9b8d4e
peekViewEditor.background#FDF6E3
peekViewResult.background#EEE8D5
peekViewResult.selectionBackground#EEE8D5
peekViewTitle.background#EEE8D5
pickerGroup.border#DDD6C1
pickerGroup.foreground#9b8d4e
progressBar.background#9b8d4e
quickInput.background#EEE8D5
quickInput.foreground#5b6f76
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#5b6f7645
scrollbarSlider.background#5b6f7618
scrollbarSlider.hoverBackground#5b6f762e
sideBar.background#EEE8D5
sideBar.border#DDD6C1
sideBar.foreground#829294
sideBarSectionHeader.background#EEE8D5
sideBarSectionHeader.border#DDD6C1
sideBarSectionHeader.foreground#5b6f76
sideBarTitle.foreground#586E75
statusBar.background#EEE8D5
statusBar.border#DDD6C1
statusBar.debuggingBackground#dc322f
statusBar.debuggingForeground#ffffff
statusBar.foreground#829294
statusBar.noFolderBackground#EEE8D5
tab.activeBackground#FDF6E3
tab.activeBorder#FDF6E3
tab.activeBorderTop#9b8d4e
tab.activeForeground#5b6f76
tab.border#DDD6C1
tab.inactiveBackground#EEE8D5
tab.inactiveForeground#829294
terminal.ansiBlack#073642
terminal.ansiBlue#268bd2
terminal.ansiBrightBlack#002b36
terminal.ansiBrightBlue#839496
terminal.ansiBrightCyan#93a1a1
terminal.ansiBrightGreen#586e75
terminal.ansiBrightMagenta#6c71c4
terminal.ansiBrightRed#cb4b16
terminal.ansiBrightWhite#fdf6e3
terminal.ansiBrightYellow#657b83
terminal.ansiCyan#2aa198
terminal.ansiGreen#859900
terminal.ansiMagenta#d33682
terminal.ansiRed#dc322f
terminal.ansiWhite#eee8d5
terminal.ansiYellow#b58900
terminal.background#FDF6E3
terminal.foreground#5b6f76
terminal.selectionBackground#EEE8D5
terminalCursor.foreground#9b8d4e
textBlockQuote.background#EEE8D5
textBlockQuote.border#9b8d4e
textCodeBlock.background#EEE8D5
textLink.activeForeground#839496
textLink.foreground#9b8d4e
titleBar.activeBackground#EEE8D5
titleBar.activeForeground#5b6f76
titleBar.border#DDD6C1
titleBar.inactiveBackground#EEE8D5
titleBar.inactiveForeground#586E75AA
tree.inactiveIndentGuidesStroke#5b6f7618
tree.indentGuidesStroke#5b6f763d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#829294	—
string, constant.other.symbol, markup.inline.raw	#859900	—
constant.numeric, constant.language.boolean, constant.language.null	#268bd2	—
constant, variable.other.constant	#657B83	—
keyword, storage.type, storage.modifier	#dc322f	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#657B83	—
variable.parameter, function.parameter	#829294	—
entity.name.function, support.function, variable.function, meta.function-call	#d33682	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#d33682	—
entity.name.namespace, entity.name.type.namespace	#657B83	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#268bd2	—
punctuation, meta.brace	#829294	—
entity.name.tag, punctuation.definition.tag	#dc322f	—
entity.other.attribute-name	#268bd2	—
string.regexp, constant.regexp	#839496	—
markup.heading, entity.name.section	#dc322f	bold
markup.bold, punctuation.definition.bold	#657B83	bold
markup.italic, punctuation.definition.italic	#dc322f	italic
markup.underline.link, string.other.link	#9b8d4e	underline
markup.inserted	#859900	—
markup.deleted	#dc322f	—
markup.changed	#657B83	—
invalid	#ffffff	—

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Temple 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#e4f222
activityBar.background#1d2d0f
activityBar.border#ffffff22
activityBar.foreground#c7e6da
activityBar.inactiveForeground#4e645c
activityBarBadge.background#e4f222
activityBarBadge.foreground#ffffff
badge.background#e4f222
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#c7e6da
breadcrumb.background#02120c
breadcrumb.focusForeground#c7e6da
breadcrumb.foreground#4e645c
button.background#e4f222
button.foreground#ffffff
button.hoverBackground#e4f222
button.secondaryBackground#1d2d0f
button.secondaryForeground#c7e6da
button.secondaryHoverBackground#1d2d0f
checkbox.background#1d2d0f
checkbox.border#ffffff22
commandCenter.background#1d2d0f
commandCenter.border#ffffff22
commandCenter.foreground#4e645c
debugIcon.continueForeground#e4f222
debugIcon.disconnectForeground#e4f222
debugIcon.pauseForeground#e4f222
debugIcon.restartForeground#e4f222
debugIcon.startForeground#e4f222
debugIcon.stepIntoForeground#e4f222
debugIcon.stepOutForeground#e4f222
debugIcon.stepOverForeground#e4f222
debugIcon.stopForeground#e4f222
debugToolBar.background#1d2d0f
descriptionForeground#4e645c
diffEditor.diagonalFill#4e645c26
diffEditor.insertedLineBackground#e4f22218
diffEditor.insertedTextBackground#e4f22230
diffEditor.removedLineBackground#e4f22218
diffEditor.removedTextBackground#e4f22230
disabledForeground#c7e6da66
dropdown.background#1d2d0f
dropdown.border#ffffff22
dropdown.foreground#c7e6da
editor.background#02120c
editor.findMatchBackground#c7e6da66
editor.findMatchHighlightBackground#c7e6da35
editor.findRangeHighlightBackground#e4f22218
editor.foreground#c7e6da
editor.hoverHighlightBackground#e4f22218
editor.inactiveSelectionBackground#e4f22233
editor.lineHighlightBackground#1d2d0f
editor.selectionBackground#e4f22244
editor.selectionHighlightBackground#e4f22233
editor.wordHighlightBackground#e4f22225
editor.wordHighlightStrongBackground#e4f22230
editorBracketHighlight.foreground1#e4f222
editorBracketHighlight.foreground2#c7e6da
editorBracketHighlight.foreground3#e4f222
editorBracketHighlight.foreground4#e4f222
editorBracketHighlight.foreground5#e4f222
editorBracketHighlight.foreground6#e4f222
editorBracketMatch.background#e4f22222
editorBracketMatch.border#e4f222
editorBracketPairGuide.activeBackground1#e4f222a6
editorBracketPairGuide.activeBackground2#e4f222a6
editorBracketPairGuide.activeBackground3#e4f222a6
editorBracketPairGuide.activeBackground4#e4f222a6
editorBracketPairGuide.activeBackground5#e4f222a6
editorBracketPairGuide.activeBackground6#e4f222a6
editorBracketPairGuide.background1#c7e6da24
editorBracketPairGuide.background2#c7e6da24
editorBracketPairGuide.background3#c7e6da24
editorBracketPairGuide.background4#c7e6da24
editorBracketPairGuide.background5#c7e6da24
editorBracketPairGuide.background6#c7e6da24
editorCursor.foreground#e4f222
editorError.foreground#e4f222
editorGroup.border#ffffff22
editorGroupHeader.tabsBackground#1d2d0f
editorGroupHeader.tabsBorder#ffffff22
editorGutter.addedBackground#e4f222
editorGutter.deletedBackground#e4f222
editorGutter.modifiedBackground#e4f222
editorHint.foreground#e4f222
editorHoverWidget.background#1d2d0f
editorHoverWidget.border#ffffff22
editorIndentGuide.activeBackground1#e4f222a6
editorIndentGuide.background1#c7e6da24
editorInfo.foreground#e4f222
editorLineNumber.activeForeground#4e645c
editorLineNumber.foreground#4e645c
editorSuggestWidget.background#1d2d0f
editorSuggestWidget.border#ffffff22
editorSuggestWidget.selectedBackground#1d2d0f
editorWarning.foreground#e4f222
editorWhitespace.foreground#c7e6da24
editorWidget.background#1d2d0f
editorWidget.border#ffffff22
editorWidget.foreground#c7e6da
errorForeground#e4f222
focusBorder#e4f222
foreground#c7e6da
gitDecoration.addedResourceForeground#e4f222
gitDecoration.conflictingResourceForeground#c7e6da
gitDecoration.deletedResourceForeground#e4f222
gitDecoration.ignoredResourceForeground#4e645c
gitDecoration.modifiedResourceForeground#e4f222
gitDecoration.renamedResourceForeground#e4f222
gitDecoration.untrackedResourceForeground#e4f222
icon.foreground#4e645c
input.background#1d2d0f
input.border#ffffff22
input.foreground#c7e6da
input.placeholderForeground#4e645c
inputOption.activeBackground#e4f22255
inputOption.activeBorder#e4f222
inputValidation.errorBackground#e4f22222
inputValidation.errorBorder#e4f222
inputValidation.infoBackground#e4f22222
inputValidation.infoBorder#e4f222
inputValidation.warningBackground#e4f22222
inputValidation.warningBorder#e4f222
list.activeSelectionBackground#e4f22255
list.activeSelectionForeground#c7e6da
list.errorForeground#e4f222
list.focusBackground#e4f22244
list.highlightForeground#e4f222
list.hoverBackground#1d2d0f
list.inactiveSelectionBackground#e4f22233
list.warningForeground#e4f222
menu.background#1d2d0f
menu.foreground#c7e6da
menu.selectionBackground#e4f22244
menu.separatorBackground#ffffff22
minimap.background#02120c
minimap.findMatchHighlight#c7e6da80
minimap.selectionHighlight#e4f22266
notificationCenter.border#ffffff22
notificationCenterHeader.background#1d2d0f
notifications.background#1d2d0f
notifications.border#ffffff22
notifications.foreground#c7e6da
panel.background#1d2d0f
panel.border#ffffff22
panelTitle.activeBorder#e4f222
panelTitle.activeForeground#c7e6da
panelTitle.inactiveForeground#4e645c
peekView.border#e4f222
peekViewEditor.background#02120c
peekViewResult.background#1d2d0f
peekViewResult.selectionBackground#e4f22244
peekViewTitle.background#1d2d0f
pickerGroup.border#ffffff22
pickerGroup.foreground#e4f222
progressBar.background#e4f222
quickInput.background#1d2d0f
quickInput.foreground#c7e6da
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#c7e6da45
scrollbarSlider.background#c7e6da18
scrollbarSlider.hoverBackground#c7e6da2e
sideBar.background#1d2d0f
sideBar.border#ffffff22
sideBar.foreground#c7e6da
sideBarSectionHeader.background#1d2d0f
sideBarSectionHeader.border#ffffff22
sideBarSectionHeader.foreground#c7e6da
sideBarTitle.foreground#c7e6da
statusBar.background#1d2d0f
statusBar.border#ffffff22
statusBar.debuggingBackground#e4f222
statusBar.debuggingForeground#111111
statusBar.foreground#4e645c
statusBar.noFolderBackground#1d2d0f
tab.activeBackground#02120c
tab.activeBorder#02120c
tab.activeBorderTop#e4f222
tab.activeForeground#c7e6da
tab.border#ffffff22
tab.inactiveBackground#1d2d0f
tab.inactiveForeground#4e645c
terminal.ansiBlack#111111
terminal.ansiBlue#e4f222
terminal.ansiBrightBlack#4e645c
terminal.ansiBrightBlue#e4f222
terminal.ansiBrightCyan#e4f222
terminal.ansiBrightGreen#e4f222
terminal.ansiBrightMagenta#e4f222
terminal.ansiBrightRed#e4f222
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#c7e6da
terminal.ansiCyan#e4f222
terminal.ansiGreen#e4f222
terminal.ansiMagenta#e4f222
terminal.ansiRed#e4f222
terminal.ansiWhite#d6d6d6
terminal.ansiYellow#e4f222
terminal.background#02120c
terminal.foreground#c7e6da
terminal.selectionBackground#e4f22244
terminalCursor.foreground#e4f222
textBlockQuote.background#1d2d0f
textBlockQuote.border#e4f222
textCodeBlock.background#1d2d0f
textLink.activeForeground#e4f222
textLink.foreground#e4f222
titleBar.activeBackground#1d2d0f
titleBar.activeForeground#c7e6da
titleBar.border#ffffff22
titleBar.inactiveBackground#1d2d0f
titleBar.inactiveForeground#4e645c
tree.inactiveIndentGuidesStroke#c7e6da24
tree.indentGuidesStroke#c7e6da52
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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