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 — Night Owl

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#7e57c2
activityBar.background#011627
activityBar.border#011627
activityBar.foreground#5f7e97
activityBar.inactiveForeground#4b6479
activityBarBadge.background#44596b
activityBarBadge.foreground#ffffff
badge.background#7e57c2
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#d6deeb
breadcrumb.background#011627
breadcrumb.focusForeground#d6deeb
breadcrumb.foreground#637777
button.background#7e57c2cc
button.foreground#ffffffcc
button.hoverBackground#7e57c2
button.secondaryBackground#021320
button.secondaryForeground#d6deeb
button.secondaryHoverBackground#011627
checkbox.background#021320
checkbox.border#5f7e97
commandCenter.background#021320
commandCenter.border#5f7e97
commandCenter.foreground#637777
debugIcon.continueForeground#22da6e
debugIcon.disconnectForeground#EF5350
debugIcon.pauseForeground#82AAFF
debugIcon.restartForeground#22da6e
debugIcon.startForeground#22da6e
debugIcon.stepIntoForeground#82AAFF
debugIcon.stepOutForeground#82AAFF
debugIcon.stepOverForeground#82AAFF
debugIcon.stopForeground#EF5350
debugToolBar.background#021320
descriptionForeground#637777
diffEditor.diagonalFill#63777726
diffEditor.insertedLineBackground#9CCC6518
diffEditor.insertedTextBackground#9CCC6530
diffEditor.removedLineBackground#EF535018
diffEditor.removedTextBackground#EF535030
disabledForeground#d6deeb66
dropdown.background#021320
dropdown.border#5f7e97
dropdown.foreground#d6deeb
editor.background#011627
editor.findMatchBackground#c5e47866
editor.findMatchHighlightBackground#c5e47835
editor.findRangeHighlightBackground#7e57c218
editor.foreground#d6deeb
editor.hoverHighlightBackground#7e57c218
editor.inactiveSelectionBackground#7e57c233
editor.lineHighlightBackground#011627
editor.selectionBackground#1d3b53
editor.selectionHighlightBackground#7e57c233
editor.wordHighlightBackground#82AAFF25
editor.wordHighlightStrongBackground#C792EA30
editorBracketHighlight.foreground1#EF5350
editorBracketHighlight.foreground2#c5e478
editorBracketHighlight.foreground3#22da6e
editorBracketHighlight.foreground4#82AAFF
editorBracketHighlight.foreground5#C792EA
editorBracketHighlight.foreground6#82AAFF
editorBracketMatch.background#7e57c222
editorBracketMatch.border#7e57c2
editorBracketPairGuide.activeBackground1#7e57c2a6
editorBracketPairGuide.activeBackground2#7e57c2a6
editorBracketPairGuide.activeBackground3#7e57c2a6
editorBracketPairGuide.activeBackground4#7e57c2a6
editorBracketPairGuide.activeBackground5#7e57c2a6
editorBracketPairGuide.activeBackground6#7e57c2a6
editorBracketPairGuide.background1#d6deeb24
editorBracketPairGuide.background2#d6deeb24
editorBracketPairGuide.background3#d6deeb24
editorBracketPairGuide.background4#d6deeb24
editorBracketPairGuide.background5#d6deeb24
editorBracketPairGuide.background6#d6deeb24
editorCursor.foreground#80a4c2
editorError.foreground#EF5350
editorGroup.border#5f7e97
editorGroupHeader.tabsBackground#011627
editorGroupHeader.tabsBorder#262A39
editorGutter.addedBackground#9CCC65
editorGutter.deletedBackground#EF5350
editorGutter.modifiedBackground#82AAFF
editorHint.foreground#22da6e
editorHoverWidget.background#021320
editorHoverWidget.border#5f7e97
editorIndentGuide.activeBackground1#7e57c2a6
editorIndentGuide.background1#d6deeb24
editorInfo.foreground#82AAFF
editorLineNumber.activeForeground#637777
editorLineNumber.foreground#4b6479
editorSuggestWidget.background#021320
editorSuggestWidget.border#5f7e97
editorSuggestWidget.selectedBackground#011627
editorWarning.foreground#c5e478
editorWhitespace.foreground#d6deeb24
editorWidget.background#021320
editorWidget.border#5f7e97
editorWidget.foreground#d6deeb
errorForeground#EF5350
focusBorder#122d42
foreground#d6deeb
gitDecoration.addedResourceForeground#9CCC65
gitDecoration.conflictingResourceForeground#c5e478
gitDecoration.deletedResourceForeground#EF535090
gitDecoration.ignoredResourceForeground#4b6479
gitDecoration.modifiedResourceForeground#a2bffc
gitDecoration.renamedResourceForeground#C792EA
gitDecoration.untrackedResourceForeground#c5e478ff
icon.foreground#637777
input.background#021320
input.border#5f7e97
input.foreground#d6deeb
input.placeholderForeground#4b6479
inputOption.activeBackground#7e57c255
inputOption.activeBorder#7e57c2
inputValidation.errorBackground#EF535022
inputValidation.errorBorder#EF5350
inputValidation.infoBackground#82AAFF22
inputValidation.infoBorder#82AAFF
inputValidation.warningBackground#c5e47822
inputValidation.warningBorder#c5e478
list.activeSelectionBackground#7e57c255
list.activeSelectionForeground#d6deeb
list.errorForeground#EF5350
list.focusBackground#7e57c244
list.highlightForeground#7e57c2
list.hoverBackground#011627
list.inactiveSelectionBackground#7e57c233
list.warningForeground#c5e478
menu.background#021320
menu.foreground#d6deeb
menu.selectionBackground#1d3b53
menu.separatorBackground#5f7e97
minimap.background#011627
minimap.findMatchHighlight#c5e47880
minimap.selectionHighlight#7e57c266
notificationCenter.border#5f7e97
notificationCenterHeader.background#021320
notifications.background#021320
notifications.border#5f7e97
notifications.foreground#d6deeb
panel.background#011627
panel.border#5f7e97
panelTitle.activeBorder#7e57c2
panelTitle.activeForeground#d6deeb
panelTitle.inactiveForeground#637777
peekView.border#7e57c2
peekViewEditor.background#011627
peekViewResult.background#011627
peekViewResult.selectionBackground#1d3b53
peekViewTitle.background#021320
pickerGroup.border#5f7e97
pickerGroup.foreground#7e57c2
progressBar.background#7e57c2
quickInput.background#021320
quickInput.foreground#d6deeb
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#d6deeb45
scrollbarSlider.background#d6deeb18
scrollbarSlider.hoverBackground#d6deeb2e
sideBar.background#011627
sideBar.border#011627
sideBar.foreground#89a4bb
sideBarSectionHeader.background#011627
sideBarSectionHeader.border#5f7e97
sideBarSectionHeader.foreground#5f7e97
sideBarTitle.foreground#5f7e97
statusBar.background#011627
statusBar.border#5f7e97
statusBar.debuggingBackground#EF5350
statusBar.debuggingForeground#111111
statusBar.foreground#637777
statusBar.noFolderBackground#011627
tab.activeBackground#011627
tab.activeBorder#011627
tab.activeBorderTop#7e57c2
tab.activeForeground#d6deeb
tab.border#5f7e97
tab.inactiveBackground#011627
tab.inactiveForeground#637777
terminal.ansiBlack#011627
terminal.ansiBlue#82AAFF
terminal.ansiBrightBlack#575656
terminal.ansiBrightBlue#82AAFF
terminal.ansiBrightCyan#7fdbca
terminal.ansiBrightGreen#22da6e
terminal.ansiBrightMagenta#C792EA
terminal.ansiBrightRed#EF5350
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffeb95
terminal.ansiCyan#21c7a8
terminal.ansiGreen#22da6e
terminal.ansiMagenta#C792EA
terminal.ansiRed#EF5350
terminal.ansiWhite#ffffff
terminal.ansiYellow#c5e478
terminal.background#011627
terminal.foreground#d6deeb
terminal.selectionBackground#1d3b53
terminalCursor.foreground#7e57c2
textBlockQuote.background#011627
textBlockQuote.border#7e57c2
textCodeBlock.background#021320
textLink.activeForeground#82AAFF
textLink.foreground#7e57c2
titleBar.activeBackground#011627
titleBar.activeForeground#d6deeb
titleBar.border#5f7e97
titleBar.inactiveBackground#011627
titleBar.inactiveForeground#4b6479
tree.inactiveIndentGuidesStroke#d6deeb24
tree.indentGuidesStroke#d6deeb52
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Nord

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#88c0d0
activityBar.background#2e3440
activityBar.border#3b4252
activityBar.foreground#d8dee9
activityBar.inactiveForeground#4c566a
activityBarBadge.background#88c0d0
activityBarBadge.foreground#2e3440
badge.background#88c0d0
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#d8dee9
breadcrumb.background#2e3440
breadcrumb.focusForeground#d8dee9
breadcrumb.foreground#737f97
button.background#88c0d0ee
button.foreground#2e3440
button.hoverBackground#88c0d0
button.secondaryBackground#2e3440
button.secondaryForeground#d8dee9
button.secondaryHoverBackground#3b4252
checkbox.background#2e3440
checkbox.border#3b4252
commandCenter.background#2e3440
commandCenter.border#3b4252
commandCenter.foreground#737f97
debugIcon.continueForeground#a3be8c
debugIcon.disconnectForeground#bf616a
debugIcon.pauseForeground#81a1c1
debugIcon.restartForeground#a3be8c
debugIcon.startForeground#a3be8c
debugIcon.stepIntoForeground#81a1c1
debugIcon.stepOutForeground#81a1c1
debugIcon.stepOverForeground#81a1c1
debugIcon.stopForeground#bf616a
debugToolBar.background#2e3440
descriptionForeground#d8dee9e6
diffEditor.diagonalFill#737f9726
diffEditor.insertedLineBackground#a3be8c18
diffEditor.insertedTextBackground#a3be8c30
diffEditor.removedLineBackground#bf616a18
diffEditor.removedTextBackground#bf616a30
disabledForeground#d8dee966
dropdown.background#2e3440
dropdown.border#3b4252
dropdown.foreground#d8dee9
editor.background#2e3440
editor.findMatchBackground#D8DEE966
editor.findMatchHighlightBackground#D8DEE935
editor.findRangeHighlightBackground#88c0d018
editor.foreground#d8dee9
editor.hoverHighlightBackground#88c0d018
editor.inactiveSelectionBackground#88c0d033
editor.lineHighlightBackground#2e3440
editor.selectionBackground#434c5ecc
editor.selectionHighlightBackground#88c0d033
editor.wordHighlightBackground#81a1c125
editor.wordHighlightStrongBackground#b48ead30
editorBracketHighlight.foreground1#bf616a
editorBracketHighlight.foreground2#D8DEE9
editorBracketHighlight.foreground3#a3be8c
editorBracketHighlight.foreground4#81a1c1
editorBracketHighlight.foreground5#b48ead
editorBracketHighlight.foreground6#81a1c1
editorBracketMatch.background#88c0d022
editorBracketMatch.border#88c0d0
editorBracketPairGuide.activeBackground1#88c0d0a6
editorBracketPairGuide.activeBackground2#88c0d0a6
editorBracketPairGuide.activeBackground3#88c0d0a6
editorBracketPairGuide.activeBackground4#88c0d0a6
editorBracketPairGuide.activeBackground5#88c0d0a6
editorBracketPairGuide.activeBackground6#88c0d0a6
editorBracketPairGuide.background1#d8dee924
editorBracketPairGuide.background2#d8dee924
editorBracketPairGuide.background3#d8dee924
editorBracketPairGuide.background4#d8dee924
editorBracketPairGuide.background5#d8dee924
editorBracketPairGuide.background6#d8dee924
editorCursor.foreground#d8dee9
editorError.foreground#bf616a
editorGroup.border#3b4252
editorGroupHeader.tabsBackground#2e3440
editorGroupHeader.tabsBorder#3b425200
editorGutter.addedBackground#a3be8c
editorGutter.deletedBackground#bf616a
editorGutter.modifiedBackground#81a1c1
editorHint.foreground#a3be8c
editorHoverWidget.background#2e3440
editorHoverWidget.border#3b4252
editorIndentGuide.activeBackground1#88c0d0a6
editorIndentGuide.background1#d8dee924
editorInfo.foreground#81a1c1
editorLineNumber.activeForeground#737f97
editorLineNumber.foreground#4c566a
editorSuggestWidget.background#2e3440
editorSuggestWidget.border#3b4252
editorSuggestWidget.selectedBackground#3b4252
editorWarning.foreground#ebcb8b
editorWhitespace.foreground#d8dee924
editorWidget.background#2e3440
editorWidget.border#3b4252
editorWidget.foreground#d8dee9
errorForeground#bf616a
focusBorder#3b4252
foreground#d8dee9
gitDecoration.addedResourceForeground#a3be8c
gitDecoration.conflictingResourceForeground#D8DEE9
gitDecoration.deletedResourceForeground#bf616a
gitDecoration.ignoredResourceForeground#4c566a
gitDecoration.modifiedResourceForeground#ebcb8b
gitDecoration.renamedResourceForeground#b48ead
gitDecoration.untrackedResourceForeground#a3be8c
icon.foreground#737f97
input.background#2e3440
input.border#3b4252
input.foreground#d8dee9
input.placeholderForeground#4c566a
inputOption.activeBackground#88c0d055
inputOption.activeBorder#88c0d0
inputValidation.errorBackground#bf616a22
inputValidation.errorBorder#bf616a
inputValidation.infoBackground#81a1c122
inputValidation.infoBorder#81a1c1
inputValidation.warningBackground#ebcb8b22
inputValidation.warningBorder#ebcb8b
list.activeSelectionBackground#88c0d055
list.activeSelectionForeground#d8dee9
list.errorForeground#bf616a
list.focusBackground#88c0d044
list.highlightForeground#88c0d0
list.hoverBackground#3b4252
list.inactiveSelectionBackground#88c0d033
list.warningForeground#ebcb8b
menu.background#2e3440
menu.foreground#d8dee9
menu.selectionBackground#434c5ecc
menu.separatorBackground#3b4252
minimap.background#2e3440
minimap.findMatchHighlight#D8DEE980
minimap.selectionHighlight#88c0d066
notificationCenter.border#3b4252
notificationCenterHeader.background#2e3440
notifications.background#2e3440
notifications.border#3b4252
notifications.foreground#d8dee9
panel.background#2e3440
panel.border#3b4252
panelTitle.activeBorder#88c0d0
panelTitle.activeForeground#d8dee9
panelTitle.inactiveForeground#737f97
peekView.border#88c0d0
peekViewEditor.background#2e3440
peekViewResult.background#2e3440
peekViewResult.selectionBackground#434c5ecc
peekViewTitle.background#2e3440
pickerGroup.border#3b4252
pickerGroup.foreground#88c0d0
progressBar.background#88c0d0
quickInput.background#2e3440
quickInput.foreground#d8dee9
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#d8dee945
scrollbarSlider.background#d8dee918
scrollbarSlider.hoverBackground#d8dee92e
sideBar.background#2e3440
sideBar.border#3b4252
sideBar.foreground#d8dee9
sideBarSectionHeader.background#3b4252
sideBarSectionHeader.border#3b4252
sideBarSectionHeader.foreground#d8dee9
sideBarTitle.foreground#d8dee9
statusBar.background#2e3440
statusBar.border#3b4252
statusBar.debuggingBackground#bf616a
statusBar.debuggingForeground#111111
statusBar.foreground#737f97
statusBar.noFolderBackground#2e3440
tab.activeBackground#2e3440
tab.activeBorder#2e3440
tab.activeBorderTop#88c0d0
tab.activeForeground#d8dee9
tab.border#3b4252
tab.inactiveBackground#2e3440
tab.inactiveForeground#737f97
terminal.ansiBlack#3b4252
terminal.ansiBlue#81a1c1
terminal.ansiBrightBlack#4c566a
terminal.ansiBrightBlue#81a1c1
terminal.ansiBrightCyan#8fbcbb
terminal.ansiBrightGreen#a3be8c
terminal.ansiBrightMagenta#b48ead
terminal.ansiBrightRed#bf616a
terminal.ansiBrightWhite#eceff4
terminal.ansiBrightYellow#ebcb8b
terminal.ansiCyan#88c0d0
terminal.ansiGreen#a3be8c
terminal.ansiMagenta#b48ead
terminal.ansiRed#bf616a
terminal.ansiWhite#e5e9f0
terminal.ansiYellow#ebcb8b
terminal.background#2e3440
terminal.foreground#d8dee9
terminal.selectionBackground#434c5ecc
terminalCursor.foreground#88c0d0
textBlockQuote.background#2e3440
textBlockQuote.border#88c0d0
textCodeBlock.background#2e3440
textLink.activeForeground#88c0d0
textLink.foreground#88c0d0
titleBar.activeBackground#2e3440
titleBar.activeForeground#d8dee9
titleBar.border#3b4252
titleBar.inactiveBackground#2e3440
titleBar.inactiveForeground#4c566a
tree.inactiveIndentGuidesStroke#d8dee924
tree.indentGuidesStroke#d8dee952
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Notion 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#3183d8
activityBar.background#151515
activityBar.border#ffffff22
activityBar.foreground#d9d9d8
activityBar.inactiveForeground#6a9955
activityBarBadge.background#3183d8
activityBarBadge.foreground#ffffff
badge.background#3183d8
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#d9d9d8
breadcrumb.background#191919
breadcrumb.focusForeground#d9d9d8
breadcrumb.foreground#6a9955
button.background#3183d8
button.foreground#ffffff
button.hoverBackground#b5cea8
button.secondaryBackground#151515
button.secondaryForeground#d9d9d8
button.secondaryHoverBackground#151515
checkbox.background#151515
checkbox.border#ffffff22
commandCenter.background#151515
commandCenter.border#ffffff22
commandCenter.foreground#6a9955
debugIcon.continueForeground#ce9178
debugIcon.disconnectForeground#569cd6
debugIcon.pauseForeground#b5cea8
debugIcon.restartForeground#ce9178
debugIcon.startForeground#ce9178
debugIcon.stepIntoForeground#b5cea8
debugIcon.stepOutForeground#b5cea8
debugIcon.stepOverForeground#b5cea8
debugIcon.stopForeground#569cd6
debugToolBar.background#151515
descriptionForeground#6a9955
diffEditor.diagonalFill#6a995526
diffEditor.insertedLineBackground#ce917818
diffEditor.insertedTextBackground#ce917830
diffEditor.removedLineBackground#569cd618
diffEditor.removedTextBackground#569cd630
disabledForeground#d9d9d866
dropdown.background#151515
dropdown.border#ffffff22
dropdown.foreground#d9d9d8
editor.background#191919
editor.findMatchBackground#d9d9d866
editor.findMatchHighlightBackground#d9d9d835
editor.findRangeHighlightBackground#3183d818
editor.foreground#d9d9d8
editor.hoverHighlightBackground#3183d818
editor.inactiveSelectionBackground#3183d833
editor.lineHighlightBackground#151515
editor.selectionBackground#3183d844
editor.selectionHighlightBackground#3183d833
editor.wordHighlightBackground#b5cea825
editor.wordHighlightStrongBackground#dcdcaa30
editorBracketHighlight.foreground1#569cd6
editorBracketHighlight.foreground2#d9d9d8
editorBracketHighlight.foreground3#ce9178
editorBracketHighlight.foreground4#b5cea8
editorBracketHighlight.foreground5#dcdcaa
editorBracketHighlight.foreground6#b5cea8
editorBracketMatch.background#3183d822
editorBracketMatch.border#3183d8
editorBracketPairGuide.activeBackground1#3183d8a6
editorBracketPairGuide.activeBackground2#3183d8a6
editorBracketPairGuide.activeBackground3#3183d8a6
editorBracketPairGuide.activeBackground4#3183d8a6
editorBracketPairGuide.activeBackground5#3183d8a6
editorBracketPairGuide.activeBackground6#3183d8a6
editorBracketPairGuide.background1#d9d9d824
editorBracketPairGuide.background2#d9d9d824
editorBracketPairGuide.background3#d9d9d824
editorBracketPairGuide.background4#d9d9d824
editorBracketPairGuide.background5#d9d9d824
editorBracketPairGuide.background6#d9d9d824
editorCursor.foreground#3183d8
editorError.foreground#569cd6
editorGroup.border#ffffff22
editorGroupHeader.tabsBackground#151515
editorGroupHeader.tabsBorder#ffffff22
editorGutter.addedBackground#ce9178
editorGutter.deletedBackground#569cd6
editorGutter.modifiedBackground#b5cea8
editorHint.foreground#ce9178
editorHoverWidget.background#151515
editorHoverWidget.border#ffffff22
editorIndentGuide.activeBackground1#3183d8a6
editorIndentGuide.background1#d9d9d824
editorInfo.foreground#b5cea8
editorLineNumber.activeForeground#6a9955
editorLineNumber.foreground#6a9955
editorSuggestWidget.background#151515
editorSuggestWidget.border#ffffff22
editorSuggestWidget.selectedBackground#151515
editorWarning.foreground#ce9178
editorWhitespace.foreground#d9d9d824
editorWidget.background#151515
editorWidget.border#ffffff22
editorWidget.foreground#d9d9d8
errorForeground#569cd6
focusBorder#3183d8
foreground#d9d9d8
gitDecoration.addedResourceForeground#ce9178
gitDecoration.conflictingResourceForeground#d9d9d8
gitDecoration.deletedResourceForeground#569cd6
gitDecoration.ignoredResourceForeground#6a9955
gitDecoration.modifiedResourceForeground#b5cea8
gitDecoration.renamedResourceForeground#dcdcaa
gitDecoration.untrackedResourceForeground#ce9178
icon.foreground#6a9955
input.background#151515
input.border#ffffff22
input.foreground#d9d9d8
input.placeholderForeground#6a9955
inputOption.activeBackground#3183d855
inputOption.activeBorder#3183d8
inputValidation.errorBackground#569cd622
inputValidation.errorBorder#569cd6
inputValidation.infoBackground#b5cea822
inputValidation.infoBorder#b5cea8
inputValidation.warningBackground#ce917822
inputValidation.warningBorder#ce9178
list.activeSelectionBackground#3183d855
list.activeSelectionForeground#d9d9d8
list.errorForeground#569cd6
list.focusBackground#3183d844
list.highlightForeground#3183d8
list.hoverBackground#151515
list.inactiveSelectionBackground#3183d833
list.warningForeground#ce9178
menu.background#151515
menu.foreground#d9d9d8
menu.selectionBackground#3183d844
menu.separatorBackground#ffffff22
minimap.background#191919
minimap.findMatchHighlight#d9d9d880
minimap.selectionHighlight#3183d866
notificationCenter.border#ffffff22
notificationCenterHeader.background#151515
notifications.background#151515
notifications.border#ffffff22
notifications.foreground#d9d9d8
panel.background#151515
panel.border#ffffff22
panelTitle.activeBorder#3183d8
panelTitle.activeForeground#d9d9d8
panelTitle.inactiveForeground#6a9955
peekView.border#3183d8
peekViewEditor.background#191919
peekViewResult.background#151515
peekViewResult.selectionBackground#3183d844
peekViewTitle.background#151515
pickerGroup.border#ffffff22
pickerGroup.foreground#3183d8
progressBar.background#3183d8
quickInput.background#151515
quickInput.foreground#d9d9d8
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#d9d9d845
scrollbarSlider.background#d9d9d818
scrollbarSlider.hoverBackground#d9d9d82e
sideBar.background#151515
sideBar.border#ffffff22
sideBar.foreground#d9d9d8
sideBarSectionHeader.background#151515
sideBarSectionHeader.border#ffffff22
sideBarSectionHeader.foreground#d9d9d8
sideBarTitle.foreground#f7f7f5
statusBar.background#151515
statusBar.border#ffffff22
statusBar.debuggingBackground#569cd6
statusBar.debuggingForeground#111111
statusBar.foreground#6a9955
statusBar.noFolderBackground#151515
tab.activeBackground#191919
tab.activeBorder#191919
tab.activeBorderTop#3183d8
tab.activeForeground#d9d9d8
tab.border#ffffff22
tab.inactiveBackground#151515
tab.inactiveForeground#6a9955
terminal.ansiBlack#111111
terminal.ansiBlue#b5cea8
terminal.ansiBrightBlack#6a9955
terminal.ansiBrightBlue#b5cea8
terminal.ansiBrightCyan#b5cea8
terminal.ansiBrightGreen#ce9178
terminal.ansiBrightMagenta#dcdcaa
terminal.ansiBrightRed#569cd6
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#d9d9d8
terminal.ansiCyan#b5cea8
terminal.ansiGreen#ce9178
terminal.ansiMagenta#dcdcaa
terminal.ansiRed#569cd6
terminal.ansiWhite#d6d6d6
terminal.ansiYellow#ce9178
terminal.background#191919
terminal.foreground#d9d9d8
terminal.selectionBackground#3183d844
terminalCursor.foreground#3183d8
textBlockQuote.background#151515
textBlockQuote.border#3183d8
textCodeBlock.background#151515
textLink.activeForeground#b5cea8
textLink.foreground#3183d8
titleBar.activeBackground#151515
titleBar.activeForeground#d9d9d8
titleBar.border#ffffff22
titleBar.inactiveBackground#151515
titleBar.inactiveForeground#6a9955
tree.inactiveIndentGuidesStroke#d9d9d824
tree.indentGuidesStroke#d9d9d852
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Notion 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#3183d8
activityBar.background#f7f6f3
activityBar.border#00000022
activityBar.foreground#37352f
activityBar.inactiveForeground#008000
activityBarBadge.background#3183d8
activityBarBadge.foreground#ffffff
badge.background#3183d8
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#37352f
breadcrumb.background#ffffff
breadcrumb.focusForeground#37352f
breadcrumb.foreground#008000
button.background#3183d8
button.foreground#ffffff
button.hoverBackground#098658
button.secondaryBackground#f7f6f3
button.secondaryForeground#37352f
button.secondaryHoverBackground#f7f6f3
checkbox.background#f7f6f3
checkbox.border#00000022
commandCenter.background#f7f6f3
commandCenter.border#00000022
commandCenter.foreground#008000
debugIcon.continueForeground#a31515
debugIcon.disconnectForeground#0000ff
debugIcon.pauseForeground#098658
debugIcon.restartForeground#a31515
debugIcon.startForeground#a31515
debugIcon.stepIntoForeground#098658
debugIcon.stepOutForeground#098658
debugIcon.stepOverForeground#098658
debugIcon.stopForeground#0000ff
debugToolBar.background#f7f6f3
descriptionForeground#008000
diffEditor.diagonalFill#00800026
diffEditor.insertedLineBackground#a3151512
diffEditor.insertedTextBackground#a3151520
diffEditor.removedLineBackground#0000ff12
diffEditor.removedTextBackground#0000ff20
disabledForeground#37352f66
dropdown.background#f7f6f3
dropdown.border#00000022
dropdown.foreground#37352f
editor.background#ffffff
editor.findMatchBackground#37352f4d
editor.findMatchHighlightBackground#37352f26
editor.findRangeHighlightBackground#3183d818
editor.foreground#37352f
editor.hoverHighlightBackground#3183d818
editor.inactiveSelectionBackground#3183d81f
editor.lineHighlightBackground#f7f6f3
editor.selectionBackground#3183d844
editor.selectionHighlightBackground#3183d81f
editor.wordHighlightBackground#09865818
editor.wordHighlightStrongBackground#795e261f
editorBracketHighlight.foreground1#0000ff
editorBracketHighlight.foreground2#37352f
editorBracketHighlight.foreground3#a31515
editorBracketHighlight.foreground4#098658
editorBracketHighlight.foreground5#795e26
editorBracketHighlight.foreground6#098658
editorBracketMatch.background#3183d822
editorBracketMatch.border#3183d8
editorBracketPairGuide.activeBackground1#3183d88c
editorBracketPairGuide.activeBackground2#3183d88c
editorBracketPairGuide.activeBackground3#3183d88c
editorBracketPairGuide.activeBackground4#3183d88c
editorBracketPairGuide.activeBackground5#3183d88c
editorBracketPairGuide.activeBackground6#3183d88c
editorBracketPairGuide.background1#37352f18
editorBracketPairGuide.background2#37352f18
editorBracketPairGuide.background3#37352f18
editorBracketPairGuide.background4#37352f18
editorBracketPairGuide.background5#37352f18
editorBracketPairGuide.background6#37352f18
editorCursor.foreground#3183d8
editorError.foreground#0000ff
editorGroup.border#00000022
editorGroupHeader.tabsBackground#f7f6f3
editorGroupHeader.tabsBorder#00000022
editorGutter.addedBackground#a31515
editorGutter.deletedBackground#0000ff
editorGutter.modifiedBackground#098658
editorHint.foreground#a31515
editorHoverWidget.background#f7f6f3
editorHoverWidget.border#00000022
editorIndentGuide.activeBackground1#3183d88c
editorIndentGuide.background1#37352f18
editorInfo.foreground#098658
editorLineNumber.activeForeground#008000
editorLineNumber.foreground#008000
editorSuggestWidget.background#f7f6f3
editorSuggestWidget.border#00000022
editorSuggestWidget.selectedBackground#f7f6f3
editorWarning.foreground#a31515
editorWhitespace.foreground#37352f18
editorWidget.background#f7f6f3
editorWidget.border#00000022
editorWidget.foreground#37352f
errorForeground#0000ff
focusBorder#3183d8
foreground#37352f
gitDecoration.addedResourceForeground#a31515
gitDecoration.conflictingResourceForeground#37352f
gitDecoration.deletedResourceForeground#0000ff
gitDecoration.ignoredResourceForeground#008000
gitDecoration.modifiedResourceForeground#098658
gitDecoration.renamedResourceForeground#795e26
gitDecoration.untrackedResourceForeground#a31515
icon.foreground#008000
input.background#f7f6f3
input.border#00000022
input.foreground#37352f
input.placeholderForeground#008000
inputOption.activeBackground#3183d822
inputOption.activeBorder#3183d8
inputValidation.errorBackground#0000ff12
inputValidation.errorBorder#0000ff
inputValidation.infoBackground#09865812
inputValidation.infoBorder#098658
inputValidation.warningBackground#a3151512
inputValidation.warningBorder#a31515
list.activeSelectionBackground#3183d822
list.activeSelectionForeground#37352f
list.errorForeground#0000ff
list.focusBackground#3183d81f
list.highlightForeground#3183d8
list.hoverBackground#f7f6f3
list.inactiveSelectionBackground#3183d814
list.warningForeground#a31515
menu.background#f7f6f3
menu.foreground#37352f
menu.selectionBackground#3183d844
menu.separatorBackground#00000022
minimap.background#ffffff
minimap.findMatchHighlight#37352f80
minimap.selectionHighlight#3183d866
notificationCenter.border#00000022
notificationCenterHeader.background#f7f6f3
notifications.background#f7f6f3
notifications.border#00000022
notifications.foreground#37352f
panel.background#f7f6f3
panel.border#00000022
panelTitle.activeBorder#3183d8
panelTitle.activeForeground#37352f
panelTitle.inactiveForeground#008000
peekView.border#3183d8
peekViewEditor.background#ffffff
peekViewResult.background#f7f6f3
peekViewResult.selectionBackground#3183d844
peekViewTitle.background#f7f6f3
pickerGroup.border#00000022
pickerGroup.foreground#3183d8
progressBar.background#3183d8
quickInput.background#f7f6f3
quickInput.foreground#37352f
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#37352f45
scrollbarSlider.background#37352f18
scrollbarSlider.hoverBackground#37352f2e
sideBar.background#f7f6f3
sideBar.border#00000022
sideBar.foreground#4f4b45
sideBarSectionHeader.background#f7f6f3
sideBarSectionHeader.border#00000022
sideBarSectionHeader.foreground#37352f
sideBarTitle.foreground#37352f
statusBar.background#f7f6f3
statusBar.border#00000022
statusBar.debuggingBackground#0000ff
statusBar.debuggingForeground#ffffff
statusBar.foreground#008000
statusBar.noFolderBackground#f7f6f3
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#3183d8
tab.activeForeground#37352f
tab.border#00000022
tab.inactiveBackground#f7f6f3
tab.inactiveForeground#008000
terminal.ansiBlack#0d0d0d
terminal.ansiBlue#098658
terminal.ansiBrightBlack#008000
terminal.ansiBrightBlue#098658
terminal.ansiBrightCyan#098658
terminal.ansiBrightGreen#a31515
terminal.ansiBrightMagenta#795e26
terminal.ansiBrightRed#0000ff
terminal.ansiBrightWhite#fcfcfc
terminal.ansiBrightYellow#37352f
terminal.ansiCyan#098658
terminal.ansiGreen#a31515
terminal.ansiMagenta#795e26
terminal.ansiRed#0000ff
terminal.ansiWhite#d9d9d9
terminal.ansiYellow#a31515
terminal.background#ffffff
terminal.foreground#37352f
terminal.selectionBackground#3183d844
terminalCursor.foreground#3183d8
textBlockQuote.background#f7f6f3
textBlockQuote.border#3183d8
textCodeBlock.background#f7f6f3
textLink.activeForeground#098658
textLink.foreground#3183d8
titleBar.activeBackground#f7f6f3
titleBar.activeForeground#37352f
titleBar.border#00000022
titleBar.inactiveBackground#f7f6f3
titleBar.inactiveForeground#008000
tree.inactiveIndentGuidesStroke#37352f18
tree.indentGuidesStroke#37352f3d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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