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 — Catppuccin Mocha

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#00000000
activityBar.background#11111b
activityBar.border#00000000
activityBar.foreground#cba6f7
activityBar.inactiveForeground#6c7086
activityBarBadge.background#cba6f7
activityBarBadge.foreground#11111b
badge.background#cba6f7
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#cdd6f4
breadcrumb.background#1e1e2e
breadcrumb.focusForeground#cdd6f4
breadcrumb.foreground#9399b2
button.background#cba6f7
button.foreground#11111b
button.hoverBackground#dec7fa
button.secondaryBackground#181825
button.secondaryForeground#cdd6f4
button.secondaryHoverBackground#31324480
checkbox.background#181825
checkbox.border#585b70
commandCenter.background#181825
commandCenter.border#585b70
commandCenter.foreground#9399b2
debugIcon.continueForeground#a6e3a1
debugIcon.disconnectForeground#f38ba8
debugIcon.pauseForeground#89b4fa
debugIcon.restartForeground#a6e3a1
debugIcon.startForeground#a6e3a1
debugIcon.stepIntoForeground#89b4fa
debugIcon.stepOutForeground#89b4fa
debugIcon.stepOverForeground#89b4fa
debugIcon.stopForeground#f38ba8
debugToolBar.background#181825
descriptionForeground#cdd6f4
diffEditor.diagonalFill#9399b226
diffEditor.insertedLineBackground#a6e3a118
diffEditor.insertedTextBackground#a6e3a130
diffEditor.removedLineBackground#f38ba818
diffEditor.removedTextBackground#f38ba830
disabledForeground#cdd6f466
dropdown.background#181825
dropdown.border#585b70
dropdown.foreground#cdd6f4
editor.background#1e1e2e
editor.findMatchBackground#cdd6f466
editor.findMatchHighlightBackground#cdd6f435
editor.findRangeHighlightBackground#cba6f718
editor.foreground#cdd6f4
editor.hoverHighlightBackground#cba6f718
editor.inactiveSelectionBackground#cba6f733
editor.lineHighlightBackground#181825
editor.selectionBackground#9399b240
editor.selectionHighlightBackground#cba6f733
editor.wordHighlightBackground#89b4fa25
editor.wordHighlightStrongBackground#f5c2e730
editorBracketHighlight.foreground1#f38ba8
editorBracketHighlight.foreground2#cdd6f4
editorBracketHighlight.foreground3#a6e3a1
editorBracketHighlight.foreground4#89b4fa
editorBracketHighlight.foreground5#f5c2e7
editorBracketHighlight.foreground6#74a8fc
editorBracketMatch.background#cba6f722
editorBracketMatch.border#cba6f7
editorBracketPairGuide.activeBackground1#cba6f7a6
editorBracketPairGuide.activeBackground2#cba6f7a6
editorBracketPairGuide.activeBackground3#cba6f7a6
editorBracketPairGuide.activeBackground4#cba6f7a6
editorBracketPairGuide.activeBackground5#cba6f7a6
editorBracketPairGuide.activeBackground6#cba6f7a6
editorBracketPairGuide.background1#cdd6f424
editorBracketPairGuide.background2#cdd6f424
editorBracketPairGuide.background3#cdd6f424
editorBracketPairGuide.background4#cdd6f424
editorBracketPairGuide.background5#cdd6f424
editorBracketPairGuide.background6#cdd6f424
editorCursor.foreground#f5e0dc
editorError.foreground#f38ba8
editorGroup.border#585b70
editorGroupHeader.tabsBackground#11111b
editorGroupHeader.tabsBorder#585b70
editorGutter.addedBackground#a6e3a1
editorGutter.deletedBackground#f38ba8
editorGutter.modifiedBackground#89b4fa
editorHint.foreground#a6e3a1
editorHoverWidget.background#181825
editorHoverWidget.border#585b70
editorIndentGuide.activeBackground1#cba6f7a6
editorIndentGuide.background1#cdd6f424
editorInfo.foreground#89b4fa
editorLineNumber.activeForeground#9399b2
editorLineNumber.foreground#7f849c
editorSuggestWidget.background#181825
editorSuggestWidget.border#585b70
editorSuggestWidget.selectedBackground#31324480
editorWarning.foreground#f9e2af
editorWhitespace.foreground#cdd6f424
editorWidget.background#181825
editorWidget.border#585b70
editorWidget.foreground#cdd6f4
errorForeground#f38ba8
focusBorder#cba6f7
foreground#cdd6f4
gitDecoration.addedResourceForeground#a6e3a1
gitDecoration.conflictingResourceForeground#cdd6f4
gitDecoration.deletedResourceForeground#f38ba8
gitDecoration.ignoredResourceForeground#7f849c
gitDecoration.modifiedResourceForeground#f9e2af
gitDecoration.renamedResourceForeground#f5c2e7
gitDecoration.untrackedResourceForeground#a6e3a1
icon.foreground#9399b2
input.background#181825
input.border#585b70
input.foreground#cdd6f4
input.placeholderForeground#7f849c
inputOption.activeBackground#cba6f755
inputOption.activeBorder#cba6f7
inputValidation.errorBackground#f38ba822
inputValidation.errorBorder#f38ba8
inputValidation.infoBackground#89b4fa22
inputValidation.infoBorder#89b4fa
inputValidation.warningBackground#f9e2af22
inputValidation.warningBorder#f9e2af
list.activeSelectionBackground#cba6f755
list.activeSelectionForeground#cdd6f4
list.errorForeground#f38ba8
list.focusBackground#cba6f744
list.highlightForeground#cba6f7
list.hoverBackground#31324480
list.inactiveSelectionBackground#cba6f733
list.warningForeground#f9e2af
menu.background#181825
menu.foreground#cdd6f4
menu.selectionBackground#9399b240
menu.separatorBackground#585b70
minimap.background#1e1e2e
minimap.findMatchHighlight#cdd6f480
minimap.selectionHighlight#cba6f766
notificationCenter.border#585b70
notificationCenterHeader.background#181825
notifications.background#181825
notifications.border#585b70
notifications.foreground#cdd6f4
panel.background#1e1e2e
panel.border#585b70
panelTitle.activeBorder#cba6f7
panelTitle.activeForeground#cdd6f4
panelTitle.inactiveForeground#9399b2
peekView.border#cba6f7
peekViewEditor.background#1e1e2e
peekViewResult.background#181825
peekViewResult.selectionBackground#9399b240
peekViewTitle.background#181825
pickerGroup.border#585b70
pickerGroup.foreground#cba6f7
progressBar.background#cba6f7
quickInput.background#181825
quickInput.foreground#cdd6f4
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#cdd6f445
scrollbarSlider.background#cdd6f418
scrollbarSlider.hoverBackground#cdd6f42e
sideBar.background#181825
sideBar.border#00000000
sideBar.foreground#cdd6f4
sideBarSectionHeader.background#181825
sideBarSectionHeader.border#585b70
sideBarSectionHeader.foreground#cdd6f4
sideBarTitle.foreground#cba6f7
statusBar.background#181825
statusBar.border#585b70
statusBar.debuggingBackground#f38ba8
statusBar.debuggingForeground#111111
statusBar.foreground#9399b2
statusBar.noFolderBackground#181825
tab.activeBackground#1e1e2e
tab.activeBorder#1e1e2e
tab.activeBorderTop#cba6f7
tab.activeForeground#cdd6f4
tab.border#585b70
tab.inactiveBackground#181825
tab.inactiveForeground#9399b2
terminal.ansiBlack#45475a
terminal.ansiBlue#89b4fa
terminal.ansiBrightBlack#585b70
terminal.ansiBrightBlue#74a8fc
terminal.ansiBrightCyan#6bd7ca
terminal.ansiBrightGreen#89d88b
terminal.ansiBrightMagenta#f2aede
terminal.ansiBrightRed#f37799
terminal.ansiBrightWhite#bac2de
terminal.ansiBrightYellow#ebd391
terminal.ansiCyan#94e2d5
terminal.ansiGreen#a6e3a1
terminal.ansiMagenta#f5c2e7
terminal.ansiRed#f38ba8
terminal.ansiWhite#a6adc8
terminal.ansiYellow#f9e2af
terminal.background#1e1e2e
terminal.foreground#cdd6f4
terminal.selectionBackground#9399b240
terminalCursor.foreground#cba6f7
textBlockQuote.background#181825
textBlockQuote.border#cba6f7
textCodeBlock.background#181825
textLink.activeForeground#89dceb
textLink.foreground#89b4fa
titleBar.activeBackground#181825
titleBar.activeForeground#cdd6f4
titleBar.border#585b70
titleBar.inactiveBackground#181825
titleBar.inactiveForeground#7f849c
tree.inactiveIndentGuidesStroke#cdd6f424
tree.indentGuidesStroke#cdd6f452
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette 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#0169cc
activityBar.background#131313
activityBar.border#ffffff22
activityBar.foreground#fcfcfc
activityBar.inactiveForeground#999999
activityBarBadge.background#0169cc
activityBarBadge.foreground#ffffff
badge.background#0169cc
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#fcfcfc
breadcrumb.background#111111
breadcrumb.focusForeground#fcfcfc
breadcrumb.foreground#999999
button.background#0169cc
button.foreground#ffffff
button.hoverBackground#3D8DFF
button.secondaryBackground#131313
button.secondaryForeground#fcfcfc
button.secondaryHoverBackground#131313
checkbox.background#131313
checkbox.border#ffffff22
commandCenter.background#131313
commandCenter.border#ffffff22
commandCenter.foreground#999999
debugIcon.continueForeground#85df7b
debugIcon.disconnectForeground#F67576
debugIcon.pauseForeground#6DCBF4
debugIcon.restartForeground#85df7b
debugIcon.startForeground#85df7b
debugIcon.stepIntoForeground#6DCBF4
debugIcon.stepOutForeground#6DCBF4
debugIcon.stepOverForeground#6DCBF4
debugIcon.stopForeground#F67576
debugToolBar.background#131313
descriptionForeground#999999
diffEditor.diagonalFill#99999926
diffEditor.insertedLineBackground#00a24018
diffEditor.insertedTextBackground#00a24030
diffEditor.removedLineBackground#e02e2a18
diffEditor.removedTextBackground#e02e2a30
disabledForeground#fcfcfc66
dropdown.background#131313
dropdown.border#ffffff22
dropdown.foreground#fcfcfc
editor.background#111111
editor.findMatchBackground#FA994C66
editor.findMatchHighlightBackground#FA994C35
editor.findRangeHighlightBackground#0169cc18
editor.foreground#fcfcfc
editor.hoverHighlightBackground#0169cc18
editor.inactiveSelectionBackground#0169cc33
editor.lineHighlightBackground#131313
editor.selectionBackground#0169cc44
editor.selectionHighlightBackground#0169cc33
editor.wordHighlightBackground#6DCBF425
editor.wordHighlightStrongBackground#B06DFF30
editorBracketHighlight.foreground1#F67576
editorBracketHighlight.foreground2#FA994C
editorBracketHighlight.foreground3#85df7b
editorBracketHighlight.foreground4#6DCBF4
editorBracketHighlight.foreground5#B06DFF
editorBracketHighlight.foreground6#3D8DFF
editorBracketMatch.background#0169cc22
editorBracketMatch.border#0169cc
editorBracketPairGuide.activeBackground1#0169cca6
editorBracketPairGuide.activeBackground2#0169cca6
editorBracketPairGuide.activeBackground3#0169cca6
editorBracketPairGuide.activeBackground4#0169cca6
editorBracketPairGuide.activeBackground5#0169cca6
editorBracketPairGuide.activeBackground6#0169cca6
editorBracketPairGuide.background1#fcfcfc24
editorBracketPairGuide.background2#fcfcfc24
editorBracketPairGuide.background3#fcfcfc24
editorBracketPairGuide.background4#fcfcfc24
editorBracketPairGuide.background5#fcfcfc24
editorBracketPairGuide.background6#fcfcfc24
editorCursor.foreground#0169cc
editorError.foreground#F67576
editorGroup.border#ffffff22
editorGroupHeader.tabsBackground#131313
editorGroupHeader.tabsBorder#ffffff22
editorGutter.addedBackground#00a240
editorGutter.deletedBackground#e02e2a
editorGutter.modifiedBackground#6DCBF4
editorHint.foreground#85df7b
editorHoverWidget.background#131313
editorHoverWidget.border#ffffff22
editorIndentGuide.activeBackground1#0169cca6
editorIndentGuide.background1#fcfcfc24
editorInfo.foreground#6DCBF4
editorLineNumber.activeForeground#999999
editorLineNumber.foreground#999999
editorSuggestWidget.background#131313
editorSuggestWidget.border#ffffff22
editorSuggestWidget.selectedBackground#131313
editorWarning.foreground#6DCBF4
editorWhitespace.foreground#fcfcfc24
editorWidget.background#131313
editorWidget.border#ffffff22
editorWidget.foreground#fcfcfc
errorForeground#F67576
focusBorder#0169cc
foreground#fcfcfc
gitDecoration.addedResourceForeground#00a240
gitDecoration.conflictingResourceForeground#FA994C
gitDecoration.deletedResourceForeground#e02e2a
gitDecoration.ignoredResourceForeground#999999
gitDecoration.modifiedResourceForeground#6DCBF4
gitDecoration.renamedResourceForeground#B06DFF
gitDecoration.untrackedResourceForeground#00a240
icon.foreground#999999
input.background#131313
input.border#ffffff22
input.foreground#fcfcfc
input.placeholderForeground#999999
inputOption.activeBackground#0169cc55
inputOption.activeBorder#0169cc
inputValidation.errorBackground#F6757622
inputValidation.errorBorder#F67576
inputValidation.infoBackground#6DCBF422
inputValidation.infoBorder#6DCBF4
inputValidation.warningBackground#6DCBF422
inputValidation.warningBorder#6DCBF4
list.activeSelectionBackground#0169cc55
list.activeSelectionForeground#fcfcfc
list.errorForeground#F67576
list.focusBackground#0169cc44
list.highlightForeground#0169cc
list.hoverBackground#131313
list.inactiveSelectionBackground#0169cc33
list.warningForeground#6DCBF4
menu.background#131313
menu.foreground#fcfcfc
menu.selectionBackground#0169cc44
menu.separatorBackground#ffffff22
minimap.background#111111
minimap.findMatchHighlight#FA994C80
minimap.selectionHighlight#0169cc66
notificationCenter.border#ffffff22
notificationCenterHeader.background#131313
notifications.background#131313
notifications.border#ffffff22
notifications.foreground#fcfcfc
panel.background#131313
panel.border#ffffff22
panelTitle.activeBorder#0169cc
panelTitle.activeForeground#fcfcfc
panelTitle.inactiveForeground#999999
peekView.border#0169cc
peekViewEditor.background#111111
peekViewResult.background#131313
peekViewResult.selectionBackground#0169cc44
peekViewTitle.background#131313
pickerGroup.border#ffffff22
pickerGroup.foreground#0169cc
progressBar.background#0169cc
quickInput.background#131313
quickInput.foreground#fcfcfc
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#fcfcfc45
scrollbarSlider.background#fcfcfc18
scrollbarSlider.hoverBackground#fcfcfc2e
sideBar.background#131313
sideBar.border#ffffff22
sideBar.foreground#8f8f8f
sideBarSectionHeader.background#131313
sideBarSectionHeader.border#ffffff22
sideBarSectionHeader.foreground#fcfcfc
sideBarTitle.foreground#fcfcfc
statusBar.background#131313
statusBar.border#ffffff22
statusBar.debuggingBackground#F67576
statusBar.debuggingForeground#111111
statusBar.foreground#999999
statusBar.noFolderBackground#131313
tab.activeBackground#111111
tab.activeBorder#111111
tab.activeBorderTop#0169cc
tab.activeForeground#fcfcfc
tab.border#ffffff22
tab.inactiveBackground#131313
tab.inactiveForeground#999999
terminal.ansiBlack#111111
terminal.ansiBlue#6DCBF4
terminal.ansiBrightBlack#999999
terminal.ansiBrightBlue#3D8DFF
terminal.ansiBrightCyan#6DCBF4
terminal.ansiBrightGreen#59d24e
terminal.ansiBrightMagenta#9840FF
terminal.ansiBrightRed#F44A4C
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FA994C
terminal.ansiCyan#3D8DFF
terminal.ansiGreen#85df7b
terminal.ansiMagenta#B06DFF
terminal.ansiRed#F67576
terminal.ansiWhite#d6d6d6
terminal.ansiYellow#6DCBF4
terminal.background#111111
terminal.foreground#fcfcfc
terminal.selectionBackground#0169cc44
terminalCursor.foreground#0169cc
textBlockQuote.background#131313
textBlockQuote.border#0169cc
textCodeBlock.background#131313
textLink.activeForeground#3D8DFF
textLink.foreground#0169cc
titleBar.activeBackground#131313
titleBar.activeForeground#fcfcfc
titleBar.border#ffffff22
titleBar.inactiveBackground#131313
titleBar.inactiveForeground#999999
tree.inactiveIndentGuidesStroke#fcfcfc24
tree.indentGuidesStroke#fcfcfc52
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#999999	—
string, constant.other.symbol, markup.inline.raw	#85df7b	—
constant.numeric, constant.language.boolean, constant.language.null	#6DCBF4	—
constant, variable.other.constant	#FA994C	—
keyword, storage.type, storage.modifier	#F67576	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#FA994C	—
variable.parameter, function.parameter	#999999	—
entity.name.function, support.function, variable.function, meta.function-call	#B06DFF	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#B06DFF	—
entity.name.namespace, entity.name.type.namespace	#FA994C	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#6DCBF4	—
punctuation, meta.brace	#999999	—
entity.name.tag, punctuation.definition.tag	#F67576	—
entity.other.attribute-name	#6DCBF4	—
string.regexp, constant.regexp	#3D8DFF	—
markup.heading, entity.name.section	#F67576	bold
markup.bold, punctuation.definition.bold	#FA994C	bold
markup.italic, punctuation.definition.italic	#F67576	italic
markup.underline.link, string.other.link	#0169cc	underline
markup.inserted	#85df7b	—
markup.deleted	#F67576	—
markup.changed	#FA994C	—
invalid	#ffffff	—

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Dracula

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#FF79C680
activityBar.background#343746
activityBar.border#BD93F9
activityBar.foreground#F8F8F2
activityBar.inactiveForeground#6272A4
activityBarBadge.background#FF79C6
activityBarBadge.foreground#F8F8F2
badge.background#737583
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#F8F8F2
breadcrumb.background#282A36
breadcrumb.focusForeground#F8F8F2
breadcrumb.foreground#6272A4
button.background#44475A
button.foreground#F8F8F2
button.hoverBackground#D6ACFF
button.secondaryBackground#21222C
button.secondaryForeground#F8F8F2
button.secondaryHoverBackground#44475A75
checkbox.background#21222C
checkbox.border#BD93F9
commandCenter.background#21222C
commandCenter.border#BD93F9
commandCenter.foreground#6272A4
debugIcon.continueForeground#50FA7B
debugIcon.disconnectForeground#FF5555
debugIcon.pauseForeground#BD93F9
debugIcon.restartForeground#50FA7B
debugIcon.startForeground#50FA7B
debugIcon.stepIntoForeground#BD93F9
debugIcon.stepOutForeground#BD93F9
debugIcon.stepOverForeground#BD93F9
debugIcon.stopForeground#FF5555
debugToolBar.background#21222C
descriptionForeground#6272A4
diffEditor.diagonalFill#6272A426
diffEditor.insertedLineBackground#50FA7B18
diffEditor.insertedTextBackground#50FA7B30
diffEditor.removedLineBackground#FF555518
diffEditor.removedTextBackground#FF555530
disabledForeground#F8F8F266
dropdown.background#21222C
dropdown.border#BD93F9
dropdown.foreground#F8F8F2
editor.background#282A36
editor.findMatchBackground#F8F8F266
editor.findMatchHighlightBackground#F8F8F235
editor.findRangeHighlightBackground#73758318
editor.foreground#F8F8F2
editor.hoverHighlightBackground#73758318
editor.inactiveSelectionBackground#73758333
editor.lineHighlightBackground#21222C
editor.selectionBackground#44475A
editor.selectionHighlightBackground#73758333
editor.wordHighlightBackground#BD93F925
editor.wordHighlightStrongBackground#FF79C630
editorBracketHighlight.foreground1#FF5555
editorBracketHighlight.foreground2#F8F8F2
editorBracketHighlight.foreground3#50FA7B
editorBracketHighlight.foreground4#BD93F9
editorBracketHighlight.foreground5#FF79C6
editorBracketHighlight.foreground6#D6ACFF
editorBracketMatch.background#73758322
editorBracketMatch.border#737583
editorBracketPairGuide.activeBackground1#737583a6
editorBracketPairGuide.activeBackground2#737583a6
editorBracketPairGuide.activeBackground3#737583a6
editorBracketPairGuide.activeBackground4#737583a6
editorBracketPairGuide.activeBackground5#737583a6
editorBracketPairGuide.activeBackground6#737583a6
editorBracketPairGuide.background1#F8F8F224
editorBracketPairGuide.background2#F8F8F224
editorBracketPairGuide.background3#F8F8F224
editorBracketPairGuide.background4#F8F8F224
editorBracketPairGuide.background5#F8F8F224
editorBracketPairGuide.background6#F8F8F224
editorCursor.foreground#737583
editorError.foreground#FF5555
editorGroup.border#BD93F9
editorGroupHeader.tabsBackground#191A21
editorGroupHeader.tabsBorder#BD93F9
editorGutter.addedBackground#50FA7B
editorGutter.deletedBackground#FF5555
editorGutter.modifiedBackground#BD93F9
editorHint.foreground#50FA7B
editorHoverWidget.background#21222C
editorHoverWidget.border#BD93F9
editorIndentGuide.activeBackground1#737583a6
editorIndentGuide.background1#F8F8F224
editorInfo.foreground#BD93F9
editorLineNumber.activeForeground#6272A4
editorLineNumber.foreground#6272A4
editorSuggestWidget.background#21222C
editorSuggestWidget.border#BD93F9
editorSuggestWidget.selectedBackground#44475A75
editorWarning.foreground#F1FA8C
editorWhitespace.foreground#F8F8F224
editorWidget.background#21222C
editorWidget.border#BD93F9
editorWidget.foreground#F8F8F2
errorForeground#FF5555
focusBorder#6272A4
foreground#F8F8F2
gitDecoration.addedResourceForeground#50FA7B
gitDecoration.conflictingResourceForeground#F8F8F2
gitDecoration.deletedResourceForeground#FF5555
gitDecoration.ignoredResourceForeground#6272A4
gitDecoration.modifiedResourceForeground#8BE9FD
gitDecoration.renamedResourceForeground#FF79C6
gitDecoration.untrackedResourceForeground#50FA7B
icon.foreground#6272A4
input.background#21222C
input.border#BD93F9
input.foreground#F8F8F2
input.placeholderForeground#6272A4
inputOption.activeBackground#73758355
inputOption.activeBorder#737583
inputValidation.errorBackground#FF555522
inputValidation.errorBorder#FF5555
inputValidation.infoBackground#BD93F922
inputValidation.infoBorder#BD93F9
inputValidation.warningBackground#F1FA8C22
inputValidation.warningBorder#F1FA8C
list.activeSelectionBackground#73758355
list.activeSelectionForeground#F8F8F2
list.errorForeground#FF5555
list.focusBackground#73758344
list.highlightForeground#737583
list.hoverBackground#44475A75
list.inactiveSelectionBackground#73758333
list.warningForeground#F1FA8C
menu.background#21222C
menu.foreground#F8F8F2
menu.selectionBackground#44475A
menu.separatorBackground#BD93F9
minimap.background#282A36
minimap.findMatchHighlight#F8F8F280
minimap.selectionHighlight#73758366
notificationCenter.border#BD93F9
notificationCenterHeader.background#21222C
notifications.background#21222C
notifications.border#BD93F9
notifications.foreground#F8F8F2
panel.background#282A36
panel.border#BD93F9
panelTitle.activeBorder#737583
panelTitle.activeForeground#F8F8F2
panelTitle.inactiveForeground#6272A4
peekView.border#737583
peekViewEditor.background#282A36
peekViewResult.background#21222C
peekViewResult.selectionBackground#44475A
peekViewTitle.background#21222C
pickerGroup.border#BD93F9
pickerGroup.foreground#737583
progressBar.background#737583
quickInput.background#21222C
quickInput.foreground#F8F8F2
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#F8F8F245
scrollbarSlider.background#F8F8F218
scrollbarSlider.hoverBackground#F8F8F22e
sideBar.background#21222C
sideBar.border#BD93F9
sideBar.foreground#6272A4
sideBarSectionHeader.background#282A36
sideBarSectionHeader.border#191A21
sideBarSectionHeader.foreground#F8F8F2
sideBarTitle.foreground#F8F8F2
statusBar.background#21222C
statusBar.border#BD93F9
statusBar.debuggingBackground#FF5555
statusBar.debuggingForeground#111111
statusBar.foreground#6272A4
statusBar.noFolderBackground#21222C
tab.activeBackground#282A36
tab.activeBorder#282A36
tab.activeBorderTop#737583
tab.activeForeground#F8F8F2
tab.border#BD93F9
tab.inactiveBackground#21222C
tab.inactiveForeground#6272A4
terminal.ansiBlack#21222C
terminal.ansiBlue#BD93F9
terminal.ansiBrightBlack#6272A4
terminal.ansiBrightBlue#D6ACFF
terminal.ansiBrightCyan#A4FFFF
terminal.ansiBrightGreen#69FF94
terminal.ansiBrightMagenta#FF92DF
terminal.ansiBrightRed#FF6E6E
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFFFA5
terminal.ansiCyan#8BE9FD
terminal.ansiGreen#50FA7B
terminal.ansiMagenta#FF79C6
terminal.ansiRed#FF5555
terminal.ansiWhite#F8F8F2
terminal.ansiYellow#F1FA8C
terminal.background#282A36
terminal.foreground#F8F8F2
terminal.selectionBackground#44475A
terminalCursor.foreground#737583
textBlockQuote.background#21222C
textBlockQuote.border#737583
textCodeBlock.background#21222C
textLink.activeForeground#D6ACFF
textLink.foreground#737583
titleBar.activeBackground#21222C
titleBar.activeForeground#F8F8F2
titleBar.border#BD93F9
titleBar.inactiveBackground#21222C
titleBar.inactiveForeground#6272A4
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	#6272A4	—
string, constant.other.symbol, markup.inline.raw	#50FA7B	—
constant.numeric, constant.language.boolean, constant.language.null	#BD93F9	—
constant, variable.other.constant	#F8F8F2	—
keyword, storage.type, storage.modifier	#FF5555	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#F8F8F2	—
variable.parameter, function.parameter	#6272A4	—
entity.name.function, support.function, variable.function, meta.function-call	#FF79C6	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#FF79C6	—
entity.name.namespace, entity.name.type.namespace	#F8F8F2	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#BD93F9	—
punctuation, meta.brace	#6272A4	—
entity.name.tag, punctuation.definition.tag	#FF5555	—
entity.other.attribute-name	#BD93F9	—
string.regexp, constant.regexp	#D6ACFF	—
markup.heading, entity.name.section	#FF5555	bold
markup.bold, punctuation.definition.bold	#F8F8F2	bold
markup.italic, punctuation.definition.italic	#FF5555	italic
markup.underline.link, string.other.link	#737583	underline
markup.inserted	#50FA7B	—
markup.deleted	#FF5555	—
markup.changed	#F8F8F2	—
invalid	#ffffff	—

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Everforest 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#a7c080d0
activityBar.background#2d353b
activityBar.border#2d353b
activityBar.foreground#d3c6aa
activityBar.inactiveForeground#859289
activityBarBadge.background#a7c080
activityBarBadge.foreground#2d353b
badge.background#a7c080
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#d3c6aa
breadcrumb.background#2d353b
breadcrumb.focusForeground#d3c6aa
breadcrumb.foreground#859289
button.background#a7c080
button.foreground#2d353b
button.hoverBackground#a7c080d0
button.secondaryBackground#2d353b
button.secondaryForeground#d3c6aa
button.secondaryHoverBackground#2d353b00
checkbox.background#2d353b
checkbox.border#2d353b
commandCenter.background#2d353b
commandCenter.border#2d353b
commandCenter.foreground#859289
debugIcon.continueForeground#a7c080
debugIcon.disconnectForeground#e67e80
debugIcon.pauseForeground#7fbbb3
debugIcon.restartForeground#a7c080
debugIcon.startForeground#a7c080
debugIcon.stepIntoForeground#7fbbb3
debugIcon.stepOutForeground#7fbbb3
debugIcon.stepOverForeground#7fbbb3
debugIcon.stopForeground#e67e80
debugToolBar.background#2d353b
descriptionForeground#859289
diffEditor.diagonalFill#85928926
diffEditor.insertedLineBackground#a7c08018
diffEditor.insertedTextBackground#a7c08030
diffEditor.removedLineBackground#e67e8018
diffEditor.removedTextBackground#e67e8030
disabledForeground#d3c6aa66
dropdown.background#2d353b
dropdown.border#2d353b
dropdown.foreground#d3c6aa
editor.background#2d353b
editor.findMatchBackground#d699b666
editor.findMatchHighlightBackground#d699b635
editor.findRangeHighlightBackground#a7c08018
editor.foreground#d3c6aa
editor.hoverHighlightBackground#a7c08018
editor.inactiveSelectionBackground#a7c08033
editor.lineHighlightBackground#2d353b
editor.selectionBackground#475258c0
editor.selectionHighlightBackground#a7c08033
editor.wordHighlightBackground#7fbbb325
editor.wordHighlightStrongBackground#d699b630
editorBracketHighlight.foreground1#e67e80
editorBracketHighlight.foreground2#d699b6
editorBracketHighlight.foreground3#a7c080
editorBracketHighlight.foreground4#7fbbb3
editorBracketHighlight.foreground5#d699b6
editorBracketHighlight.foreground6#7fbbb3
editorBracketMatch.background#a7c08022
editorBracketMatch.border#a7c080
editorBracketPairGuide.activeBackground1#a7c080a6
editorBracketPairGuide.activeBackground2#a7c080a6
editorBracketPairGuide.activeBackground3#a7c080a6
editorBracketPairGuide.activeBackground4#a7c080a6
editorBracketPairGuide.activeBackground5#a7c080a6
editorBracketPairGuide.activeBackground6#a7c080a6
editorBracketPairGuide.background1#d3c6aa24
editorBracketPairGuide.background2#d3c6aa24
editorBracketPairGuide.background3#d3c6aa24
editorBracketPairGuide.background4#d3c6aa24
editorBracketPairGuide.background5#d3c6aa24
editorBracketPairGuide.background6#d3c6aa24
editorCursor.foreground#d3c6aa
editorError.foreground#e67e80
editorGroup.border#2d353b
editorGroupHeader.tabsBackground#2d353b
editorGroupHeader.tabsBorder#2d353b
editorGutter.addedBackground#a7c080
editorGutter.deletedBackground#e67e80
editorGutter.modifiedBackground#7fbbb3
editorHint.foreground#a7c080
editorHoverWidget.background#2d353b
editorHoverWidget.border#2d353b
editorIndentGuide.activeBackground1#a7c080a6
editorIndentGuide.background1#d3c6aa24
editorInfo.foreground#7fbbb3
editorLineNumber.activeForeground#859289
editorLineNumber.foreground#7f897da0
editorSuggestWidget.background#2d353b
editorSuggestWidget.border#2d353b
editorSuggestWidget.selectedBackground#2d353b00
editorWarning.foreground#dbbc7f
editorWhitespace.foreground#d3c6aa24
editorWidget.background#2d353b
editorWidget.border#2d353b
editorWidget.foreground#d3c6aa
errorForeground#e67e80
focusBorder#2d353b00
foreground#9aa79d
gitDecoration.addedResourceForeground#a7c080a0
gitDecoration.conflictingResourceForeground#d699b6
gitDecoration.deletedResourceForeground#e67e80a0
gitDecoration.ignoredResourceForeground#7f897da0
gitDecoration.modifiedResourceForeground#7fbbb3a0
gitDecoration.renamedResourceForeground#d699b6
gitDecoration.untrackedResourceForeground#dbbc7fa0
icon.foreground#859289
input.background#2d353b
input.border#2d353b
input.foreground#d3c6aa
input.placeholderForeground#7f897da0
inputOption.activeBackground#a7c08055
inputOption.activeBorder#a7c080
inputValidation.errorBackground#e67e8022
inputValidation.errorBorder#e67e80
inputValidation.infoBackground#7fbbb322
inputValidation.infoBorder#7fbbb3
inputValidation.warningBackground#dbbc7f22
inputValidation.warningBorder#dbbc7f
list.activeSelectionBackground#a7c08055
list.activeSelectionForeground#d3c6aa
list.errorForeground#e67e80
list.focusBackground#a7c08044
list.highlightForeground#a7c080
list.hoverBackground#2d353b00
list.inactiveSelectionBackground#a7c08033
list.warningForeground#dbbc7f
menu.background#2d353b
menu.foreground#d3c6aa
menu.selectionBackground#475258c0
menu.separatorBackground#2d353b
minimap.background#2d353b
minimap.findMatchHighlight#d699b680
minimap.selectionHighlight#a7c08066
notificationCenter.border#2d353b
notificationCenterHeader.background#2d353b
notifications.background#2d353b
notifications.border#2d353b
notifications.foreground#d3c6aa
panel.background#2d353b
panel.border#2d353b
panelTitle.activeBorder#a7c080
panelTitle.activeForeground#d3c6aa
panelTitle.inactiveForeground#859289
peekView.border#a7c080
peekViewEditor.background#2d353b
peekViewResult.background#2d353b
peekViewResult.selectionBackground#475258c0
peekViewTitle.background#2d353b
pickerGroup.border#2d353b
pickerGroup.foreground#a7c080
progressBar.background#a7c080
quickInput.background#2d353b
quickInput.foreground#d3c6aa
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#d3c6aa45
scrollbarSlider.background#d3c6aa18
scrollbarSlider.hoverBackground#d3c6aa2e
sideBar.background#2d353b
sideBar.border#2d353b
sideBar.foreground#859289
sideBarSectionHeader.background#2d353b00
sideBarSectionHeader.border#2d353b
sideBarSectionHeader.foreground#9aa79d
sideBarTitle.foreground#9aa79d
statusBar.background#2d353b
statusBar.border#2d353b
statusBar.debuggingBackground#e67e80
statusBar.debuggingForeground#111111
statusBar.foreground#859289
statusBar.noFolderBackground#2d353b
tab.activeBackground#2d353b
tab.activeBorder#2d353b
tab.activeBorderTop#a7c080
tab.activeForeground#d3c6aa
tab.border#2d353b
tab.inactiveBackground#2d353b
tab.inactiveForeground#859289
terminal.ansiBlack#343f44
terminal.ansiBlue#7fbbb3
terminal.ansiBrightBlack#859289
terminal.ansiBrightBlue#7fbbb3
terminal.ansiBrightCyan#83c092
terminal.ansiBrightGreen#a7c080
terminal.ansiBrightMagenta#d699b6
terminal.ansiBrightRed#e67e80
terminal.ansiBrightWhite#d3c6aa
terminal.ansiBrightYellow#dbbc7f
terminal.ansiCyan#83c092
terminal.ansiGreen#a7c080
terminal.ansiMagenta#d699b6
terminal.ansiRed#e67e80
terminal.ansiWhite#d3c6aa
terminal.ansiYellow#dbbc7f
terminal.background#2d353b
terminal.foreground#d3c6aa
terminal.selectionBackground#475258c0
terminalCursor.foreground#a7c080
textBlockQuote.background#2d353b
textBlockQuote.border#a7c080
textCodeBlock.background#2d353b
textLink.activeForeground#a7c080c0
textLink.foreground#a7c080
titleBar.activeBackground#2d353b
titleBar.activeForeground#d3c6aa
titleBar.border#2d353b
titleBar.inactiveBackground#2d353b
titleBar.inactiveForeground#7f897da0
tree.inactiveIndentGuidesStroke#d3c6aa24
tree.indentGuidesStroke#d3c6aa52
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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