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 — Lobster 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#ff5c5c
activityBar.background#111827
activityBar.border#ffffff22
activityBar.foreground#e4e4e7
activityBar.inactiveForeground#71717a
activityBarBadge.background#ff5c5c
activityBarBadge.foreground#ffffff
badge.background#ff5c5c
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#e4e4e7
breadcrumb.background#111827
breadcrumb.focusForeground#e4e4e7
breadcrumb.foreground#71717a
button.background#ff5c5c
button.foreground#ffffff
button.hoverBackground#f59e0b
button.secondaryBackground#111827
button.secondaryForeground#e4e4e7
button.secondaryHoverBackground#111827
checkbox.background#111827
checkbox.border#ffffff22
commandCenter.background#111827
commandCenter.border#ffffff22
commandCenter.foreground#71717a
debugIcon.continueForeground#14b8a6
debugIcon.disconnectForeground#ff5c5c
debugIcon.pauseForeground#f59e0b
debugIcon.restartForeground#14b8a6
debugIcon.startForeground#14b8a6
debugIcon.stepIntoForeground#f59e0b
debugIcon.stepOutForeground#f59e0b
debugIcon.stepOverForeground#f59e0b
debugIcon.stopForeground#ff5c5c
debugToolBar.background#111827
descriptionForeground#71717a
diffEditor.diagonalFill#71717a26
diffEditor.insertedLineBackground#14b8a618
diffEditor.insertedTextBackground#14b8a630
diffEditor.removedLineBackground#ff5c5c18
diffEditor.removedTextBackground#ff5c5c30
disabledForeground#e4e4e766
dropdown.background#111827
dropdown.border#ffffff22
dropdown.foreground#e4e4e7
editor.background#111827
editor.findMatchBackground#e4e4e766
editor.findMatchHighlightBackground#e4e4e735
editor.findRangeHighlightBackground#ff5c5c18
editor.foreground#e4e4e7
editor.hoverHighlightBackground#ff5c5c18
editor.inactiveSelectionBackground#ff5c5c33
editor.lineHighlightBackground#111827
editor.selectionBackground#ff5c5c44
editor.selectionHighlightBackground#ff5c5c33
editor.wordHighlightBackground#f59e0b25
editor.wordHighlightStrongBackground#22c55e30
editorBracketHighlight.foreground1#ff5c5c
editorBracketHighlight.foreground2#e4e4e7
editorBracketHighlight.foreground3#14b8a6
editorBracketHighlight.foreground4#f59e0b
editorBracketHighlight.foreground5#22c55e
editorBracketHighlight.foreground6#f59e0b
editorBracketMatch.background#ff5c5c22
editorBracketMatch.border#ff5c5c
editorBracketPairGuide.activeBackground1#ff5c5ca6
editorBracketPairGuide.activeBackground2#ff5c5ca6
editorBracketPairGuide.activeBackground3#ff5c5ca6
editorBracketPairGuide.activeBackground4#ff5c5ca6
editorBracketPairGuide.activeBackground5#ff5c5ca6
editorBracketPairGuide.activeBackground6#ff5c5ca6
editorBracketPairGuide.background1#e4e4e724
editorBracketPairGuide.background2#e4e4e724
editorBracketPairGuide.background3#e4e4e724
editorBracketPairGuide.background4#e4e4e724
editorBracketPairGuide.background5#e4e4e724
editorBracketPairGuide.background6#e4e4e724
editorCursor.foreground#ff5c5c
editorError.foreground#ff5c5c
editorGroup.border#ffffff22
editorGroupHeader.tabsBackground#1a1d25
editorGroupHeader.tabsBorder#ffffff22
editorGutter.addedBackground#14b8a6
editorGutter.deletedBackground#ff5c5c
editorGutter.modifiedBackground#f59e0b
editorHint.foreground#14b8a6
editorHoverWidget.background#111827
editorHoverWidget.border#ffffff22
editorIndentGuide.activeBackground1#ff5c5ca6
editorIndentGuide.background1#e4e4e724
editorInfo.foreground#f59e0b
editorLineNumber.activeForeground#71717a
editorLineNumber.foreground#71717a
editorSuggestWidget.background#111827
editorSuggestWidget.border#ffffff22
editorSuggestWidget.selectedBackground#111827
editorWarning.foreground#14b8a6
editorWhitespace.foreground#e4e4e724
editorWidget.background#111827
editorWidget.border#ffffff22
editorWidget.foreground#e4e4e7
errorForeground#ff5c5c
focusBorder#ff5c5c
foreground#e4e4e7
gitDecoration.addedResourceForeground#14b8a6
gitDecoration.conflictingResourceForeground#e4e4e7
gitDecoration.deletedResourceForeground#ff5c5c
gitDecoration.ignoredResourceForeground#71717a
gitDecoration.modifiedResourceForeground#f59e0b
gitDecoration.renamedResourceForeground#22c55e
gitDecoration.untrackedResourceForeground#14b8a6
icon.foreground#71717a
input.background#111827
input.border#ffffff22
input.foreground#e4e4e7
input.placeholderForeground#71717a
inputOption.activeBackground#ff5c5c55
inputOption.activeBorder#ff5c5c
inputValidation.errorBackground#ff5c5c22
inputValidation.errorBorder#ff5c5c
inputValidation.infoBackground#f59e0b22
inputValidation.infoBorder#f59e0b
inputValidation.warningBackground#14b8a622
inputValidation.warningBorder#14b8a6
list.activeSelectionBackground#ff5c5c55
list.activeSelectionForeground#e4e4e7
list.errorForeground#ff5c5c
list.focusBackground#ff5c5c44
list.highlightForeground#ff5c5c
list.hoverBackground#111827
list.inactiveSelectionBackground#ff5c5c33
list.warningForeground#14b8a6
menu.background#111827
menu.foreground#e4e4e7
menu.selectionBackground#ff5c5c44
menu.separatorBackground#ffffff22
minimap.background#111827
minimap.findMatchHighlight#e4e4e780
minimap.selectionHighlight#ff5c5c66
notificationCenter.border#ffffff22
notificationCenterHeader.background#111827
notifications.background#111827
notifications.border#ffffff22
notifications.foreground#e4e4e7
panel.background#111827
panel.border#ffffff22
panelTitle.activeBorder#ff5c5c
panelTitle.activeForeground#e4e4e7
panelTitle.inactiveForeground#71717a
peekView.border#ff5c5c
peekViewEditor.background#111827
peekViewResult.background#111827
peekViewResult.selectionBackground#ff5c5c44
peekViewTitle.background#111827
pickerGroup.border#ffffff22
pickerGroup.foreground#ff5c5c
progressBar.background#ff5c5c
quickInput.background#111827
quickInput.foreground#e4e4e7
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#e4e4e745
scrollbarSlider.background#e4e4e718
scrollbarSlider.hoverBackground#e4e4e72e
sideBar.background#111827
sideBar.border#ffffff22
sideBar.foreground#e4e4e7
sideBarSectionHeader.background#111827
sideBarSectionHeader.border#ffffff22
sideBarSectionHeader.foreground#e4e4e7
sideBarTitle.foreground#fafafa
statusBar.background#111827
statusBar.border#ffffff22
statusBar.debuggingBackground#ff5c5c
statusBar.debuggingForeground#111111
statusBar.foreground#71717a
statusBar.noFolderBackground#111827
tab.activeBackground#111827
tab.activeBorder#111827
tab.activeBorderTop#ff5c5c
tab.activeForeground#e4e4e7
tab.border#ffffff22
tab.inactiveBackground#111827
tab.inactiveForeground#71717a
terminal.ansiBlack#111111
terminal.ansiBlue#f59e0b
terminal.ansiBrightBlack#71717a
terminal.ansiBrightBlue#f59e0b
terminal.ansiBrightCyan#f59e0b
terminal.ansiBrightGreen#14b8a6
terminal.ansiBrightMagenta#22c55e
terminal.ansiBrightRed#ff5c5c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e4e4e7
terminal.ansiCyan#f59e0b
terminal.ansiGreen#14b8a6
terminal.ansiMagenta#22c55e
terminal.ansiRed#ff5c5c
terminal.ansiWhite#d6d6d6
terminal.ansiYellow#14b8a6
terminal.background#111827
terminal.foreground#e4e4e7
terminal.selectionBackground#ff5c5c44
terminalCursor.foreground#ff5c5c
textBlockQuote.background#111827
textBlockQuote.border#ff5c5c
textCodeBlock.background#111827
textLink.activeForeground#f59e0b
textLink.foreground#ff5c5c
titleBar.activeBackground#111827
titleBar.activeForeground#e4e4e7
titleBar.border#ffffff22
titleBar.inactiveBackground#111827
titleBar.inactiveForeground#71717a
tree.inactiveIndentGuidesStroke#e4e4e724
tree.indentGuidesStroke#e4e4e752
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Material 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#80CBC4
activityBar.background#212121
activityBar.border#21212160
activityBar.foreground#EEFFFF
activityBar.inactiveForeground#424242
activityBarBadge.background#80CBC4
activityBarBadge.foreground#000000
badge.background#717171
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#EEFFFF
breadcrumb.background#212121
breadcrumb.focusForeground#EEFFFF
breadcrumb.foreground#6b6e6e
button.background#61616150
button.foreground#ffffff
button.hoverBackground#82AAFF
button.secondaryBackground#212121
button.secondaryForeground#EEFFFF
button.secondaryHoverBackground#212121
checkbox.background#212121
checkbox.border#21212160
commandCenter.background#212121
commandCenter.border#21212160
commandCenter.foreground#6b6e6e
debugIcon.continueForeground#C3E88D
debugIcon.disconnectForeground#f07178
debugIcon.pauseForeground#82AAFF
debugIcon.restartForeground#C3E88D
debugIcon.startForeground#C3E88D
debugIcon.stepIntoForeground#82AAFF
debugIcon.stepOutForeground#82AAFF
debugIcon.stepOverForeground#82AAFF
debugIcon.stopForeground#f07178
debugToolBar.background#212121
descriptionForeground#6b6e6e
diffEditor.diagonalFill#6b6e6e26
diffEditor.insertedLineBackground#C3E88D18
diffEditor.insertedTextBackground#C3E88D30
diffEditor.removedLineBackground#f0717818
diffEditor.removedTextBackground#f0717830
disabledForeground#EEFFFF66
dropdown.background#212121
dropdown.border#21212160
dropdown.foreground#EEFFFF
editor.background#212121
editor.findMatchBackground#f0717866
editor.findMatchHighlightBackground#f0717835
editor.findRangeHighlightBackground#71717118
editor.foreground#EEFFFF
editor.hoverHighlightBackground#71717118
editor.inactiveSelectionBackground#71717133
editor.lineHighlightBackground#212121
editor.selectionBackground#61616150
editor.selectionHighlightBackground#71717133
editor.wordHighlightBackground#82AAFF25
editor.wordHighlightStrongBackground#C792EA30
editorBracketHighlight.foreground1#f07178
editorBracketHighlight.foreground2#f07178
editorBracketHighlight.foreground3#C3E88D
editorBracketHighlight.foreground4#82AAFF
editorBracketHighlight.foreground5#C792EA
editorBracketHighlight.foreground6#82AAFF
editorBracketMatch.background#71717122
editorBracketMatch.border#717171
editorBracketPairGuide.activeBackground1#717171a6
editorBracketPairGuide.activeBackground2#717171a6
editorBracketPairGuide.activeBackground3#717171a6
editorBracketPairGuide.activeBackground4#717171a6
editorBracketPairGuide.activeBackground5#717171a6
editorBracketPairGuide.activeBackground6#717171a6
editorBracketPairGuide.background1#EEFFFF24
editorBracketPairGuide.background2#EEFFFF24
editorBracketPairGuide.background3#EEFFFF24
editorBracketPairGuide.background4#EEFFFF24
editorBracketPairGuide.background5#EEFFFF24
editorBracketPairGuide.background6#EEFFFF24
editorCursor.foreground#FFCC00
editorError.foreground#f07178
editorGroup.border#21212160
editorGroupHeader.tabsBackground#212121
editorGroupHeader.tabsBorder#21212160
editorGutter.addedBackground#C3E88D
editorGutter.deletedBackground#f07178
editorGutter.modifiedBackground#82AAFF
editorHint.foreground#C3E88D
editorHoverWidget.background#212121
editorHoverWidget.border#21212160
editorIndentGuide.activeBackground1#717171a6
editorIndentGuide.background1#EEFFFF24
editorInfo.foreground#82AAFF
editorLineNumber.activeForeground#6b6e6e
editorLineNumber.foreground#424242
editorSuggestWidget.background#212121
editorSuggestWidget.border#21212160
editorSuggestWidget.selectedBackground#212121
editorWarning.foreground#FFCB6B
editorWhitespace.foreground#EEFFFF24
editorWidget.background#212121
editorWidget.border#21212160
editorWidget.foreground#EEFFFF
errorForeground#f07178
focusBorder#FFFFFF00
foreground#EEFFFF
gitDecoration.addedResourceForeground#C3E88D
gitDecoration.conflictingResourceForeground#f07178
gitDecoration.deletedResourceForeground#f0717890
gitDecoration.ignoredResourceForeground#424242
gitDecoration.modifiedResourceForeground#82AAFF90
gitDecoration.renamedResourceForeground#C792EA
gitDecoration.untrackedResourceForeground#C3E88D90
icon.foreground#6b6e6e
input.background#212121
input.border#21212160
input.foreground#EEFFFF
input.placeholderForeground#424242
inputOption.activeBackground#71717155
inputOption.activeBorder#717171
inputValidation.errorBackground#f0717822
inputValidation.errorBorder#f07178
inputValidation.infoBackground#82AAFF22
inputValidation.infoBorder#82AAFF
inputValidation.warningBackground#FFCB6B22
inputValidation.warningBorder#FFCB6B
list.activeSelectionBackground#71717155
list.activeSelectionForeground#EEFFFF
list.errorForeground#f07178
list.focusBackground#71717144
list.highlightForeground#717171
list.hoverBackground#212121
list.inactiveSelectionBackground#71717133
list.warningForeground#FFCB6B
menu.background#212121
menu.foreground#EEFFFF
menu.selectionBackground#61616150
menu.separatorBackground#21212160
minimap.background#212121
minimap.findMatchHighlight#f0717880
minimap.selectionHighlight#71717166
notificationCenter.border#21212160
notificationCenterHeader.background#212121
notifications.background#212121
notifications.border#21212160
notifications.foreground#EEFFFF
panel.background#212121
panel.border#21212160
panelTitle.activeBorder#717171
panelTitle.activeForeground#EEFFFF
panelTitle.inactiveForeground#6b6e6e
peekView.border#717171
peekViewEditor.background#212121
peekViewResult.background#212121
peekViewResult.selectionBackground#61616150
peekViewTitle.background#212121
pickerGroup.border#21212160
pickerGroup.foreground#717171
progressBar.background#717171
quickInput.background#212121
quickInput.foreground#EEFFFF
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#EEFFFF45
scrollbarSlider.background#EEFFFF18
scrollbarSlider.hoverBackground#EEFFFF2e
sideBar.background#212121
sideBar.border#21212160
sideBar.foreground#676767
sideBarSectionHeader.background#212121
sideBarSectionHeader.border#21212160
sideBarSectionHeader.foreground#EEFFFF
sideBarTitle.foreground#EEFFFF
statusBar.background#212121
statusBar.border#21212160
statusBar.debuggingBackground#f07178
statusBar.debuggingForeground#111111
statusBar.foreground#6b6e6e
statusBar.noFolderBackground#212121
tab.activeBackground#212121
tab.activeBorder#212121
tab.activeBorderTop#717171
tab.activeForeground#EEFFFF
tab.border#21212160
tab.inactiveBackground#212121
tab.inactiveForeground#6b6e6e
terminal.ansiBlack#000000
terminal.ansiBlue#82AAFF
terminal.ansiBrightBlack#545454
terminal.ansiBrightBlue#82AAFF
terminal.ansiBrightCyan#89DDFF
terminal.ansiBrightGreen#C3E88D
terminal.ansiBrightMagenta#C792EA
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFCB6B
terminal.ansiCyan#89DDFF
terminal.ansiGreen#C3E88D
terminal.ansiMagenta#C792EA
terminal.ansiRed#f07178
terminal.ansiWhite#ffffff
terminal.ansiYellow#FFCB6B
terminal.background#212121
terminal.foreground#EEFFFF
terminal.selectionBackground#61616150
terminalCursor.foreground#717171
textBlockQuote.background#212121
textBlockQuote.border#717171
textCodeBlock.background#212121
textLink.activeForeground#EEFFFF
textLink.foreground#80CBC4
titleBar.activeBackground#212121
titleBar.activeForeground#EEFFFF
titleBar.border#21212160
titleBar.inactiveBackground#212121
titleBar.inactiveForeground#424242
tree.inactiveIndentGuidesStroke#EEFFFF24
tree.indentGuidesStroke#EEFFFF52
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Matrix 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#1eff5a
activityBar.background#020402
activityBar.border#ffffff22
activityBar.foreground#b8ffca
activityBar.inactiveForeground#3f8f52
activityBarBadge.background#1eff5a
activityBarBadge.foreground#ffffff
badge.background#1eff5a
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#b8ffca
breadcrumb.background#040805
breadcrumb.focusForeground#b8ffca
breadcrumb.foreground#3f8f52
button.background#1eff5a
button.foreground#ffffff
button.hoverBackground#55ff7d
button.secondaryBackground#020402
button.secondaryForeground#b8ffca
button.secondaryHoverBackground#020402
checkbox.background#020402
checkbox.border#ffffff22
commandCenter.background#020402
commandCenter.border#ffffff22
commandCenter.foreground#3f8f52
debugIcon.continueForeground#7dff95
debugIcon.disconnectForeground#1eff5a
debugIcon.pauseForeground#55ff7d
debugIcon.restartForeground#7dff95
debugIcon.startForeground#7dff95
debugIcon.stepIntoForeground#55ff7d
debugIcon.stepOutForeground#55ff7d
debugIcon.stepOverForeground#55ff7d
debugIcon.stopForeground#1eff5a
debugToolBar.background#020402
descriptionForeground#3f8f52
diffEditor.diagonalFill#3f8f5226
diffEditor.insertedLineBackground#7dff9518
diffEditor.insertedTextBackground#7dff9530
diffEditor.removedLineBackground#1eff5a18
diffEditor.removedTextBackground#1eff5a30
disabledForeground#b8ffca66
dropdown.background#020402
dropdown.border#ffffff22
dropdown.foreground#b8ffca
editor.background#040805
editor.findMatchBackground#b8ffca66
editor.findMatchHighlightBackground#b8ffca35
editor.findRangeHighlightBackground#1eff5a18
editor.foreground#b8ffca
editor.hoverHighlightBackground#1eff5a18
editor.inactiveSelectionBackground#1eff5a33
editor.lineHighlightBackground#020402
editor.selectionBackground#1eff5a44
editor.selectionHighlightBackground#1eff5a33
editor.wordHighlightBackground#55ff7d25
editor.wordHighlightStrongBackground#9bffb830
editorBracketHighlight.foreground1#1eff5a
editorBracketHighlight.foreground2#b8ffca
editorBracketHighlight.foreground3#7dff95
editorBracketHighlight.foreground4#55ff7d
editorBracketHighlight.foreground5#9bffb8
editorBracketHighlight.foreground6#55ff7d
editorBracketMatch.background#1eff5a22
editorBracketMatch.border#1eff5a
editorBracketPairGuide.activeBackground1#1eff5aa6
editorBracketPairGuide.activeBackground2#1eff5aa6
editorBracketPairGuide.activeBackground3#1eff5aa6
editorBracketPairGuide.activeBackground4#1eff5aa6
editorBracketPairGuide.activeBackground5#1eff5aa6
editorBracketPairGuide.activeBackground6#1eff5aa6
editorBracketPairGuide.background1#b8ffca24
editorBracketPairGuide.background2#b8ffca24
editorBracketPairGuide.background3#b8ffca24
editorBracketPairGuide.background4#b8ffca24
editorBracketPairGuide.background5#b8ffca24
editorBracketPairGuide.background6#b8ffca24
editorCursor.foreground#1eff5a
editorError.foreground#1eff5a
editorGroup.border#ffffff22
editorGroupHeader.tabsBackground#020402
editorGroupHeader.tabsBorder#ffffff22
editorGutter.addedBackground#7dff95
editorGutter.deletedBackground#1eff5a
editorGutter.modifiedBackground#55ff7d
editorHint.foreground#7dff95
editorHoverWidget.background#020402
editorHoverWidget.border#ffffff22
editorIndentGuide.activeBackground1#1eff5aa6
editorIndentGuide.background1#b8ffca24
editorInfo.foreground#55ff7d
editorLineNumber.activeForeground#3f8f52
editorLineNumber.foreground#3f8f52
editorSuggestWidget.background#020402
editorSuggestWidget.border#ffffff22
editorSuggestWidget.selectedBackground#020402
editorWarning.foreground#7dff95
editorWhitespace.foreground#b8ffca24
editorWidget.background#020402
editorWidget.border#ffffff22
editorWidget.foreground#b8ffca
errorForeground#1eff5a
focusBorder#1eff5a
foreground#b8ffca
gitDecoration.addedResourceForeground#7dff95
gitDecoration.conflictingResourceForeground#b8ffca
gitDecoration.deletedResourceForeground#1eff5a
gitDecoration.ignoredResourceForeground#3f8f52
gitDecoration.modifiedResourceForeground#55ff7d
gitDecoration.renamedResourceForeground#9bffb8
gitDecoration.untrackedResourceForeground#7dff95
icon.foreground#3f8f52
input.background#020402
input.border#ffffff22
input.foreground#b8ffca
input.placeholderForeground#3f8f52
inputOption.activeBackground#1eff5a55
inputOption.activeBorder#1eff5a
inputValidation.errorBackground#1eff5a22
inputValidation.errorBorder#1eff5a
inputValidation.infoBackground#55ff7d22
inputValidation.infoBorder#55ff7d
inputValidation.warningBackground#7dff9522
inputValidation.warningBorder#7dff95
list.activeSelectionBackground#1eff5a55
list.activeSelectionForeground#b8ffca
list.errorForeground#1eff5a
list.focusBackground#1eff5a44
list.highlightForeground#1eff5a
list.hoverBackground#020402
list.inactiveSelectionBackground#1eff5a33
list.warningForeground#7dff95
menu.background#020402
menu.foreground#b8ffca
menu.selectionBackground#1eff5a44
menu.separatorBackground#ffffff22
minimap.background#040805
minimap.findMatchHighlight#b8ffca80
minimap.selectionHighlight#1eff5a66
notificationCenter.border#ffffff22
notificationCenterHeader.background#020402
notifications.background#020402
notifications.border#ffffff22
notifications.foreground#b8ffca
panel.background#020402
panel.border#ffffff22
panelTitle.activeBorder#1eff5a
panelTitle.activeForeground#b8ffca
panelTitle.inactiveForeground#3f8f52
peekView.border#1eff5a
peekViewEditor.background#040805
peekViewResult.background#020402
peekViewResult.selectionBackground#1eff5a44
peekViewTitle.background#020402
pickerGroup.border#ffffff22
pickerGroup.foreground#1eff5a
progressBar.background#1eff5a
quickInput.background#020402
quickInput.foreground#b8ffca
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#b8ffca45
scrollbarSlider.background#b8ffca18
scrollbarSlider.hoverBackground#b8ffca2e
sideBar.background#020402
sideBar.border#ffffff22
sideBar.foreground#9bffb8
sideBarSectionHeader.background#020402
sideBarSectionHeader.border#ffffff22
sideBarSectionHeader.foreground#b8ffca
sideBarTitle.foreground#d8ffe2
statusBar.background#020402
statusBar.border#ffffff22
statusBar.debuggingBackground#1eff5a
statusBar.debuggingForeground#111111
statusBar.foreground#3f8f52
statusBar.noFolderBackground#020402
tab.activeBackground#040805
tab.activeBorder#040805
tab.activeBorderTop#1eff5a
tab.activeForeground#b8ffca
tab.border#ffffff22
tab.inactiveBackground#020402
tab.inactiveForeground#3f8f52
terminal.ansiBlack#111111
terminal.ansiBlue#55ff7d
terminal.ansiBrightBlack#3f8f52
terminal.ansiBrightBlue#55ff7d
terminal.ansiBrightCyan#55ff7d
terminal.ansiBrightGreen#7dff95
terminal.ansiBrightMagenta#9bffb8
terminal.ansiBrightRed#1eff5a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#b8ffca
terminal.ansiCyan#55ff7d
terminal.ansiGreen#7dff95
terminal.ansiMagenta#9bffb8
terminal.ansiRed#1eff5a
terminal.ansiWhite#d6d6d6
terminal.ansiYellow#7dff95
terminal.background#040805
terminal.foreground#b8ffca
terminal.selectionBackground#1eff5a44
terminalCursor.foreground#1eff5a
textBlockQuote.background#020402
textBlockQuote.border#1eff5a
textCodeBlock.background#020402
textLink.activeForeground#55ff7d
textLink.foreground#1eff5a
titleBar.activeBackground#020402
titleBar.activeForeground#b8ffca
titleBar.border#ffffff22
titleBar.inactiveBackground#020402
titleBar.inactiveForeground#3f8f52
tree.inactiveIndentGuidesStroke#b8ffca24
tree.indentGuidesStroke#b8ffca52
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Monokai

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#75715E
activityBar.background#272822
activityBar.border#414339
activityBar.foreground#f8f8f2
activityBar.inactiveForeground#90908a
activityBarBadge.background#75715E
activityBarBadge.foreground#ffffff
badge.background#75715E
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#f8f8f2
breadcrumb.background#272822
breadcrumb.focusForeground#f8f8f2
breadcrumb.foreground#88846f
button.background#75715E
button.foreground#ffffff
button.hoverBackground#819aff
button.secondaryBackground#1e1f1c
button.secondaryForeground#f8f8f2
button.secondaryHoverBackground#3e3d32
checkbox.background#1e1f1c
checkbox.border#414339
commandCenter.background#1e1f1c
commandCenter.border#414339
commandCenter.foreground#88846f
debugIcon.continueForeground#86B42B
debugIcon.disconnectForeground#C4265E
debugIcon.pauseForeground#6A7EC8
debugIcon.restartForeground#86B42B
debugIcon.startForeground#86B42B
debugIcon.stepIntoForeground#6A7EC8
debugIcon.stepOutForeground#6A7EC8
debugIcon.stepOverForeground#6A7EC8
debugIcon.stopForeground#C4265E
debugToolBar.background#1e1f1c
descriptionForeground#88846f
diffEditor.diagonalFill#88846f26
diffEditor.insertedLineBackground#86B42B18
diffEditor.insertedTextBackground#86B42B30
diffEditor.removedLineBackground#C4265E18
diffEditor.removedTextBackground#C4265E30
disabledForeground#f8f8f266
dropdown.background#1e1f1c
dropdown.border#414339
dropdown.foreground#f8f8f2
editor.background#272822
editor.findMatchBackground#F8F8F266
editor.findMatchHighlightBackground#F8F8F235
editor.findRangeHighlightBackground#75715E18
editor.foreground#f8f8f2
editor.hoverHighlightBackground#75715E18
editor.inactiveSelectionBackground#75715E33
editor.lineHighlightBackground#1e1f1c
editor.selectionBackground#878b9180
editor.selectionHighlightBackground#75715E33
editor.wordHighlightBackground#6A7EC825
editor.wordHighlightStrongBackground#8C6BC830
editorBracketHighlight.foreground1#C4265E
editorBracketHighlight.foreground2#F8F8F2
editorBracketHighlight.foreground3#86B42B
editorBracketHighlight.foreground4#6A7EC8
editorBracketHighlight.foreground5#8C6BC8
editorBracketHighlight.foreground6#819aff
editorBracketMatch.background#75715E22
editorBracketMatch.border#75715E
editorBracketPairGuide.activeBackground1#75715Ea6
editorBracketPairGuide.activeBackground2#75715Ea6
editorBracketPairGuide.activeBackground3#75715Ea6
editorBracketPairGuide.activeBackground4#75715Ea6
editorBracketPairGuide.activeBackground5#75715Ea6
editorBracketPairGuide.activeBackground6#75715Ea6
editorBracketPairGuide.background1#f8f8f224
editorBracketPairGuide.background2#f8f8f224
editorBracketPairGuide.background3#f8f8f224
editorBracketPairGuide.background4#f8f8f224
editorBracketPairGuide.background5#f8f8f224
editorBracketPairGuide.background6#f8f8f224
editorCursor.foreground#f8f8f0
editorError.foreground#C4265E
editorGroup.border#414339
editorGroupHeader.tabsBackground#1e1f1c
editorGroupHeader.tabsBorder#414339
editorGutter.addedBackground#86B42B
editorGutter.deletedBackground#C4265E
editorGutter.modifiedBackground#6A7EC8
editorHint.foreground#86B42B
editorHoverWidget.background#1e1f1c
editorHoverWidget.border#414339
editorIndentGuide.activeBackground1#75715Ea6
editorIndentGuide.background1#f8f8f224
editorInfo.foreground#6A7EC8
editorLineNumber.activeForeground#88846f
editorLineNumber.foreground#90908a
editorSuggestWidget.background#1e1f1c
editorSuggestWidget.border#414339
editorSuggestWidget.selectedBackground#3e3d32
editorWarning.foreground#B3B42B
editorWhitespace.foreground#f8f8f224
editorWidget.background#1e1f1c
editorWidget.border#414339
editorWidget.foreground#f8f8f2
errorForeground#C4265E
focusBorder#99947c
foreground#f8f8f2
gitDecoration.addedResourceForeground#86B42B
gitDecoration.conflictingResourceForeground#F8F8F2
gitDecoration.deletedResourceForeground#C4265E
gitDecoration.ignoredResourceForeground#90908a
gitDecoration.modifiedResourceForeground#6A7EC8
gitDecoration.renamedResourceForeground#8C6BC8
gitDecoration.untrackedResourceForeground#86B42B
icon.foreground#88846f
input.background#1e1f1c
input.border#414339
input.foreground#f8f8f2
input.placeholderForeground#90908a
inputOption.activeBackground#75715E55
inputOption.activeBorder#75715E
inputValidation.errorBackground#C4265E22
inputValidation.errorBorder#C4265E
inputValidation.infoBackground#6A7EC822
inputValidation.infoBorder#6A7EC8
inputValidation.warningBackground#B3B42B22
inputValidation.warningBorder#B3B42B
list.activeSelectionBackground#75715E55
list.activeSelectionForeground#f8f8f2
list.errorForeground#C4265E
list.focusBackground#75715E44
list.highlightForeground#75715E
list.hoverBackground#3e3d32
list.inactiveSelectionBackground#75715E33
list.warningForeground#B3B42B
menu.background#1e1f1c
menu.foreground#f8f8f2
menu.selectionBackground#878b9180
menu.separatorBackground#414339
minimap.background#272822
minimap.findMatchHighlight#F8F8F280
minimap.selectionHighlight#75715E66
notificationCenter.border#414339
notificationCenterHeader.background#1e1f1c
notifications.background#1e1f1c
notifications.border#414339
notifications.foreground#f8f8f2
panel.background#1e1f1c
panel.border#414339
panelTitle.activeBorder#75715E
panelTitle.activeForeground#f8f8f2
panelTitle.inactiveForeground#88846f
peekView.border#75715E
peekViewEditor.background#272822
peekViewResult.background#1e1f1c
peekViewResult.selectionBackground#878b9180
peekViewTitle.background#1e1f1c
pickerGroup.border#414339
pickerGroup.foreground#75715E
progressBar.background#75715E
quickInput.background#1e1f1c
quickInput.foreground#f8f8f2
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#f8f8f245
scrollbarSlider.background#f8f8f218
scrollbarSlider.hoverBackground#f8f8f22e
sideBar.background#1e1f1c
sideBar.border#414339
sideBar.foreground#88846f
sideBarSectionHeader.background#272822
sideBarSectionHeader.border#414339
sideBarSectionHeader.foreground#f8f8f2
sideBarTitle.foreground#f8f8f2
statusBar.background#1e1f1c
statusBar.border#414339
statusBar.debuggingBackground#C4265E
statusBar.debuggingForeground#111111
statusBar.foreground#88846f
statusBar.noFolderBackground#1e1f1c
tab.activeBackground#272822
tab.activeBorder#272822
tab.activeBorderTop#75715E
tab.activeForeground#f8f8f2
tab.border#414339
tab.inactiveBackground#1e1f1c
tab.inactiveForeground#88846f
terminal.ansiBlack#333333
terminal.ansiBlue#6A7EC8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#819aff
terminal.ansiBrightCyan#66D9EF
terminal.ansiBrightGreen#A6E22E
terminal.ansiBrightMagenta#AE81FF
terminal.ansiBrightRed#f92672
terminal.ansiBrightWhite#f8f8f2
terminal.ansiBrightYellow#e2e22e
terminal.ansiCyan#56ADBC
terminal.ansiGreen#86B42B
terminal.ansiMagenta#8C6BC8
terminal.ansiRed#C4265E
terminal.ansiWhite#e3e3dd
terminal.ansiYellow#B3B42B
terminal.background#272822
terminal.foreground#f8f8f2
terminal.selectionBackground#878b9180
terminalCursor.foreground#75715E
textBlockQuote.background#1e1f1c
textBlockQuote.border#75715E
textCodeBlock.background#1e1f1c
textLink.activeForeground#819aff
textLink.foreground#75715E
titleBar.activeBackground#1e1f1c
titleBar.activeForeground#f8f8f2
titleBar.border#414339
titleBar.inactiveBackground#1e1f1c
titleBar.inactiveForeground#90908a
tree.inactiveIndentGuidesStroke#f8f8f224
tree.indentGuidesStroke#f8f8f252
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#88846f	—
string, constant.other.symbol, markup.inline.raw	#86B42B	—
constant.numeric, constant.language.boolean, constant.language.null	#6A7EC8	—
constant, variable.other.constant	#F8F8F2	—
keyword, storage.type, storage.modifier	#C4265E	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#F8F8F2	—
variable.parameter, function.parameter	#88846f	—
entity.name.function, support.function, variable.function, meta.function-call	#8C6BC8	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#8C6BC8	—
entity.name.namespace, entity.name.type.namespace	#F8F8F2	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#6A7EC8	—
punctuation, meta.brace	#88846f	—
entity.name.tag, punctuation.definition.tag	#C4265E	—
entity.other.attribute-name	#6A7EC8	—
string.regexp, constant.regexp	#819aff	—
markup.heading, entity.name.section	#C4265E	bold
markup.bold, punctuation.definition.bold	#F8F8F2	bold
markup.italic, punctuation.definition.italic	#C4265E	italic
markup.underline.link, string.other.link	#75715E	underline
markup.inserted	#86B42B	—
markup.deleted	#C4265E	—
markup.changed	#F8F8F2	—
invalid	#ffffff	—