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 — Raycast 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#ff6363
activityBar.background#0a0a0a
activityBar.border#FFFFFF14
activityBar.foreground#FFFFFFcc
activityBar.inactiveForeground#FFFFFF33
activityBarBadge.background#4FA3F8
activityBarBadge.foreground#FFFFFF
badge.background#ff6363
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.background#141414
breadcrumb.focusForeground#FFFFFF
breadcrumb.foreground#666666
button.background#4FA3F8
button.foreground#FFFFFF
button.hoverBackground#56C2FF
button.secondaryBackground#101010
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#FFFFFF14
checkbox.background#101010
checkbox.border#FFFFFF14
commandCenter.background#101010
commandCenter.border#FFFFFF14
commandCenter.foreground#666666
debugIcon.continueForeground#59D499
debugIcon.disconnectForeground#FF6363
debugIcon.pauseForeground#56C2FF
debugIcon.restartForeground#59D499
debugIcon.startForeground#59D499
debugIcon.stepIntoForeground#56C2FF
debugIcon.stepOutForeground#56C2FF
debugIcon.stepOverForeground#56C2FF
debugIcon.stopForeground#FF6363
debugToolBar.background#101010
descriptionForeground#666666
diffEditor.diagonalFill#66666626
diffEditor.insertedLineBackground#59D49918
diffEditor.insertedTextBackground#59D49930
diffEditor.removedLineBackground#FF636318
diffEditor.removedTextBackground#FF636330
disabledForeground#FFFFFF66
dropdown.background#101010
dropdown.border#FFFFFF14
dropdown.foreground#FFFFFF
editor.background#141414
editor.findMatchBackground#FFFFFF66
editor.findMatchHighlightBackground#FFFFFF35
editor.findRangeHighlightBackground#ff636318
editor.foreground#FFFFFF
editor.hoverHighlightBackground#ff636318
editor.inactiveSelectionBackground#ff636333
editor.lineHighlightBackground#101010
editor.selectionBackground#323232
editor.selectionHighlightBackground#ff636333
editor.wordHighlightBackground#56C2FF25
editor.wordHighlightStrongBackground#CF2F9830
editorBracketHighlight.foreground1#FF6363
editorBracketHighlight.foreground2#FFFFFF
editorBracketHighlight.foreground3#59D499
editorBracketHighlight.foreground4#56C2FF
editorBracketHighlight.foreground5#CF2F98
editorBracketHighlight.foreground6#56C2FF
editorBracketMatch.background#ff636322
editorBracketMatch.border#ff6363
editorBracketPairGuide.activeBackground1#ff6363a6
editorBracketPairGuide.activeBackground2#ff6363a6
editorBracketPairGuide.activeBackground3#ff6363a6
editorBracketPairGuide.activeBackground4#ff6363a6
editorBracketPairGuide.activeBackground5#ff6363a6
editorBracketPairGuide.activeBackground6#ff6363a6
editorBracketPairGuide.background1#FFFFFF24
editorBracketPairGuide.background2#FFFFFF24
editorBracketPairGuide.background3#FFFFFF24
editorBracketPairGuide.background4#FFFFFF24
editorBracketPairGuide.background5#FFFFFF24
editorBracketPairGuide.background6#FFFFFF24
editorCursor.foreground#4FA3F8
editorError.foreground#FF6363
editorGroup.border#FFFFFF14
editorGroupHeader.tabsBackground#101010
editorGroupHeader.tabsBorder#161616
editorGutter.addedBackground#59D499
editorGutter.deletedBackground#FF6363
editorGutter.modifiedBackground#56C2FF
editorHint.foreground#59D499
editorHoverWidget.background#101010
editorHoverWidget.border#FFFFFF14
editorIndentGuide.activeBackground1#ff6363a6
editorIndentGuide.background1#FFFFFF24
editorInfo.foreground#56C2FF
editorLineNumber.activeForeground#666666
editorLineNumber.foreground#FFFFFF33
editorSuggestWidget.background#101010
editorSuggestWidget.border#FFFFFF14
editorSuggestWidget.selectedBackground#FFFFFF14
editorWarning.foreground#FFC531
editorWhitespace.foreground#FFFFFF24
editorWidget.background#101010
editorWidget.border#FFFFFF14
editorWidget.foreground#FFFFFF
errorForeground#FF6363
focusBorder#282828
foreground#FFFFFF
gitDecoration.addedResourceForeground#59D499
gitDecoration.conflictingResourceForeground#FFFFFF
gitDecoration.deletedResourceForeground#FF6363
gitDecoration.ignoredResourceForeground#FFFFFF33
gitDecoration.modifiedResourceForeground#FFC531
gitDecoration.renamedResourceForeground#CF2F98
gitDecoration.untrackedResourceForeground#59D499
icon.foreground#666666
input.background#101010
input.border#FFFFFF14
input.foreground#FFFFFF
input.placeholderForeground#FFFFFF33
inputOption.activeBackground#ff636355
inputOption.activeBorder#ff6363
inputValidation.errorBackground#FF636322
inputValidation.errorBorder#FF6363
inputValidation.infoBackground#56C2FF22
inputValidation.infoBorder#56C2FF
inputValidation.warningBackground#FFC53122
inputValidation.warningBorder#FFC531
list.activeSelectionBackground#ff636355
list.activeSelectionForeground#FFFFFF
list.errorForeground#FF6363
list.focusBackground#ff636344
list.highlightForeground#ff6363
list.hoverBackground#FFFFFF14
list.inactiveSelectionBackground#ff636333
list.warningForeground#FFC531
menu.background#101010
menu.foreground#FFFFFF
menu.selectionBackground#323232
menu.separatorBackground#FFFFFF14
minimap.background#141414
minimap.findMatchHighlight#FFFFFF80
minimap.selectionHighlight#ff636366
notificationCenter.border#FFFFFF14
notificationCenterHeader.background#101010
notifications.background#101010
notifications.border#FFFFFF14
notifications.foreground#FFFFFF
panel.background#141414
panel.border#FFFFFF14
panelTitle.activeBorder#ff6363
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#666666
peekView.border#ff6363
peekViewEditor.background#141414
peekViewResult.background#101010
peekViewResult.selectionBackground#323232
peekViewTitle.background#101010
pickerGroup.border#FFFFFF14
pickerGroup.foreground#ff6363
progressBar.background#ff6363
quickInput.background#101010
quickInput.foreground#FFFFFF
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#FFFFFF45
scrollbarSlider.background#FFFFFF18
scrollbarSlider.hoverBackground#FFFFFF2e
sideBar.background#101010
sideBar.border#FFFFFF14
sideBar.foreground#FFFFFF99
sideBarSectionHeader.background#101010
sideBarSectionHeader.border#FFFFFF14
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFFcc
statusBar.background#101010
statusBar.border#FFFFFF14
statusBar.debuggingBackground#FF6363
statusBar.debuggingForeground#111111
statusBar.foreground#666666
statusBar.noFolderBackground#101010
tab.activeBackground#141414
tab.activeBorder#141414
tab.activeBorderTop#ff6363
tab.activeForeground#FFFFFF
tab.border#FFFFFF14
tab.inactiveBackground#101010
tab.inactiveForeground#666666
terminal.ansiBlack#000000
terminal.ansiBlue#56C2FF
terminal.ansiBrightBlack#FFFFFF66
terminal.ansiBrightBlue#56C2FF
terminal.ansiBrightCyan#56C2FF
terminal.ansiBrightGreen#59D499
terminal.ansiBrightMagenta#CF2F98
terminal.ansiBrightRed#FF6363
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFC531
terminal.ansiCyan#56C2FF
terminal.ansiGreen#59D499
terminal.ansiMagenta#CF2F98
terminal.ansiRed#FF6363
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#FFC531
terminal.background#141414
terminal.foreground#FFFFFF
terminal.selectionBackground#323232
terminalCursor.foreground#ff6363
textBlockQuote.background#101010
textBlockQuote.border#ff6363
textCodeBlock.background#101010
textLink.activeForeground#56C2FF
textLink.foreground#ff6363
titleBar.activeBackground#101010
titleBar.activeForeground#FFFFFF
titleBar.border#FFFFFF14
titleBar.inactiveBackground#101010
titleBar.inactiveForeground#FFFFFF33
tree.inactiveIndentGuidesStroke#FFFFFF24
tree.indentGuidesStroke#FFFFFF52
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Raycast 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#f25e5e
activityBar.background#f9f9f9
activityBar.border#00000014
activityBar.foreground#000000cc
activityBar.inactiveForeground#00000033
activityBarBadge.background#138AF2
activityBarBadge.foreground#FFFFFF
badge.background#f25e5e
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#000000
breadcrumb.background#FFFFFF
breadcrumb.focusForeground#000000
breadcrumb.foreground#919191
button.background#138AF2
button.foreground#FFFFFF
button.hoverBackground#138AF2
button.secondaryBackground#fcfcfc
button.secondaryForeground#000000
button.secondaryHoverBackground#0000000f
checkbox.background#fcfcfc
checkbox.border#00000014
commandCenter.background#fcfcfc
commandCenter.border#00000014
commandCenter.foreground#919191
debugIcon.continueForeground#006B4F
debugIcon.disconnectForeground#B12424
debugIcon.pauseForeground#138AF2
debugIcon.restartForeground#006B4F
debugIcon.startForeground#006B4F
debugIcon.stepIntoForeground#138AF2
debugIcon.stepOutForeground#138AF2
debugIcon.stepOverForeground#138AF2
debugIcon.stopForeground#B12424
debugToolBar.background#fcfcfc
descriptionForeground#919191
diffEditor.diagonalFill#91919126
diffEditor.insertedLineBackground#006B4F12
diffEditor.insertedTextBackground#006B4F20
diffEditor.removedLineBackground#B1242412
diffEditor.removedTextBackground#B1242420
disabledForeground#00000066
dropdown.background#fcfcfc
dropdown.border#00000014
dropdown.foreground#000000
editor.background#FFFFFF
editor.findMatchBackground#0000004d
editor.findMatchHighlightBackground#00000026
editor.findRangeHighlightBackground#f25e5e18
editor.foreground#000000
editor.hoverHighlightBackground#f25e5e18
editor.inactiveSelectionBackground#f25e5e1f
editor.lineHighlightBackground#fcfcfc
editor.selectionBackground#fdfdfd
editor.selectionHighlightBackground#f25e5e1f
editor.wordHighlightBackground#138AF218
editor.wordHighlightStrongBackground#9A1B6E1f
editorBracketHighlight.foreground1#B12424
editorBracketHighlight.foreground2#000000
editorBracketHighlight.foreground3#006B4F
editorBracketHighlight.foreground4#138AF2
editorBracketHighlight.foreground5#9A1B6E
editorBracketHighlight.foreground6#138AF2
editorBracketMatch.background#f25e5e22
editorBracketMatch.border#f25e5e
editorBracketPairGuide.activeBackground1#f25e5e8c
editorBracketPairGuide.activeBackground2#f25e5e8c
editorBracketPairGuide.activeBackground3#f25e5e8c
editorBracketPairGuide.activeBackground4#f25e5e8c
editorBracketPairGuide.activeBackground5#f25e5e8c
editorBracketPairGuide.activeBackground6#f25e5e8c
editorBracketPairGuide.background1#00000018
editorBracketPairGuide.background2#00000018
editorBracketPairGuide.background3#00000018
editorBracketPairGuide.background4#00000018
editorBracketPairGuide.background5#00000018
editorBracketPairGuide.background6#00000018
editorCursor.foreground#138AF2
editorError.foreground#B12424
editorGroup.border#00000014
editorGroupHeader.tabsBackground#fcfcfc
editorGroupHeader.tabsBorder#fefefe
editorGutter.addedBackground#006B4F
editorGutter.deletedBackground#B12424
editorGutter.modifiedBackground#138AF2
editorHint.foreground#006B4F
editorHoverWidget.background#fcfcfc
editorHoverWidget.border#00000014
editorIndentGuide.activeBackground1#f25e5e8c
editorIndentGuide.background1#00000018
editorInfo.foreground#138AF2
editorLineNumber.activeForeground#919191
editorLineNumber.foreground#00000033
editorSuggestWidget.background#fcfcfc
editorSuggestWidget.border#00000014
editorSuggestWidget.selectedBackground#0000000f
editorWarning.foreground#F8A300
editorWhitespace.foreground#00000018
editorWidget.background#fcfcfc
editorWidget.border#00000014
editorWidget.foreground#000000
errorForeground#B12424
focusBorder#fcfcfc
foreground#000000
gitDecoration.addedResourceForeground#006B4F
gitDecoration.conflictingResourceForeground#000000
gitDecoration.deletedResourceForeground#B12424
gitDecoration.ignoredResourceForeground#00000033
gitDecoration.modifiedResourceForeground#F8A300
gitDecoration.renamedResourceForeground#9A1B6E
gitDecoration.untrackedResourceForeground#006B4F
icon.foreground#919191
input.background#fcfcfc
input.border#00000014
input.foreground#000000
input.placeholderForeground#00000033
inputOption.activeBackground#f25e5e22
inputOption.activeBorder#f25e5e
inputValidation.errorBackground#B1242412
inputValidation.errorBorder#B12424
inputValidation.infoBackground#138AF212
inputValidation.infoBorder#138AF2
inputValidation.warningBackground#F8A30012
inputValidation.warningBorder#F8A300
list.activeSelectionBackground#f25e5e22
list.activeSelectionForeground#000000
list.errorForeground#B12424
list.focusBackground#f25e5e1f
list.highlightForeground#f25e5e
list.hoverBackground#0000000f
list.inactiveSelectionBackground#f25e5e14
list.warningForeground#F8A300
menu.background#fcfcfc
menu.foreground#000000
menu.selectionBackground#fdfdfd
menu.separatorBackground#00000014
minimap.background#FFFFFF
minimap.findMatchHighlight#00000080
minimap.selectionHighlight#f25e5e66
notificationCenter.border#00000014
notificationCenterHeader.background#fcfcfc
notifications.background#fcfcfc
notifications.border#00000014
notifications.foreground#000000
panel.background#FFFFFF
panel.border#00000014
panelTitle.activeBorder#f25e5e
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#919191
peekView.border#f25e5e
peekViewEditor.background#FFFFFF
peekViewResult.background#fcfcfc
peekViewResult.selectionBackground#fdfdfd
peekViewTitle.background#fcfcfc
pickerGroup.border#00000014
pickerGroup.foreground#f25e5e
progressBar.background#f25e5e
quickInput.background#fcfcfc
quickInput.foreground#000000
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#00000045
scrollbarSlider.background#00000018
scrollbarSlider.hoverBackground#0000002e
sideBar.background#fcfcfc
sideBar.border#00000014
sideBar.foreground#00000099
sideBarSectionHeader.background#fcfcfc
sideBarSectionHeader.border#00000014
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000cc
statusBar.background#fcfcfc
statusBar.border#00000014
statusBar.debuggingBackground#B12424
statusBar.debuggingForeground#ffffff
statusBar.foreground#919191
statusBar.noFolderBackground#fcfcfc
tab.activeBackground#FFFFFF
tab.activeBorder#FFFFFF
tab.activeBorderTop#f25e5e
tab.activeForeground#000000
tab.border#00000014
tab.inactiveBackground#fcfcfc
tab.inactiveForeground#919191
terminal.ansiBlack#FFFFFF
terminal.ansiBlue#138AF2
terminal.ansiBrightBlack#00000066
terminal.ansiBrightBlue#138AF2
terminal.ansiBrightCyan#138AF2
terminal.ansiBrightGreen#006B4F
terminal.ansiBrightMagenta#9A1B6E
terminal.ansiBrightRed#B12424
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#F8A300
terminal.ansiCyan#138AF2
terminal.ansiGreen#006B4F
terminal.ansiMagenta#9A1B6E
terminal.ansiRed#B12424
terminal.ansiWhite#000000
terminal.ansiYellow#F8A300
terminal.background#FFFFFF
terminal.foreground#000000
terminal.selectionBackground#fdfdfd
terminalCursor.foreground#f25e5e
textBlockQuote.background#fcfcfc
textBlockQuote.border#f25e5e
textCodeBlock.background#fcfcfc
textLink.activeForeground#138AF2
textLink.foreground#f25e5e
titleBar.activeBackground#fcfcfc
titleBar.activeForeground#000000
titleBar.border#00000014
titleBar.inactiveBackground#fcfcfc
titleBar.inactiveForeground#00000033
tree.inactiveIndentGuidesStroke#00000018
tree.indentGuidesStroke#0000003d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Rose Pine 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#e0def4
activityBar.background#232136
activityBar.border#00000000
activityBar.foreground#e0def4
activityBar.inactiveForeground#908caa
activityBarBadge.background#ea9a97
activityBarBadge.foreground#232136
badge.background#ea9a97
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#e0def4
breadcrumb.background#232136
breadcrumb.focusForeground#e0def4
breadcrumb.foreground#6e6a86
button.background#ea9a97
button.foreground#232136
button.hoverBackground#ea9a97e6
button.secondaryBackground#2a273f
button.secondaryForeground#e0def4
button.secondaryHoverBackground#817c9c14
checkbox.background#2a273f
checkbox.border#00000000
commandCenter.background#2a273f
commandCenter.border#00000000
commandCenter.foreground#6e6a86
debugIcon.continueForeground#3e8fb0
debugIcon.disconnectForeground#eb6f92
debugIcon.pauseForeground#9ccfd8
debugIcon.restartForeground#3e8fb0
debugIcon.startForeground#3e8fb0
debugIcon.stepIntoForeground#9ccfd8
debugIcon.stepOutForeground#9ccfd8
debugIcon.stepOverForeground#9ccfd8
debugIcon.stopForeground#eb6f92
debugToolBar.background#2a273f
descriptionForeground#908caa
diffEditor.diagonalFill#6e6a8626
diffEditor.insertedLineBackground#9ccfd818
diffEditor.insertedTextBackground#9ccfd830
diffEditor.removedLineBackground#908caa18
diffEditor.removedTextBackground#908caa30
disabledForeground#e0def466
dropdown.background#2a273f
dropdown.border#00000000
dropdown.foreground#e0def4
editor.background#232136
editor.findMatchBackground#ea9a9766
editor.findMatchHighlightBackground#ea9a9735
editor.findRangeHighlightBackground#ea9a9718
editor.foreground#e0def4
editor.hoverHighlightBackground#ea9a9718
editor.inactiveSelectionBackground#ea9a9733
editor.lineHighlightBackground#232136
editor.selectionBackground#817c9c26
editor.selectionHighlightBackground#ea9a9733
editor.wordHighlightBackground#9ccfd825
editor.wordHighlightStrongBackground#c4a7e730
editorBracketHighlight.foreground1#eb6f92
editorBracketHighlight.foreground2#ea9a97
editorBracketHighlight.foreground3#3e8fb0
editorBracketHighlight.foreground4#9ccfd8
editorBracketHighlight.foreground5#c4a7e7
editorBracketHighlight.foreground6#9ccfd8
editorBracketMatch.background#ea9a9722
editorBracketMatch.border#ea9a97
editorBracketPairGuide.activeBackground1#ea9a97a6
editorBracketPairGuide.activeBackground2#ea9a97a6
editorBracketPairGuide.activeBackground3#ea9a97a6
editorBracketPairGuide.activeBackground4#ea9a97a6
editorBracketPairGuide.activeBackground5#ea9a97a6
editorBracketPairGuide.activeBackground6#ea9a97a6
editorBracketPairGuide.background1#e0def424
editorBracketPairGuide.background2#e0def424
editorBracketPairGuide.background3#e0def424
editorBracketPairGuide.background4#e0def424
editorBracketPairGuide.background5#e0def424
editorBracketPairGuide.background6#e0def424
editorCursor.foreground#6e6a86
editorError.foreground#eb6f92
editorGroup.border#00000000
editorGroupHeader.tabsBackground#0000
editorGroupHeader.tabsBorder#0000
editorGutter.addedBackground#9ccfd8
editorGutter.deletedBackground#908caa
editorGutter.modifiedBackground#9ccfd8
editorHint.foreground#3e8fb0
editorHoverWidget.background#2a273f
editorHoverWidget.border#00000000
editorIndentGuide.activeBackground1#ea9a97a6
editorIndentGuide.background1#e0def424
editorInfo.foreground#9ccfd8
editorLineNumber.activeForeground#6e6a86
editorLineNumber.foreground#908caa
editorSuggestWidget.background#2a273f
editorSuggestWidget.border#00000000
editorSuggestWidget.selectedBackground#817c9c14
editorWarning.foreground#f6c177
editorWhitespace.foreground#e0def424
editorWidget.background#2a273f
editorWidget.border#00000000
editorWidget.foreground#e0def4
errorForeground#eb6f92
focusBorder#817c9c26
foreground#e0def4
gitDecoration.addedResourceForeground#9ccfd8
gitDecoration.conflictingResourceForeground#ea9a97
gitDecoration.deletedResourceForeground#908caa
gitDecoration.ignoredResourceForeground#908caa
gitDecoration.modifiedResourceForeground#ea9a97
gitDecoration.renamedResourceForeground#c4a7e7
gitDecoration.untrackedResourceForeground#f6c177
icon.foreground#6e6a86
input.background#2a273f
input.border#00000000
input.foreground#e0def4
input.placeholderForeground#908caa
inputOption.activeBackground#ea9a9755
inputOption.activeBorder#ea9a97
inputValidation.errorBackground#eb6f9222
inputValidation.errorBorder#eb6f92
inputValidation.infoBackground#9ccfd822
inputValidation.infoBorder#9ccfd8
inputValidation.warningBackground#f6c17722
inputValidation.warningBorder#f6c177
list.activeSelectionBackground#ea9a9755
list.activeSelectionForeground#e0def4
list.errorForeground#eb6f92
list.focusBackground#ea9a9744
list.highlightForeground#ea9a97
list.hoverBackground#817c9c14
list.inactiveSelectionBackground#ea9a9733
list.warningForeground#f6c177
menu.background#2a273f
menu.foreground#e0def4
menu.selectionBackground#817c9c26
menu.separatorBackground#00000000
minimap.background#232136
minimap.findMatchHighlight#ea9a9780
minimap.selectionHighlight#ea9a9766
notificationCenter.border#00000000
notificationCenterHeader.background#2a273f
notifications.background#2a273f
notifications.border#00000000
notifications.foreground#e0def4
panel.background#2a273f
panel.border#0000
panelTitle.activeBorder#ea9a97
panelTitle.activeForeground#e0def4
panelTitle.inactiveForeground#6e6a86
peekView.border#ea9a97
peekViewEditor.background#232136
peekViewResult.background#232136
peekViewResult.selectionBackground#817c9c26
peekViewTitle.background#2a273f
pickerGroup.border#00000000
pickerGroup.foreground#ea9a97
progressBar.background#ea9a97
quickInput.background#2a273f
quickInput.foreground#e0def4
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#e0def445
scrollbarSlider.background#e0def418
scrollbarSlider.hoverBackground#e0def42e
sideBar.background#232136
sideBar.border#00000000
sideBar.foreground#908caa
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#817c9c26
sideBarSectionHeader.foreground#e0def4
sideBarTitle.foreground#e0def4
statusBar.background#232136
statusBar.border#00000000
statusBar.debuggingBackground#eb6f92
statusBar.debuggingForeground#111111
statusBar.foreground#6e6a86
statusBar.noFolderBackground#232136
tab.activeBackground#232136
tab.activeBorder#232136
tab.activeBorderTop#ea9a97
tab.activeForeground#e0def4
tab.border#00000000
tab.inactiveBackground#232136
tab.inactiveForeground#6e6a86
terminal.ansiBlack#393552
terminal.ansiBlue#9ccfd8
terminal.ansiBrightBlack#908caa
terminal.ansiBrightBlue#9ccfd8
terminal.ansiBrightCyan#ea9a97
terminal.ansiBrightGreen#3e8fb0
terminal.ansiBrightMagenta#c4a7e7
terminal.ansiBrightRed#eb6f92
terminal.ansiBrightWhite#e0def4
terminal.ansiBrightYellow#f6c177
terminal.ansiCyan#ea9a97
terminal.ansiGreen#3e8fb0
terminal.ansiMagenta#c4a7e7
terminal.ansiRed#eb6f92
terminal.ansiWhite#e0def4
terminal.ansiYellow#f6c177
terminal.background#232136
terminal.foreground#e0def4
terminal.selectionBackground#817c9c26
terminalCursor.foreground#ea9a97
textBlockQuote.background#232136
textBlockQuote.border#ea9a97
textCodeBlock.background#2a273f
textLink.activeForeground#c4a7e7e6
textLink.foreground#c4a7e7
titleBar.activeBackground#232136
titleBar.activeForeground#e0def4
titleBar.border#00000000
titleBar.inactiveBackground#232136
titleBar.inactiveForeground#908caa
tree.inactiveIndentGuidesStroke#e0def424
tree.indentGuidesStroke#e0def452
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Rose Pine 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#575279
activityBar.background#faf4ed
activityBar.border#00000000
activityBar.foreground#575279
activityBar.inactiveForeground#797593
activityBarBadge.background#d7827e
activityBarBadge.foreground#faf4ed
badge.background#c27571
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#575279
breadcrumb.background#faf4ed
breadcrumb.focusForeground#575279
breadcrumb.foreground#8e899e
button.background#d7827e
button.foreground#faf4ed
button.hoverBackground#d7827ee6
button.secondaryBackground#fffaf3
button.secondaryForeground#575279
button.secondaryHoverBackground#6e6a860d
checkbox.background#fffaf3
checkbox.border#00000000
commandCenter.background#fffaf3
commandCenter.border#00000000
commandCenter.foreground#8e899e
debugIcon.continueForeground#286983
debugIcon.disconnectForeground#b4637a
debugIcon.pauseForeground#56949f
debugIcon.restartForeground#286983
debugIcon.startForeground#286983
debugIcon.stepIntoForeground#56949f
debugIcon.stepOutForeground#56949f
debugIcon.stepOverForeground#56949f
debugIcon.stopForeground#b4637a
debugToolBar.background#fffaf3
descriptionForeground#797593
diffEditor.diagonalFill#8e899e26
diffEditor.insertedLineBackground#56949f12
diffEditor.insertedTextBackground#56949f20
diffEditor.removedLineBackground#79759312
diffEditor.removedTextBackground#79759320
disabledForeground#57527966
dropdown.background#fffaf3
dropdown.border#00000000
dropdown.foreground#575279
editor.background#faf4ed
editor.findMatchBackground#d7827e4d
editor.findMatchHighlightBackground#d7827e26
editor.findRangeHighlightBackground#c2757118
editor.foreground#575279
editor.hoverHighlightBackground#c2757118
editor.inactiveSelectionBackground#c275711f
editor.lineHighlightBackground#faf4ed
editor.selectionBackground#6e6a8614
editor.selectionHighlightBackground#c275711f
editor.wordHighlightBackground#56949f18
editor.wordHighlightStrongBackground#907aa91f
editorBracketHighlight.foreground1#b4637a
editorBracketHighlight.foreground2#d7827e
editorBracketHighlight.foreground3#286983
editorBracketHighlight.foreground4#56949f
editorBracketHighlight.foreground5#907aa9
editorBracketHighlight.foreground6#56949f
editorBracketMatch.background#c2757122
editorBracketMatch.border#c27571
editorBracketPairGuide.activeBackground1#c275718c
editorBracketPairGuide.activeBackground2#c275718c
editorBracketPairGuide.activeBackground3#c275718c
editorBracketPairGuide.activeBackground4#c275718c
editorBracketPairGuide.activeBackground5#c275718c
editorBracketPairGuide.activeBackground6#c275718c
editorBracketPairGuide.background1#57527918
editorBracketPairGuide.background2#57527918
editorBracketPairGuide.background3#57527918
editorBracketPairGuide.background4#57527918
editorBracketPairGuide.background5#57527918
editorBracketPairGuide.background6#57527918
editorCursor.foreground#9893a5
editorError.foreground#b4637a
editorGroup.border#00000000
editorGroupHeader.tabsBackground#0000
editorGroupHeader.tabsBorder#0000
editorGutter.addedBackground#56949f
editorGutter.deletedBackground#797593
editorGutter.modifiedBackground#56949f
editorHint.foreground#286983
editorHoverWidget.background#fffaf3
editorHoverWidget.border#00000000
editorIndentGuide.activeBackground1#c275718c
editorIndentGuide.background1#57527918
editorInfo.foreground#56949f
editorLineNumber.activeForeground#8e899e
editorLineNumber.foreground#797593
editorSuggestWidget.background#fffaf3
editorSuggestWidget.border#00000000
editorSuggestWidget.selectedBackground#6e6a860d
editorWarning.foreground#ea9d34
editorWhitespace.foreground#57527918
editorWidget.background#fffaf3
editorWidget.border#00000000
editorWidget.foreground#575279
errorForeground#b4637a
focusBorder#6e6a8614
foreground#575279
gitDecoration.addedResourceForeground#56949f
gitDecoration.conflictingResourceForeground#d7827e
gitDecoration.deletedResourceForeground#797593
gitDecoration.ignoredResourceForeground#797593
gitDecoration.modifiedResourceForeground#d7827e
gitDecoration.renamedResourceForeground#907aa9
gitDecoration.untrackedResourceForeground#ea9d34
icon.foreground#8e899e
input.background#fffaf3
input.border#00000000
input.foreground#575279
input.placeholderForeground#797593
inputOption.activeBackground#c2757122
inputOption.activeBorder#c27571
inputValidation.errorBackground#b4637a12
inputValidation.errorBorder#b4637a
inputValidation.infoBackground#56949f12
inputValidation.infoBorder#56949f
inputValidation.warningBackground#ea9d3412
inputValidation.warningBorder#ea9d34
list.activeSelectionBackground#c2757122
list.activeSelectionForeground#575279
list.errorForeground#b4637a
list.focusBackground#c275711f
list.highlightForeground#c27571
list.hoverBackground#6e6a860d
list.inactiveSelectionBackground#c2757114
list.warningForeground#ea9d34
menu.background#fffaf3
menu.foreground#575279
menu.selectionBackground#6e6a8614
menu.separatorBackground#00000000
minimap.background#faf4ed
minimap.findMatchHighlight#d7827e80
minimap.selectionHighlight#c2757166
notificationCenter.border#00000000
notificationCenterHeader.background#fffaf3
notifications.background#fffaf3
notifications.border#00000000
notifications.foreground#575279
panel.background#fffaf3
panel.border#0000
panelTitle.activeBorder#c27571
panelTitle.activeForeground#575279
panelTitle.inactiveForeground#8e899e
peekView.border#c27571
peekViewEditor.background#faf4ed
peekViewResult.background#faf4ed
peekViewResult.selectionBackground#6e6a8614
peekViewTitle.background#fffaf3
pickerGroup.border#00000000
pickerGroup.foreground#c27571
progressBar.background#c27571
quickInput.background#fffaf3
quickInput.foreground#575279
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#57527945
scrollbarSlider.background#57527918
scrollbarSlider.hoverBackground#5752792e
sideBar.background#faf4ed
sideBar.border#00000000
sideBar.foreground#797593
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#6e6a8614
sideBarSectionHeader.foreground#575279
sideBarTitle.foreground#575279
statusBar.background#faf4ed
statusBar.border#00000000
statusBar.debuggingBackground#b4637a
statusBar.debuggingForeground#ffffff
statusBar.foreground#8e899e
statusBar.noFolderBackground#faf4ed
tab.activeBackground#faf4ed
tab.activeBorder#faf4ed
tab.activeBorderTop#c27571
tab.activeForeground#575279
tab.border#00000000
tab.inactiveBackground#faf4ed
tab.inactiveForeground#8e899e
terminal.ansiBlack#f2e9e1
terminal.ansiBlue#56949f
terminal.ansiBrightBlack#797593
terminal.ansiBrightBlue#56949f
terminal.ansiBrightCyan#d7827e
terminal.ansiBrightGreen#286983
terminal.ansiBrightMagenta#907aa9
terminal.ansiBrightRed#b4637a
terminal.ansiBrightWhite#575279
terminal.ansiBrightYellow#ea9d34
terminal.ansiCyan#d7827e
terminal.ansiGreen#286983
terminal.ansiMagenta#907aa9
terminal.ansiRed#b4637a
terminal.ansiWhite#575279
terminal.ansiYellow#ea9d34
terminal.background#faf4ed
terminal.foreground#575279
terminal.selectionBackground#6e6a8614
terminalCursor.foreground#c27571
textBlockQuote.background#faf4ed
textBlockQuote.border#c27571
textCodeBlock.background#fffaf3
textLink.activeForeground#907aa9e6
textLink.foreground#907aa9
titleBar.activeBackground#faf4ed
titleBar.activeForeground#575279
titleBar.border#00000000
titleBar.inactiveBackground#faf4ed
titleBar.inactiveForeground#797593
tree.inactiveIndentGuidesStroke#57527918
tree.indentGuidesStroke#5752793d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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