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 — Gruvbox 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#458588
activityBar.background#fbf1c7
activityBar.border#ebdbb2
activityBar.foreground#3c3836
activityBar.inactiveForeground#bdae93
activityBarBadge.background#458588
activityBarBadge.foreground#ebdbb2
badge.background#458588
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#3c3836
breadcrumb.background#fbf1c7
breadcrumb.focusForeground#3c3836
breadcrumb.foreground#928374
button.background#45858880
button.foreground#3c3836
button.hoverBackground#45858860
button.secondaryBackground#fbf1c7
button.secondaryForeground#3c3836
button.secondaryHoverBackground#ebdbb280
checkbox.background#fbf1c7
checkbox.border#ebdbb2
commandCenter.background#fbf1c7
commandCenter.border#ebdbb2
commandCenter.foreground#928374
debugIcon.continueForeground#98971a
debugIcon.disconnectForeground#cc241d
debugIcon.pauseForeground#458588
debugIcon.restartForeground#98971a
debugIcon.startForeground#98971a
debugIcon.stepIntoForeground#458588
debugIcon.stepOutForeground#458588
debugIcon.stepOverForeground#458588
debugIcon.stopForeground#cc241d
debugToolBar.background#fbf1c7
descriptionForeground#928374
diffEditor.diagonalFill#92837426
diffEditor.insertedLineBackground#3c383612
diffEditor.insertedTextBackground#3c383620
diffEditor.removedLineBackground#cc241d12
diffEditor.removedTextBackground#cc241d20
disabledForeground#3c383666
dropdown.background#fbf1c7
dropdown.border#ebdbb2
dropdown.foreground#3c3836
editor.background#fbf1c7
editor.findMatchBackground#3c38364d
editor.findMatchHighlightBackground#3c383626
editor.findRangeHighlightBackground#45858818
editor.foreground#3c3836
editor.hoverHighlightBackground#45858818
editor.inactiveSelectionBackground#4585881f
editor.lineHighlightBackground#fbf1c7
editor.selectionBackground#689d6a40
editor.selectionHighlightBackground#4585881f
editor.wordHighlightBackground#45858818
editor.wordHighlightStrongBackground#b162861f
editorBracketHighlight.foreground1#cc241d
editorBracketHighlight.foreground2#3c3836
editorBracketHighlight.foreground3#98971a
editorBracketHighlight.foreground4#458588
editorBracketHighlight.foreground5#b16286
editorBracketHighlight.foreground6#076678
editorBracketMatch.background#45858822
editorBracketMatch.border#458588
editorBracketPairGuide.activeBackground1#4585888c
editorBracketPairGuide.activeBackground2#4585888c
editorBracketPairGuide.activeBackground3#4585888c
editorBracketPairGuide.activeBackground4#4585888c
editorBracketPairGuide.activeBackground5#4585888c
editorBracketPairGuide.activeBackground6#4585888c
editorBracketPairGuide.background1#3c383618
editorBracketPairGuide.background2#3c383618
editorBracketPairGuide.background3#3c383618
editorBracketPairGuide.background4#3c383618
editorBracketPairGuide.background5#3c383618
editorBracketPairGuide.background6#3c383618
editorCursor.foreground#3c3836
editorError.foreground#cc241d
editorGroup.border#ebdbb2
editorGroupHeader.tabsBackground#fbf1c7
editorGroupHeader.tabsBorder#ebdbb2
editorGutter.addedBackground#3c3836
editorGutter.deletedBackground#cc241d
editorGutter.modifiedBackground#458588
editorHint.foreground#98971a
editorHoverWidget.background#fbf1c7
editorHoverWidget.border#ebdbb2
editorIndentGuide.activeBackground1#4585888c
editorIndentGuide.background1#3c383618
editorInfo.foreground#458588
editorLineNumber.activeForeground#928374
editorLineNumber.foreground#bdae93
editorSuggestWidget.background#fbf1c7
editorSuggestWidget.border#ebdbb2
editorSuggestWidget.selectedBackground#ebdbb280
editorWarning.foreground#d79921
editorWhitespace.foreground#3c383618
editorWidget.background#fbf1c7
editorWidget.border#ebdbb2
editorWidget.foreground#3c3836
errorForeground#9d0006
focusBorder#ebdbb2
foreground#3c3836
gitDecoration.addedResourceForeground#3c3836
gitDecoration.conflictingResourceForeground#3c3836
gitDecoration.deletedResourceForeground#cc241d
gitDecoration.ignoredResourceForeground#bdae93
gitDecoration.modifiedResourceForeground#d79921
gitDecoration.renamedResourceForeground#b16286
gitDecoration.untrackedResourceForeground#98971a
icon.foreground#928374
input.background#fbf1c7
input.border#ebdbb2
input.foreground#3c3836
input.placeholderForeground#bdae93
inputOption.activeBackground#45858822
inputOption.activeBorder#458588
inputValidation.errorBackground#cc241d12
inputValidation.errorBorder#cc241d
inputValidation.infoBackground#45858812
inputValidation.infoBorder#458588
inputValidation.warningBackground#d7992112
inputValidation.warningBorder#d79921
list.activeSelectionBackground#45858822
list.activeSelectionForeground#3c3836
list.errorForeground#cc241d
list.focusBackground#4585881f
list.highlightForeground#458588
list.hoverBackground#ebdbb280
list.inactiveSelectionBackground#45858814
list.warningForeground#d79921
menu.background#fbf1c7
menu.foreground#3c3836
menu.selectionBackground#689d6a40
menu.separatorBackground#ebdbb2
minimap.background#fbf1c7
minimap.findMatchHighlight#3c383680
minimap.selectionHighlight#45858866
notificationCenter.border#ebdbb2
notificationCenterHeader.background#fbf1c7
notifications.background#fbf1c7
notifications.border#ebdbb2
notifications.foreground#3c3836
panel.background#fbf1c7
panel.border#ebdbb2
panelTitle.activeBorder#458588
panelTitle.activeForeground#3c3836
panelTitle.inactiveForeground#928374
peekView.border#458588
peekViewEditor.background#fbf1c7
peekViewResult.background#fbf1c7
peekViewResult.selectionBackground#689d6a40
peekViewTitle.background#fbf1c7
pickerGroup.border#ebdbb2
pickerGroup.foreground#458588
progressBar.background#458588
quickInput.background#fbf1c7
quickInput.foreground#3c3836
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#3c383645
scrollbarSlider.background#3c383618
scrollbarSlider.hoverBackground#3c38362e
sideBar.background#fbf1c7
sideBar.border#ebdbb2
sideBar.foreground#504945
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#ebdbb2
sideBarSectionHeader.foreground#3c3836
sideBarTitle.foreground#3c3836
statusBar.background#fbf1c7
statusBar.border#ebdbb2
statusBar.debuggingBackground#cc241d
statusBar.debuggingForeground#ffffff
statusBar.foreground#928374
statusBar.noFolderBackground#fbf1c7
tab.activeBackground#fbf1c7
tab.activeBorder#fbf1c7
tab.activeBorderTop#458588
tab.activeForeground#3c3836
tab.border#ebdbb2
tab.inactiveBackground#fbf1c7
tab.inactiveForeground#928374
terminal.ansiBlack#ebdbb2
terminal.ansiBlue#458588
terminal.ansiBrightBlack#928374
terminal.ansiBrightBlue#076678
terminal.ansiBrightCyan#427b58
terminal.ansiBrightGreen#79740e
terminal.ansiBrightMagenta#8f3f71
terminal.ansiBrightRed#9d0006
terminal.ansiBrightWhite#3c3836
terminal.ansiBrightYellow#b57614
terminal.ansiCyan#689d6a
terminal.ansiGreen#98971a
terminal.ansiMagenta#b16286
terminal.ansiRed#cc241d
terminal.ansiWhite#7c6f64
terminal.ansiYellow#d79921
terminal.background#fbf1c7
terminal.foreground#3c3836
terminal.selectionBackground#689d6a40
terminalCursor.foreground#458588
textBlockQuote.background#fbf1c7
textBlockQuote.border#458588
textCodeBlock.background#fbf1c7
textLink.activeForeground#458588
textLink.foreground#076678
titleBar.activeBackground#fbf1c7
titleBar.activeForeground#3c3836
titleBar.border#ebdbb2
titleBar.inactiveBackground#fbf1c7
titleBar.inactiveForeground#bdae93
tree.inactiveIndentGuidesStroke#3c383618
tree.indentGuidesStroke#3c38363d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette 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#0169cc
activityBar.background#fcfcfc
activityBar.border#00000022
activityBar.foreground#0d0d0d
activityBar.inactiveForeground#666666
activityBarBadge.background#0169cc
activityBarBadge.foreground#ffffff
badge.background#0169cc
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#0d0d0d
breadcrumb.background#ffffff
breadcrumb.focusForeground#0d0d0d
breadcrumb.foreground#666666
button.background#0169cc
button.foreground#ffffff
button.hoverBackground#001BCB
button.secondaryBackground#fcfcfc
button.secondaryForeground#0d0d0d
button.secondaryHoverBackground#fcfcfc
checkbox.background#fcfcfc
checkbox.border#00000022
commandCenter.background#fcfcfc
commandCenter.border#00000022
commandCenter.foreground#666666
debugIcon.continueForeground#008809
debugIcon.disconnectForeground#D53538
debugIcon.pauseForeground#0071EA
debugIcon.restartForeground#008809
debugIcon.startForeground#008809
debugIcon.stepIntoForeground#0071EA
debugIcon.stepOutForeground#0071EA
debugIcon.stepOverForeground#0071EA
debugIcon.stopForeground#D53538
debugToolBar.background#fcfcfc
descriptionForeground#666666
diffEditor.diagonalFill#66666626
diffEditor.insertedLineBackground#00a24012
diffEditor.insertedTextBackground#00a24020
diffEditor.removedLineBackground#e02e2a12
diffEditor.removedTextBackground#e02e2a20
disabledForeground#0d0d0d66
dropdown.background#fcfcfc
dropdown.border#00000022
dropdown.foreground#0d0d0d
editor.background#ffffff
editor.findMatchBackground#BD58004d
editor.findMatchHighlightBackground#BD580026
editor.findRangeHighlightBackground#0169cc18
editor.foreground#0d0d0d
editor.hoverHighlightBackground#0169cc18
editor.inactiveSelectionBackground#0169cc1f
editor.lineHighlightBackground#fcfcfc
editor.selectionBackground#0169cc44
editor.selectionHighlightBackground#0169cc1f
editor.wordHighlightBackground#0071EA18
editor.wordHighlightStrongBackground#751ED91f
editorBracketHighlight.foreground1#D53538
editorBracketHighlight.foreground2#BD5800
editorBracketHighlight.foreground3#008809
editorBracketHighlight.foreground4#0071EA
editorBracketHighlight.foreground5#751ED9
editorBracketHighlight.foreground6#001BCB
editorBracketMatch.background#0169cc22
editorBracketMatch.border#0169cc
editorBracketPairGuide.activeBackground1#0169cc8c
editorBracketPairGuide.activeBackground2#0169cc8c
editorBracketPairGuide.activeBackground3#0169cc8c
editorBracketPairGuide.activeBackground4#0169cc8c
editorBracketPairGuide.activeBackground5#0169cc8c
editorBracketPairGuide.activeBackground6#0169cc8c
editorBracketPairGuide.background1#0d0d0d18
editorBracketPairGuide.background2#0d0d0d18
editorBracketPairGuide.background3#0d0d0d18
editorBracketPairGuide.background4#0d0d0d18
editorBracketPairGuide.background5#0d0d0d18
editorBracketPairGuide.background6#0d0d0d18
editorCursor.foreground#0169cc
editorError.foreground#D53538
editorGroup.border#00000022
editorGroupHeader.tabsBackground#fcfcfc
editorGroupHeader.tabsBorder#00000022
editorGutter.addedBackground#00a240
editorGutter.deletedBackground#e02e2a
editorGutter.modifiedBackground#0071EA
editorHint.foreground#008809
editorHoverWidget.background#fcfcfc
editorHoverWidget.border#00000022
editorIndentGuide.activeBackground1#0169cc8c
editorIndentGuide.background1#0d0d0d18
editorInfo.foreground#0071EA
editorLineNumber.activeForeground#666666
editorLineNumber.foreground#666666
editorSuggestWidget.background#fcfcfc
editorSuggestWidget.border#00000022
editorSuggestWidget.selectedBackground#fcfcfc
editorWarning.foreground#0071EA
editorWhitespace.foreground#0d0d0d18
editorWidget.background#fcfcfc
editorWidget.border#00000022
editorWidget.foreground#0d0d0d
errorForeground#D53538
focusBorder#0169cc
foreground#0d0d0d
gitDecoration.addedResourceForeground#00a240
gitDecoration.conflictingResourceForeground#BD5800
gitDecoration.deletedResourceForeground#e02e2a
gitDecoration.ignoredResourceForeground#666666
gitDecoration.modifiedResourceForeground#0071EA
gitDecoration.renamedResourceForeground#751ED9
gitDecoration.untrackedResourceForeground#00a240
icon.foreground#666666
input.background#fcfcfc
input.border#00000022
input.foreground#0d0d0d
input.placeholderForeground#666666
inputOption.activeBackground#0169cc22
inputOption.activeBorder#0169cc
inputValidation.errorBackground#D5353812
inputValidation.errorBorder#D53538
inputValidation.infoBackground#0071EA12
inputValidation.infoBorder#0071EA
inputValidation.warningBackground#0071EA12
inputValidation.warningBorder#0071EA
list.activeSelectionBackground#0169cc22
list.activeSelectionForeground#0d0d0d
list.errorForeground#D53538
list.focusBackground#0169cc1f
list.highlightForeground#0169cc
list.hoverBackground#fcfcfc
list.inactiveSelectionBackground#0169cc14
list.warningForeground#0071EA
menu.background#fcfcfc
menu.foreground#0d0d0d
menu.selectionBackground#0169cc44
menu.separatorBackground#00000022
minimap.background#ffffff
minimap.findMatchHighlight#BD580080
minimap.selectionHighlight#0169cc66
notificationCenter.border#00000022
notificationCenterHeader.background#fcfcfc
notifications.background#fcfcfc
notifications.border#00000022
notifications.foreground#0d0d0d
panel.background#fcfcfc
panel.border#00000022
panelTitle.activeBorder#0169cc
panelTitle.activeForeground#0d0d0d
panelTitle.inactiveForeground#666666
peekView.border#0169cc
peekViewEditor.background#ffffff
peekViewResult.background#fcfcfc
peekViewResult.selectionBackground#0169cc44
peekViewTitle.background#fcfcfc
pickerGroup.border#00000022
pickerGroup.foreground#0169cc
progressBar.background#0169cc
quickInput.background#fcfcfc
quickInput.foreground#0d0d0d
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#0d0d0d45
scrollbarSlider.background#0d0d0d18
scrollbarSlider.hoverBackground#0d0d0d2e
sideBar.background#fcfcfc
sideBar.border#00000022
sideBar.foreground#212121
sideBarSectionHeader.background#fcfcfc
sideBarSectionHeader.border#00000022
sideBarSectionHeader.foreground#0d0d0d
sideBarTitle.foreground#0d0d0d
statusBar.background#fcfcfc
statusBar.border#00000022
statusBar.debuggingBackground#D53538
statusBar.debuggingForeground#ffffff
statusBar.foreground#666666
statusBar.noFolderBackground#fcfcfc
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#0169cc
tab.activeForeground#0d0d0d
tab.border#00000022
tab.inactiveBackground#fcfcfc
tab.inactiveForeground#666666
terminal.ansiBlack#0d0d0d
terminal.ansiBlue#0071EA
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#001BCB
terminal.ansiBrightCyan#0071EA
terminal.ansiBrightGreen#59d24e
terminal.ansiBrightMagenta#9840FF
terminal.ansiBrightRed#F44A4C
terminal.ansiBrightWhite#fcfcfc
terminal.ansiBrightYellow#BD5800
terminal.ansiCyan#001BCB
terminal.ansiGreen#008809
terminal.ansiMagenta#751ED9
terminal.ansiRed#D53538
terminal.ansiWhite#d9d9d9
terminal.ansiYellow#0071EA
terminal.background#ffffff
terminal.foreground#0d0d0d
terminal.selectionBackground#0169cc44
terminalCursor.foreground#0169cc
textBlockQuote.background#fcfcfc
textBlockQuote.border#0169cc
textCodeBlock.background#fcfcfc
textLink.activeForeground#001BCB
textLink.foreground#0169cc
titleBar.activeBackground#fcfcfc
titleBar.activeForeground#0d0d0d
titleBar.border#00000022
titleBar.inactiveBackground#fcfcfc
titleBar.inactiveForeground#666666
tree.inactiveIndentGuidesStroke#0d0d0d18
tree.indentGuidesStroke#0d0d0d3d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#666666	—
string, constant.other.symbol, markup.inline.raw	#008809	—
constant.numeric, constant.language.boolean, constant.language.null	#0071EA	—
constant, variable.other.constant	#BD5800	—
keyword, storage.type, storage.modifier	#D53538	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#BD5800	—
variable.parameter, function.parameter	#666666	—
entity.name.function, support.function, variable.function, meta.function-call	#751ED9	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#751ED9	—
entity.name.namespace, entity.name.type.namespace	#BD5800	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#0071EA	—
punctuation, meta.brace	#666666	—
entity.name.tag, punctuation.definition.tag	#D53538	—
entity.other.attribute-name	#0071EA	—
string.regexp, constant.regexp	#001BCB	—
markup.heading, entity.name.section	#D53538	bold
markup.bold, punctuation.definition.bold	#BD5800	bold
markup.italic, punctuation.definition.italic	#D53538	italic
markup.underline.link, string.other.link	#0169cc	underline
markup.inserted	#008809	—
markup.deleted	#D53538	—
markup.changed	#BD5800	—
invalid	#ffffff	—

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Linear 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#5e6ad2
activityBar.background#080a0f
activityBar.border#ffffff22
activityBar.foreground#e6e9ef
activityBar.inactiveForeground#636b7b
activityBarBadge.background#5e6ad2
activityBarBadge.foreground#ffffff
badge.background#606acc
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#e6e9ef
breadcrumb.background#17181d
breadcrumb.focusForeground#e6e9ef
breadcrumb.foreground#636b7b
button.background#5e6ad2
button.foreground#ffffff
button.hoverBackground#f5c56a
button.secondaryBackground#080a0f
button.secondaryForeground#e6e9ef
button.secondaryHoverBackground#080a0f
checkbox.background#080a0f
checkbox.border#ffffff22
commandCenter.background#080a0f
commandCenter.border#ffffff22
commandCenter.foreground#636b7b
debugIcon.continueForeground#7ad9c0
debugIcon.disconnectForeground#8c97ff
debugIcon.pauseForeground#f5c56a
debugIcon.restartForeground#7ad9c0
debugIcon.startForeground#7ad9c0
debugIcon.stepIntoForeground#f5c56a
debugIcon.stepOutForeground#f5c56a
debugIcon.stepOverForeground#f5c56a
debugIcon.stopForeground#8c97ff
debugToolBar.background#080a0f
descriptionForeground#636b7b
diffEditor.diagonalFill#636b7b26
diffEditor.insertedLineBackground#7ad9c018
diffEditor.insertedTextBackground#7ad9c030
diffEditor.removedLineBackground#8c97ff18
diffEditor.removedTextBackground#8c97ff30
disabledForeground#e6e9ef66
dropdown.background#080a0f
dropdown.border#ffffff22
dropdown.foreground#e6e9ef
editor.background#17181d
editor.findMatchBackground#e6e9ef66
editor.findMatchHighlightBackground#e6e9ef35
editor.findRangeHighlightBackground#606acc18
editor.foreground#e6e9ef
editor.hoverHighlightBackground#606acc18
editor.inactiveSelectionBackground#606acc33
editor.lineHighlightBackground#080a0f
editor.selectionBackground#606acc44
editor.selectionHighlightBackground#606acc33
editor.wordHighlightBackground#f5c56a25
editor.wordHighlightStrongBackground#c2a1ff30
editorBracketHighlight.foreground1#8c97ff
editorBracketHighlight.foreground2#e6e9ef
editorBracketHighlight.foreground3#7ad9c0
editorBracketHighlight.foreground4#f5c56a
editorBracketHighlight.foreground5#c2a1ff
editorBracketHighlight.foreground6#f5c56a
editorBracketMatch.background#606acc22
editorBracketMatch.border#606acc
editorBracketPairGuide.activeBackground1#606acca6
editorBracketPairGuide.activeBackground2#606acca6
editorBracketPairGuide.activeBackground3#606acca6
editorBracketPairGuide.activeBackground4#606acca6
editorBracketPairGuide.activeBackground5#606acca6
editorBracketPairGuide.activeBackground6#606acca6
editorBracketPairGuide.background1#e6e9ef24
editorBracketPairGuide.background2#e6e9ef24
editorBracketPairGuide.background3#e6e9ef24
editorBracketPairGuide.background4#e6e9ef24
editorBracketPairGuide.background5#e6e9ef24
editorBracketPairGuide.background6#e6e9ef24
editorCursor.foreground#8c97ff
editorError.foreground#8c97ff
editorGroup.border#ffffff22
editorGroupHeader.tabsBackground#0f1219
editorGroupHeader.tabsBorder#ffffff22
editorGutter.addedBackground#7ad9c0
editorGutter.deletedBackground#8c97ff
editorGutter.modifiedBackground#f5c56a
editorHint.foreground#7ad9c0
editorHoverWidget.background#080a0f
editorHoverWidget.border#ffffff22
editorIndentGuide.activeBackground1#606acca6
editorIndentGuide.background1#e6e9ef24
editorInfo.foreground#f5c56a
editorLineNumber.activeForeground#636b7b
editorLineNumber.foreground#636b7b
editorSuggestWidget.background#080a0f
editorSuggestWidget.border#ffffff22
editorSuggestWidget.selectedBackground#080a0f
editorWarning.foreground#7ad9c0
editorWhitespace.foreground#e6e9ef24
editorWidget.background#080a0f
editorWidget.border#ffffff22
editorWidget.foreground#e6e9ef
errorForeground#8c97ff
focusBorder#5e6ad2
foreground#e6e9ef
gitDecoration.addedResourceForeground#7ad9c0
gitDecoration.conflictingResourceForeground#e6e9ef
gitDecoration.deletedResourceForeground#8c97ff
gitDecoration.ignoredResourceForeground#636b7b
gitDecoration.modifiedResourceForeground#f5c56a
gitDecoration.renamedResourceForeground#c2a1ff
gitDecoration.untrackedResourceForeground#7ad9c0
icon.foreground#636b7b
input.background#080a0f
input.border#ffffff22
input.foreground#e6e9ef
input.placeholderForeground#636b7b
inputOption.activeBackground#606acc55
inputOption.activeBorder#606acc
inputValidation.errorBackground#8c97ff22
inputValidation.errorBorder#8c97ff
inputValidation.infoBackground#f5c56a22
inputValidation.infoBorder#f5c56a
inputValidation.warningBackground#7ad9c022
inputValidation.warningBorder#7ad9c0
list.activeSelectionBackground#606acc55
list.activeSelectionForeground#e6e9ef
list.errorForeground#8c97ff
list.focusBackground#606acc44
list.highlightForeground#606acc
list.hoverBackground#080a0f
list.inactiveSelectionBackground#606acc33
list.warningForeground#7ad9c0
menu.background#080a0f
menu.foreground#e6e9ef
menu.selectionBackground#606acc44
menu.separatorBackground#ffffff22
minimap.background#17181d
minimap.findMatchHighlight#e6e9ef80
minimap.selectionHighlight#606acc66
notificationCenter.border#ffffff22
notificationCenterHeader.background#080a0f
notifications.background#080a0f
notifications.border#ffffff22
notifications.foreground#e6e9ef
panel.background#0a0c11
panel.border#ffffff22
panelTitle.activeBorder#606acc
panelTitle.activeForeground#e6e9ef
panelTitle.inactiveForeground#636b7b
peekView.border#606acc
peekViewEditor.background#17181d
peekViewResult.background#080a0f
peekViewResult.selectionBackground#606acc44
peekViewTitle.background#080a0f
pickerGroup.border#ffffff22
pickerGroup.foreground#606acc
progressBar.background#606acc
quickInput.background#080a0f
quickInput.foreground#e6e9ef
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#e6e9ef45
scrollbarSlider.background#e6e9ef18
scrollbarSlider.hoverBackground#e6e9ef2e
sideBar.background#080a0f
sideBar.border#ffffff22
sideBar.foreground#d8dce6
sideBarSectionHeader.background#080a0f
sideBarSectionHeader.border#ffffff22
sideBarSectionHeader.foreground#e6e9ef
sideBarTitle.foreground#f7f8f8
statusBar.background#080a0f
statusBar.border#ffffff22
statusBar.debuggingBackground#8c97ff
statusBar.debuggingForeground#111111
statusBar.foreground#636b7b
statusBar.noFolderBackground#080a0f
tab.activeBackground#17181d
tab.activeBorder#17181d
tab.activeBorderTop#606acc
tab.activeForeground#e6e9ef
tab.border#ffffff22
tab.inactiveBackground#080a0f
tab.inactiveForeground#636b7b
terminal.ansiBlack#111111
terminal.ansiBlue#f5c56a
terminal.ansiBrightBlack#636b7b
terminal.ansiBrightBlue#f5c56a
terminal.ansiBrightCyan#f5c56a
terminal.ansiBrightGreen#7ad9c0
terminal.ansiBrightMagenta#c2a1ff
terminal.ansiBrightRed#8c97ff
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e6e9ef
terminal.ansiCyan#f5c56a
terminal.ansiGreen#7ad9c0
terminal.ansiMagenta#c2a1ff
terminal.ansiRed#8c97ff
terminal.ansiWhite#d6d6d6
terminal.ansiYellow#7ad9c0
terminal.background#17181d
terminal.foreground#e6e9ef
terminal.selectionBackground#606acc44
terminalCursor.foreground#606acc
textBlockQuote.background#080a0f
textBlockQuote.border#606acc
textCodeBlock.background#080a0f
textLink.activeForeground#f5c56a
textLink.foreground#5e6ad2
titleBar.activeBackground#080a0f
titleBar.activeForeground#e6e9ef
titleBar.border#ffffff22
titleBar.inactiveBackground#080a0f
titleBar.inactiveForeground#636b7b
tree.inactiveIndentGuidesStroke#e6e9ef24
tree.indentGuidesStroke#e6e9ef52
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Linear 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#5e6ad2
activityBar.background#f2f4f8
activityBar.border#00000022
activityBar.foreground#2a3140
activityBar.inactiveForeground#858ea1
activityBarBadge.background#5e6ad2
activityBarBadge.foreground#ffffff
badge.background#5e6ad2
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#2a3140
breadcrumb.background#f7f8fa
breadcrumb.focusForeground#2a3140
breadcrumb.foreground#858ea1
button.background#5e6ad2
button.foreground#ffffff
button.hoverBackground#b4831f
button.secondaryBackground#f2f4f8
button.secondaryForeground#2a3140
button.secondaryHoverBackground#f2f4f8
checkbox.background#f2f4f8
checkbox.border#00000022
commandCenter.background#f2f4f8
commandCenter.border#00000022
commandCenter.foreground#858ea1
debugIcon.continueForeground#0f8f83
debugIcon.disconnectForeground#5e6ad2
debugIcon.pauseForeground#b4831f
debugIcon.restartForeground#0f8f83
debugIcon.startForeground#0f8f83
debugIcon.stepIntoForeground#b4831f
debugIcon.stepOutForeground#b4831f
debugIcon.stepOverForeground#b4831f
debugIcon.stopForeground#5e6ad2
debugToolBar.background#f2f4f8
descriptionForeground#858ea1
diffEditor.diagonalFill#858ea126
diffEditor.insertedLineBackground#0f8f8312
diffEditor.insertedTextBackground#0f8f8320
diffEditor.removedLineBackground#5e6ad212
diffEditor.removedTextBackground#5e6ad220
disabledForeground#2a314066
dropdown.background#f2f4f8
dropdown.border#00000022
dropdown.foreground#2a3140
editor.background#f7f8fa
editor.findMatchBackground#2a31404d
editor.findMatchHighlightBackground#2a314026
editor.findRangeHighlightBackground#5e6ad218
editor.foreground#2a3140
editor.hoverHighlightBackground#5e6ad218
editor.inactiveSelectionBackground#5e6ad21f
editor.lineHighlightBackground#f2f4f8
editor.selectionBackground#5e6ad244
editor.selectionHighlightBackground#5e6ad21f
editor.wordHighlightBackground#b4831f18
editor.wordHighlightStrongBackground#8160d81f
editorBracketHighlight.foreground1#5e6ad2
editorBracketHighlight.foreground2#2a3140
editorBracketHighlight.foreground3#0f8f83
editorBracketHighlight.foreground4#b4831f
editorBracketHighlight.foreground5#8160d8
editorBracketHighlight.foreground6#b4831f
editorBracketMatch.background#5e6ad222
editorBracketMatch.border#5e6ad2
editorBracketPairGuide.activeBackground1#5e6ad28c
editorBracketPairGuide.activeBackground2#5e6ad28c
editorBracketPairGuide.activeBackground3#5e6ad28c
editorBracketPairGuide.activeBackground4#5e6ad28c
editorBracketPairGuide.activeBackground5#5e6ad28c
editorBracketPairGuide.activeBackground6#5e6ad28c
editorBracketPairGuide.background1#2a314018
editorBracketPairGuide.background2#2a314018
editorBracketPairGuide.background3#2a314018
editorBracketPairGuide.background4#2a314018
editorBracketPairGuide.background5#2a314018
editorBracketPairGuide.background6#2a314018
editorCursor.foreground#5e6ad2
editorError.foreground#5e6ad2
editorGroup.border#00000022
editorGroupHeader.tabsBackground#f2f4f8
editorGroupHeader.tabsBorder#00000022
editorGutter.addedBackground#0f8f83
editorGutter.deletedBackground#5e6ad2
editorGutter.modifiedBackground#b4831f
editorHint.foreground#0f8f83
editorHoverWidget.background#f2f4f8
editorHoverWidget.border#00000022
editorIndentGuide.activeBackground1#5e6ad28c
editorIndentGuide.background1#2a314018
editorInfo.foreground#b4831f
editorLineNumber.activeForeground#858ea1
editorLineNumber.foreground#858ea1
editorSuggestWidget.background#f2f4f8
editorSuggestWidget.border#00000022
editorSuggestWidget.selectedBackground#f2f4f8
editorWarning.foreground#0f8f83
editorWhitespace.foreground#2a314018
editorWidget.background#f2f4f8
editorWidget.border#00000022
editorWidget.foreground#2a3140
errorForeground#5e6ad2
focusBorder#5e6ad2
foreground#2a3140
gitDecoration.addedResourceForeground#0f8f83
gitDecoration.conflictingResourceForeground#2a3140
gitDecoration.deletedResourceForeground#5e6ad2
gitDecoration.ignoredResourceForeground#858ea1
gitDecoration.modifiedResourceForeground#b4831f
gitDecoration.renamedResourceForeground#8160d8
gitDecoration.untrackedResourceForeground#0f8f83
icon.foreground#858ea1
input.background#f2f4f8
input.border#00000022
input.foreground#2a3140
input.placeholderForeground#858ea1
inputOption.activeBackground#5e6ad222
inputOption.activeBorder#5e6ad2
inputValidation.errorBackground#5e6ad212
inputValidation.errorBorder#5e6ad2
inputValidation.infoBackground#b4831f12
inputValidation.infoBorder#b4831f
inputValidation.warningBackground#0f8f8312
inputValidation.warningBorder#0f8f83
list.activeSelectionBackground#5e6ad222
list.activeSelectionForeground#2a3140
list.errorForeground#5e6ad2
list.focusBackground#5e6ad21f
list.highlightForeground#5e6ad2
list.hoverBackground#f2f4f8
list.inactiveSelectionBackground#5e6ad214
list.warningForeground#0f8f83
menu.background#f2f4f8
menu.foreground#2a3140
menu.selectionBackground#5e6ad244
menu.separatorBackground#00000022
minimap.background#f7f8fa
minimap.findMatchHighlight#2a314080
minimap.selectionHighlight#5e6ad266
notificationCenter.border#00000022
notificationCenterHeader.background#f2f4f8
notifications.background#f2f4f8
notifications.border#00000022
notifications.foreground#2a3140
panel.background#f2f4f8
panel.border#00000022
panelTitle.activeBorder#5e6ad2
panelTitle.activeForeground#2a3140
panelTitle.inactiveForeground#858ea1
peekView.border#5e6ad2
peekViewEditor.background#f7f8fa
peekViewResult.background#f2f4f8
peekViewResult.selectionBackground#5e6ad244
peekViewTitle.background#f2f4f8
pickerGroup.border#00000022
pickerGroup.foreground#5e6ad2
progressBar.background#5e6ad2
quickInput.background#f2f4f8
quickInput.foreground#2a3140
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#2a314045
scrollbarSlider.background#2a314018
scrollbarSlider.hoverBackground#2a31402e
sideBar.background#f2f4f8
sideBar.border#00000022
sideBar.foreground#4a5263
sideBarSectionHeader.background#f2f4f8
sideBarSectionHeader.border#00000022
sideBarSectionHeader.foreground#2a3140
sideBarTitle.foreground#1f2430
statusBar.background#f2f4f8
statusBar.border#00000022
statusBar.debuggingBackground#5e6ad2
statusBar.debuggingForeground#ffffff
statusBar.foreground#858ea1
statusBar.noFolderBackground#f2f4f8
tab.activeBackground#f7f8fa
tab.activeBorder#f7f8fa
tab.activeBorderTop#5e6ad2
tab.activeForeground#2a3140
tab.border#00000022
tab.inactiveBackground#f2f4f8
tab.inactiveForeground#858ea1
terminal.ansiBlack#0d0d0d
terminal.ansiBlue#b4831f
terminal.ansiBrightBlack#858ea1
terminal.ansiBrightBlue#b4831f
terminal.ansiBrightCyan#b4831f
terminal.ansiBrightGreen#0f8f83
terminal.ansiBrightMagenta#8160d8
terminal.ansiBrightRed#5e6ad2
terminal.ansiBrightWhite#fcfcfc
terminal.ansiBrightYellow#2a3140
terminal.ansiCyan#b4831f
terminal.ansiGreen#0f8f83
terminal.ansiMagenta#8160d8
terminal.ansiRed#5e6ad2
terminal.ansiWhite#d9d9d9
terminal.ansiYellow#0f8f83
terminal.background#f7f8fa
terminal.foreground#2a3140
terminal.selectionBackground#5e6ad244
terminalCursor.foreground#5e6ad2
textBlockQuote.background#f2f4f8
textBlockQuote.border#5e6ad2
textCodeBlock.background#f2f4f8
textLink.activeForeground#b4831f
textLink.foreground#5e6ad2
titleBar.activeBackground#f2f4f8
titleBar.activeForeground#2a3140
titleBar.border#00000022
titleBar.inactiveBackground#f2f4f8
titleBar.inactiveForeground#858ea1
tree.inactiveIndentGuidesStroke#2a314018
tree.indentGuidesStroke#2a31403d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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