Circadia Color Theme

Name: Circadia Color Theme
Author: Tanmay Gandhi

Publisher: Tanmay GandhiThemes in package: 4

Perceptually uniform, circadian-aligned design tokens engineered in OKLCH (Warm Parchment, Warm Ember & Espresso, Plum Noir, Obsidian Pine)

Open in VS Code GitHub

Color themes

VS Code preview

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

Circadia Color Theme — Circadia — Obsidian Pine (Dark Focus)

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#83b384
activityBar.activeFocusBorder#83b384
activityBar.background#1a1e1b
activityBar.border#353c36
activityBar.foreground#c4ccc5
activityBar.inactiveForeground#838d85
activityBarBadge.background#83b384
activityBarBadge.foreground#131714
badge.background#242a25
badge.foreground#c4ccc5
breadcrumb.activeSelectionForeground#83b384
breadcrumb.background#131714
breadcrumb.focusForeground#c4ccc5
breadcrumb.foreground#9fa9a1
breadcrumbPicker.background#1a1e1b
button.background#83b384
button.foreground#131714
button.hoverBackground#83b384dd
button.secondaryBackground#242a25
button.secondaryForeground#c4ccc5
button.secondaryHoverBackground#1a1e1b
chat.editedFileForeground#d19b66
chat.slashCommandBackground#83b38433
chat.slashCommandForeground#83b384
checkbox.background#242a25
checkbox.border#353c36
checkbox.foreground#c4ccc5
descriptionForeground#9fa9a1
dropdown.background#242a25
dropdown.border#353c36
dropdown.foreground#c4ccc5
dropdown.listBackground#1a1e1b
editor.background#131714
editor.findMatchBackground#83b38466
editor.findMatchHighlightBackground#83b38433
editor.foreground#c4ccc5
editor.lineHighlightBackground#242a2533
editor.lineHighlightBorder#00000000
editor.selectionBackground#83b38440
editor.selectionHighlightBackground#83b38426
editor.wordHighlightBackground#83b38430
editor.wordHighlightStrongBackground#83b38444
editorBracketMatch.background#00000000
editorBracketMatch.border#83b384
editorCursor.foreground#83b384
editorGroup.border#353c36
editorGroupHeader.noTabsBackground#131714
editorGroupHeader.tabsBackground#1a1e1b
editorGroupHeader.tabsBorder#353c36
editorGutter.addedBackground#92b87e
editorGutter.deletedBackground#e06c75
editorGutter.modifiedBackground#d19b66
editorIndentGuide.activeBackground#838d85
editorIndentGuide.background#353c36
editorLineNumber.activeForeground#83b384
editorLineNumber.foreground#838d85
editorOverviewRuler.border#353c36
editorSuggestWidget.background#1a1e1b
editorSuggestWidget.border#353c36
editorSuggestWidget.foreground#c4ccc5
editorSuggestWidget.highlightForeground#83b384
editorSuggestWidget.selectedBackground#83b38438
editorWidget.background#1a1e1b
editorWidget.border#353c36
errorForeground#e06c75
focusBorder#83b384
foreground#c4ccc5
gitDecoration.conflictingResourceForeground#e06c75
gitDecoration.deletedResourceForeground#e06c75
gitDecoration.ignoredResourceForeground#838d85
gitDecoration.modifiedResourceForeground#d19b66
gitDecoration.stageDeletedResourceForeground#e06c75
gitDecoration.stageModifiedResourceForeground#d19b66
gitDecoration.untrackedResourceForeground#92b87e
icon.foreground#9fa9a1
input.background#242a25
input.border#353c36
input.foreground#c4ccc5
input.placeholderForeground#838d85
input.selectionBackground#83b38448
inputOption.activeBackground#83b38444
inputOption.activeBorder#83b384
inputOption.activeForeground#c4ccc5
keybindingLabel.foreground#c4ccc5
list.activeSelectionBackground#83b38438
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#83b384
list.deemphasizedForeground#838d85
list.dropBackground#83b38433
list.focusBackground#83b38438
list.focusForeground#ffffff
list.focusHighlightForeground#83b384
list.focusOutline#83b384
list.highlightForeground#83b384
list.hoverBackground#353c36aa
list.hoverForeground#ffffff
list.inactiveFocusBackground#353c36
list.inactiveSelectionBackground#353c36
list.inactiveSelectionForeground#ffffff
menu.background#1a1e1b
menu.foreground#c4ccc5
menu.selectionBackground#83b38438
menu.selectionForeground#ffffff
menu.separatorBackground#353c36
modernActivityBar.activeBackground#242a2599
modernActivityBar.hoverBackground#242a2544
notificationCenterHeader.background#1a1e1b
notificationCenterHeader.foreground#c4ccc5
notifications.background#1a1e1b
notifications.border#353c36
notifications.foreground#c4ccc5
panel.background#1a1e1b
panel.border#353c36
panelInput.border#353c36
panelSectionHeader.background#1a1e1b
panelSectionHeader.border#353c36
panelSectionHeader.foreground#c4ccc5
panelTitle.activeBorder#83b384
panelTitle.activeForeground#c4ccc5
panelTitle.inactiveForeground#9fa9a1
peekView.border#83b384
peekViewEditor.background#131714
peekViewEditor.matchHighlightBackground#83b38444
peekViewResult.background#1a1e1b
peekViewResult.matchHighlightBackground#83b38444
peekViewResult.selectionBackground#83b38438
peekViewTitle.background#1a1e1b
pickerGroup.border#353c36
pickerGroup.foreground#83b384
progressBar.background#83b384
quickInput.background#1a1e1b
quickInput.foreground#c4ccc5
quickInputList.focusBackground#83b38438
quickInputList.focusForeground#ffffff
scrollbarSlider.activeBackground#83b38466
scrollbarSlider.background#838d8533
scrollbarSlider.hoverBackground#838d8555
selection.background#83b38448
settings.dropdownBackground#242a25
settings.dropdownBorder#353c36
settings.headerForeground#c4ccc5
settings.modifiedItemIndicator#83b384
sideBar.background#1a1e1b
sideBar.border#353c36
sideBar.foreground#9fa9a1
sideBarSectionHeader.background#1a1e1b
sideBarSectionHeader.border#353c36
sideBarSectionHeader.foreground#c4ccc5
sideBarTitle.foreground#c4ccc5
statusBar.background#1a1e1b
statusBar.border#353c36
statusBar.debuggingBackground#83b384
statusBar.debuggingForeground#131714
statusBar.foreground#9fa9a1
statusBar.noFolderBackground#1a1e1b
statusBarItem.focusBorder#83b384
statusBarItem.hoverBackground#242a2599
statusBarItem.hoverForeground#c4ccc5
statusBarItem.remoteBackground#83b384
statusBarItem.remoteForeground#131714
tab.activeBackground#131714
tab.activeBorder#00000000
tab.activeBorderTop#83b384
tab.activeForeground#ffffff
tab.border#353c36
tab.hoverBackground#131714ee
tab.hoverForeground#ffffff
tab.inactiveBackground#1a1e1b
tab.inactiveForeground#838d85
tab.selectedBorderTop#83b384
tab.unfocusedActiveBackground#131714
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#83b384b3
tab.unfocusedActiveForeground#ffffff
tab.unfocusedHoverBackground#13171480
tab.unfocusedInactiveForeground#838d85
terminal.foreground#c4ccc5
terminal.selectionBackground#83b38448
terminal.tab.activeBorder#83b384
textBlockQuote.background#1a1e1b
textBlockQuote.border#353c36
textCodeBlock.background#1a1e1b
textLink.activeForeground#83b384
textLink.foreground#83b384
textPreformat.background#242a25
textPreformat.foreground#c4ccc5
textSeparator.foreground#353c36
titleBar.activeBackground#1a1e1b
titleBar.activeForeground#c4ccc5
titleBar.border#353c36
titleBar.inactiveBackground#131714
titleBar.inactiveForeground#9fa9a1
tree.indentGuidesStroke#353c36
tree.tableColumnsBorder#353c36
welcomePage.progress.foreground#83b384
welcomePage.tileBackground#1a1e1b
widget.border#353c36

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#909890	italic
keyword, keyword.control, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.declaration	#6cb0c5	bold
entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type	#d1aa73	—
entity.name.function, support.function	#b29ace	—
variable.other.property, entity.name.variable.property, variable.other.object.property, meta.object-literal.key, support.type.property-name, entity.name.tag.yaml	#d092a9	—
variable, variable.other, variable.parameter	#c4ccc5	—
string, string.quoted	#92b87e	—
constant.numeric, constant.language	#d19b66	—
entity.name.tag	#6cb0c5	—
markup.heading.1	#b8e2c4	bold
markup.heading.2	#9ecfae	bold
markup.heading.3	#83bc97	bold
markup.heading.4	#69a881	—
markup.heading.5	#569970	—
markup.heading.6	#45875e	—

VS Code preview

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

Circadia Color Theme — Circadia — Plum Noir (Dark Modern)

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#cf8aa4
activityBar.activeFocusBorder#cf8aa4
activityBar.background#1b1419
activityBar.border#3d3039
activityBar.foreground#d8c8d2
activityBar.inactiveForeground#9a8b96
activityBarBadge.background#cf8aa4
activityBarBadge.foreground#140e12
badge.background#261e23
badge.foreground#d8c8d2
breadcrumb.activeSelectionForeground#cf8aa4
breadcrumb.background#140e12
breadcrumb.focusForeground#d8c8d2
breadcrumb.foreground#b4a3af
breadcrumbPicker.background#1b1419
button.background#cf8aa4
button.foreground#140e12
button.hoverBackground#cf8aa4dd
button.secondaryBackground#261e23
button.secondaryForeground#d8c8d2
button.secondaryHoverBackground#1b1419
chat.editedFileForeground#d49969
chat.slashCommandBackground#cf8aa433
chat.slashCommandForeground#cf8aa4
checkbox.background#261e23
checkbox.border#3d3039
checkbox.foreground#d8c8d2
descriptionForeground#b4a3af
dropdown.background#261e23
dropdown.border#3d3039
dropdown.foreground#d8c8d2
dropdown.listBackground#1b1419
editor.background#140e12
editor.findMatchBackground#cf8aa466
editor.findMatchHighlightBackground#cf8aa433
editor.foreground#d8c8d2
editor.lineHighlightBackground#261e2333
editor.lineHighlightBorder#00000000
editor.selectionBackground#cf8aa440
editor.selectionHighlightBackground#cf8aa426
editor.wordHighlightBackground#cf8aa430
editor.wordHighlightStrongBackground#cf8aa444
editorBracketMatch.background#00000000
editorBracketMatch.border#cf8aa4
editorCursor.foreground#cf8aa4
editorGroup.border#3d3039
editorGroupHeader.noTabsBackground#140e12
editorGroupHeader.tabsBackground#1b1419
editorGroupHeader.tabsBorder#3d3039
editorGutter.addedBackground#96b77b
editorGutter.deletedBackground#e06c75
editorGutter.modifiedBackground#d49969
editorIndentGuide.activeBackground#9a8b96
editorIndentGuide.background#3d3039
editorLineNumber.activeForeground#cf8aa4
editorLineNumber.foreground#9a8b96
editorOverviewRuler.border#3d3039
editorSuggestWidget.background#1b1419
editorSuggestWidget.border#3d3039
editorSuggestWidget.foreground#d8c8d2
editorSuggestWidget.highlightForeground#cf8aa4
editorSuggestWidget.selectedBackground#cf8aa438
editorWidget.background#1b1419
editorWidget.border#3d3039
errorForeground#e06c75
focusBorder#cf8aa4
foreground#d8c8d2
gitDecoration.conflictingResourceForeground#e06c75
gitDecoration.deletedResourceForeground#e06c75
gitDecoration.ignoredResourceForeground#9a8b96
gitDecoration.modifiedResourceForeground#d49969
gitDecoration.stageDeletedResourceForeground#e06c75
gitDecoration.stageModifiedResourceForeground#d49969
gitDecoration.untrackedResourceForeground#96b77b
icon.foreground#b4a3af
input.background#261e23
input.border#3d3039
input.foreground#d8c8d2
input.placeholderForeground#9a8b96
input.selectionBackground#cf8aa448
inputOption.activeBackground#cf8aa444
inputOption.activeBorder#cf8aa4
inputOption.activeForeground#d8c8d2
keybindingLabel.foreground#d8c8d2
list.activeSelectionBackground#cf8aa438
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#cf8aa4
list.deemphasizedForeground#9a8b96
list.dropBackground#cf8aa433
list.focusBackground#cf8aa438
list.focusForeground#ffffff
list.focusHighlightForeground#cf8aa4
list.focusOutline#cf8aa4
list.highlightForeground#cf8aa4
list.hoverBackground#3d3039aa
list.hoverForeground#ffffff
list.inactiveFocusBackground#3d3039
list.inactiveSelectionBackground#3d3039
list.inactiveSelectionForeground#ffffff
menu.background#1b1419
menu.foreground#d8c8d2
menu.selectionBackground#cf8aa438
menu.selectionForeground#ffffff
menu.separatorBackground#3d3039
modernActivityBar.activeBackground#261e2399
modernActivityBar.hoverBackground#261e2344
notificationCenterHeader.background#1b1419
notificationCenterHeader.foreground#d8c8d2
notifications.background#1b1419
notifications.border#3d3039
notifications.foreground#d8c8d2
panel.background#1b1419
panel.border#3d3039
panelInput.border#3d3039
panelSectionHeader.background#1b1419
panelSectionHeader.border#3d3039
panelSectionHeader.foreground#d8c8d2
panelTitle.activeBorder#cf8aa4
panelTitle.activeForeground#d8c8d2
panelTitle.inactiveForeground#b4a3af
peekView.border#cf8aa4
peekViewEditor.background#140e12
peekViewEditor.matchHighlightBackground#cf8aa444
peekViewResult.background#1b1419
peekViewResult.matchHighlightBackground#cf8aa444
peekViewResult.selectionBackground#cf8aa438
peekViewTitle.background#1b1419
pickerGroup.border#3d3039
pickerGroup.foreground#cf8aa4
progressBar.background#cf8aa4
quickInput.background#1b1419
quickInput.foreground#d8c8d2
quickInputList.focusBackground#cf8aa438
quickInputList.focusForeground#ffffff
scrollbarSlider.activeBackground#cf8aa466
scrollbarSlider.background#9a8b9633
scrollbarSlider.hoverBackground#9a8b9655
selection.background#cf8aa448
settings.dropdownBackground#261e23
settings.dropdownBorder#3d3039
settings.headerForeground#d8c8d2
settings.modifiedItemIndicator#cf8aa4
sideBar.background#1b1419
sideBar.border#3d3039
sideBar.foreground#b4a3af
sideBarSectionHeader.background#1b1419
sideBarSectionHeader.border#3d3039
sideBarSectionHeader.foreground#d8c8d2
sideBarTitle.foreground#d8c8d2
statusBar.background#1b1419
statusBar.border#3d3039
statusBar.debuggingBackground#cf8aa4
statusBar.debuggingForeground#140e12
statusBar.foreground#b4a3af
statusBar.noFolderBackground#1b1419
statusBarItem.focusBorder#cf8aa4
statusBarItem.hoverBackground#261e2399
statusBarItem.hoverForeground#d8c8d2
statusBarItem.remoteBackground#cf8aa4
statusBarItem.remoteForeground#140e12
tab.activeBackground#140e12
tab.activeBorder#00000000
tab.activeBorderTop#cf8aa4
tab.activeForeground#ffffff
tab.border#3d3039
tab.hoverBackground#140e12ee
tab.hoverForeground#ffffff
tab.inactiveBackground#1b1419
tab.inactiveForeground#9a8b96
tab.selectedBorderTop#cf8aa4
tab.unfocusedActiveBackground#140e12
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#cf8aa4b3
tab.unfocusedActiveForeground#ffffff
tab.unfocusedHoverBackground#140e1280
tab.unfocusedInactiveForeground#9a8b96
terminal.foreground#d8c8d2
terminal.selectionBackground#cf8aa448
terminal.tab.activeBorder#cf8aa4
textBlockQuote.background#1b1419
textBlockQuote.border#3d3039
textCodeBlock.background#1b1419
textLink.activeForeground#cf8aa4
textLink.foreground#cf8aa4
textPreformat.background#261e23
textPreformat.foreground#d8c8d2
textSeparator.foreground#3d3039
titleBar.activeBackground#1b1419
titleBar.activeForeground#d8c8d2
titleBar.border#3d3039
titleBar.inactiveBackground#140e12
titleBar.inactiveForeground#b4a3af
tree.indentGuidesStroke#3d3039
tree.tableColumnsBorder#3d3039
welcomePage.progress.foreground#cf8aa4
welcomePage.tileBackground#1b1419
widget.border#3d3039

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a5999f	italic
keyword, keyword.control, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.declaration	#75acd2	bold
entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type	#daa97a	—
entity.name.function, support.function	#b695cf	—
variable.other.property, entity.name.variable.property, variable.other.object.property, meta.object-literal.key, support.type.property-name, entity.name.tag.yaml	#d38da4	—
variable, variable.other, variable.parameter	#d8c8d2	—
string, string.quoted	#96b77b	—
constant.numeric, constant.language	#d49969	—
entity.name.tag	#75acd2	—
markup.heading.1	#fabcd8	bold
markup.heading.2	#e8a8c5	bold
markup.heading.3	#d793b3	bold
markup.heading.4	#c381a0	—
markup.heading.5	#ad718d	—
markup.heading.6	#9b647e	—

VS Code preview

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

Circadia Color Theme — Circadia — Warm Ember & Espresso (Dark Classic)

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#e89a49
activityBar.activeFocusBorder#e89a49
activityBar.background#1e1a15
activityBar.border#3b342b
activityBar.foreground#c9c0b1
activityBar.inactiveForeground#91887d
activityBarBadge.background#e89a49
activityBarBadge.foreground#17130f
badge.background#29241e
badge.foreground#c9c0b1
breadcrumb.activeSelectionForeground#e89a49
breadcrumb.background#17130f
breadcrumb.focusForeground#c9c0b1
breadcrumb.foreground#aba195
breadcrumbPicker.background#1e1a15
button.background#e89a49
button.foreground#17130f
button.hoverBackground#e89a49dd
button.secondaryBackground#29241e
button.secondaryForeground#c9c0b1
button.secondaryHoverBackground#1e1a15
chat.editedFileForeground#d99148
chat.slashCommandBackground#e89a4933
chat.slashCommandForeground#e89a49
checkbox.background#29241e
checkbox.border#3b342b
checkbox.foreground#c9c0b1
descriptionForeground#aba195
dropdown.background#29241e
dropdown.border#3b342b
dropdown.foreground#c9c0b1
dropdown.listBackground#1e1a15
editor.background#17130f
editor.findMatchBackground#e89a4966
editor.findMatchHighlightBackground#e89a4933
editor.foreground#c9c0b1
editor.lineHighlightBackground#29241e33
editor.lineHighlightBorder#00000000
editor.selectionBackground#e89a4940
editor.selectionHighlightBackground#e89a4926
editor.wordHighlightBackground#e89a4930
editor.wordHighlightStrongBackground#e89a4944
editorBracketMatch.background#00000000
editorBracketMatch.border#e89a49
editorCursor.foreground#e89a49
editorGroup.border#3b342b
editorGroupHeader.noTabsBackground#17130f
editorGroupHeader.tabsBackground#1e1a15
editorGroupHeader.tabsBorder#3b342b
editorGutter.addedBackground#8cbb62
editorGutter.deletedBackground#e06c75
editorGutter.modifiedBackground#d99148
editorIndentGuide.activeBackground#91887d
editorIndentGuide.background#3b342b
editorLineNumber.activeForeground#e89a49
editorLineNumber.foreground#91887d
editorOverviewRuler.border#3b342b
editorSuggestWidget.background#1e1a15
editorSuggestWidget.border#3b342b
editorSuggestWidget.foreground#c9c0b1
editorSuggestWidget.highlightForeground#e89a49
editorSuggestWidget.selectedBackground#e89a4938
editorWidget.background#1e1a15
editorWidget.border#3b342b
errorForeground#e06c75
focusBorder#e89a49
foreground#c9c0b1
gitDecoration.conflictingResourceForeground#e06c75
gitDecoration.deletedResourceForeground#e06c75
gitDecoration.ignoredResourceForeground#91887d
gitDecoration.modifiedResourceForeground#d99148
gitDecoration.stageDeletedResourceForeground#e06c75
gitDecoration.stageModifiedResourceForeground#d99148
gitDecoration.untrackedResourceForeground#8cbb62
icon.foreground#aba195
input.background#29241e
input.border#3b342b
input.foreground#c9c0b1
input.placeholderForeground#91887d
input.selectionBackground#e89a4948
inputOption.activeBackground#e89a4944
inputOption.activeBorder#e89a49
inputOption.activeForeground#c9c0b1
keybindingLabel.foreground#c9c0b1
list.activeSelectionBackground#e89a4938
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#e89a49
list.deemphasizedForeground#91887d
list.dropBackground#e89a4933
list.focusBackground#e89a4938
list.focusForeground#ffffff
list.focusHighlightForeground#e89a49
list.focusOutline#e89a49
list.highlightForeground#e89a49
list.hoverBackground#3b342baa
list.hoverForeground#ffffff
list.inactiveFocusBackground#3b342b
list.inactiveSelectionBackground#3b342b
list.inactiveSelectionForeground#ffffff
menu.background#1e1a15
menu.foreground#c9c0b1
menu.selectionBackground#e89a4938
menu.selectionForeground#ffffff
menu.separatorBackground#3b342b
modernActivityBar.activeBackground#29241e99
modernActivityBar.hoverBackground#29241e44
notificationCenterHeader.background#1e1a15
notificationCenterHeader.foreground#c9c0b1
notifications.background#1e1a15
notifications.border#3b342b
notifications.foreground#c9c0b1
panel.background#1e1a15
panel.border#3b342b
panelInput.border#3b342b
panelSectionHeader.background#1e1a15
panelSectionHeader.border#3b342b
panelSectionHeader.foreground#c9c0b1
panelTitle.activeBorder#e89a49
panelTitle.activeForeground#c9c0b1
panelTitle.inactiveForeground#aba195
peekView.border#e89a49
peekViewEditor.background#17130f
peekViewEditor.matchHighlightBackground#e89a4944
peekViewResult.background#1e1a15
peekViewResult.matchHighlightBackground#e89a4944
peekViewResult.selectionBackground#e89a4938
peekViewTitle.background#1e1a15
pickerGroup.border#3b342b
pickerGroup.foreground#e89a49
progressBar.background#e89a49
quickInput.background#1e1a15
quickInput.foreground#c9c0b1
quickInputList.focusBackground#e89a4938
quickInputList.focusForeground#ffffff
scrollbarSlider.activeBackground#e89a4966
scrollbarSlider.background#91887d33
scrollbarSlider.hoverBackground#91887d55
selection.background#e89a4948
settings.dropdownBackground#29241e
settings.dropdownBorder#3b342b
settings.headerForeground#c9c0b1
settings.modifiedItemIndicator#e89a49
sideBar.background#1e1a15
sideBar.border#3b342b
sideBar.foreground#aba195
sideBarSectionHeader.background#1e1a15
sideBarSectionHeader.border#3b342b
sideBarSectionHeader.foreground#c9c0b1
sideBarTitle.foreground#c9c0b1
statusBar.background#1e1a15
statusBar.border#3b342b
statusBar.debuggingBackground#e89a49
statusBar.debuggingForeground#17130f
statusBar.foreground#aba195
statusBar.noFolderBackground#1e1a15
statusBarItem.focusBorder#e89a49
statusBarItem.hoverBackground#29241e99
statusBarItem.hoverForeground#c9c0b1
statusBarItem.remoteBackground#e89a49
statusBarItem.remoteForeground#17130f
tab.activeBackground#17130f
tab.activeBorder#00000000
tab.activeBorderTop#e89a49
tab.activeForeground#ffffff
tab.border#3b342b
tab.hoverBackground#17130fee
tab.hoverForeground#ffffff
tab.inactiveBackground#1e1a15
tab.inactiveForeground#91887d
tab.selectedBorderTop#e89a49
tab.unfocusedActiveBackground#17130f
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#e89a49b3
tab.unfocusedActiveForeground#ffffff
tab.unfocusedHoverBackground#17130f80
tab.unfocusedInactiveForeground#91887d
terminal.foreground#c9c0b1
terminal.selectionBackground#e89a4948
terminal.tab.activeBorder#e89a49
textBlockQuote.background#1e1a15
textBlockQuote.border#3b342b
textCodeBlock.background#1e1a15
textLink.activeForeground#e89a49
textLink.foreground#e89a49
textPreformat.background#29241e
textPreformat.foreground#c9c0b1
textSeparator.foreground#3b342b
titleBar.activeBackground#1e1a15
titleBar.activeForeground#c9c0b1
titleBar.border#3b342b
titleBar.inactiveBackground#17130f
titleBar.inactiveForeground#aba195
tree.indentGuidesStroke#3b342b
tree.tableColumnsBorder#3b342b
welcomePage.progress.foreground#e89a49
welcomePage.tileBackground#1e1a15
widget.border#3b342b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a69c91	italic
keyword, keyword.control, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.declaration	#66abc6	bold
entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type	#d9a86e	—
entity.name.function, support.function	#b991db	—
variable.other.property, entity.name.variable.property, variable.other.object.property, meta.object-literal.key, support.type.property-name, entity.name.tag.yaml	#de88a6	—
variable, variable.other, variable.parameter	#c9c0b1	—
string, string.quoted	#8cbb62	—
constant.numeric, constant.language	#d99148	—
entity.name.tag	#66abc6	—
markup.heading.1	#f8c88f	bold
markup.heading.2	#f2b26c	bold
markup.heading.3	#ea9d49	bold
markup.heading.4	#db8935	—
markup.heading.5	#c7792e	—
markup.heading.6	#b56f2b	—

VS Code preview

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

Circadia Color Theme — Circadia — Warm Parchment (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#0048b3
activityBar.activeFocusBorder#0048b3
activityBar.background#eee7d6
activityBar.border#d7cdb7
activityBar.foreground#28323a
activityBar.inactiveForeground#43505c
activityBarBadge.background#0048b3
activityBarBadge.foreground#ffffff
badge.background#e5dcc6
badge.foreground#28323a
breadcrumb.activeSelectionForeground#0048b3
breadcrumb.background#f7f2e6
breadcrumb.focusForeground#28323a
breadcrumb.foreground#46535f
breadcrumbPicker.background#eee7d6
button.background#0048b3
button.foreground#ffffff
button.hoverBackground#0048b3dd
button.secondaryBackground#e5dcc6
button.secondaryForeground#28323a
button.secondaryHoverBackground#eee7d6
chat.editedFileForeground#095b62
chat.slashCommandBackground#0048b333
chat.slashCommandForeground#0048b3
checkbox.background#e5dcc6
checkbox.border#d7cdb7
checkbox.foreground#28323a
descriptionForeground#46535f
dropdown.background#e5dcc6
dropdown.border#d7cdb7
dropdown.foreground#28323a
dropdown.listBackground#eee7d6
editor.background#f7f2e6
editor.findMatchBackground#0048b366
editor.findMatchHighlightBackground#0048b333
editor.foreground#28323a
editor.lineHighlightBackground#e5dcc633
editor.lineHighlightBorder#00000000
editor.selectionBackground#0048b330
editor.selectionHighlightBackground#0048b31e
editor.wordHighlightBackground#0048b322
editor.wordHighlightStrongBackground#0048b333
editorBracketMatch.background#00000000
editorBracketMatch.border#0048b3
editorCursor.foreground#0048b3
editorGroup.border#d7cdb7
editorGroupHeader.noTabsBackground#f7f2e6
editorGroupHeader.tabsBackground#eee7d6
editorGroupHeader.tabsBorder#d7cdb7
editorGutter.addedBackground#005f2f
editorGutter.deletedBackground#dc2626
editorGutter.modifiedBackground#095b62
editorIndentGuide.activeBackground#43505c
editorIndentGuide.background#d7cdb7
editorLineNumber.activeForeground#0048b3
editorLineNumber.foreground#43505c
editorOverviewRuler.border#d7cdb7
editorSuggestWidget.background#eee7d6
editorSuggestWidget.border#d7cdb7
editorSuggestWidget.foreground#28323a
editorSuggestWidget.highlightForeground#0048b3
editorSuggestWidget.selectedBackground#0048b322
editorWidget.background#eee7d6
editorWidget.border#d7cdb7
errorForeground#dc2626
focusBorder#0048b3
foreground#28323a
gitDecoration.conflictingResourceForeground#dc2626
gitDecoration.deletedResourceForeground#dc2626
gitDecoration.ignoredResourceForeground#43505c
gitDecoration.modifiedResourceForeground#095b62
gitDecoration.stageDeletedResourceForeground#dc2626
gitDecoration.stageModifiedResourceForeground#095b62
gitDecoration.untrackedResourceForeground#005f2f
icon.foreground#46535f
input.background#e5dcc6
input.border#d7cdb7
input.foreground#28323a
input.placeholderForeground#43505c
input.selectionBackground#0048b338
inputOption.activeBackground#0048b344
inputOption.activeBorder#0048b3
inputOption.activeForeground#28323a
keybindingLabel.foreground#28323a
list.activeSelectionBackground#0048b322
list.activeSelectionForeground#28323a
list.activeSelectionIconForeground#0048b3
list.deemphasizedForeground#43505c
list.dropBackground#0048b333
list.focusBackground#0048b322
list.focusForeground#28323a
list.focusHighlightForeground#0048b3
list.focusOutline#0048b3
list.highlightForeground#0048b3
list.hoverBackground#e5dcc699
list.hoverForeground#28323a
list.inactiveFocusBackground#e5dcc6
list.inactiveSelectionBackground#e5dcc6
list.inactiveSelectionForeground#28323a
menu.background#eee7d6
menu.foreground#28323a
menu.selectionBackground#0048b322
menu.selectionForeground#28323a
menu.separatorBackground#d7cdb7
modernActivityBar.activeBackground#e5dcc699
modernActivityBar.hoverBackground#e5dcc644
notificationCenterHeader.background#eee7d6
notificationCenterHeader.foreground#28323a
notifications.background#eee7d6
notifications.border#d7cdb7
notifications.foreground#28323a
panel.background#eee7d6
panel.border#d7cdb7
panelInput.border#d7cdb7
panelSectionHeader.background#eee7d6
panelSectionHeader.border#d7cdb7
panelSectionHeader.foreground#28323a
panelTitle.activeBorder#0048b3
panelTitle.activeForeground#28323a
panelTitle.inactiveForeground#46535f
peekView.border#0048b3
peekViewEditor.background#f7f2e6
peekViewEditor.matchHighlightBackground#0048b344
peekViewResult.background#eee7d6
peekViewResult.matchHighlightBackground#0048b344
peekViewResult.selectionBackground#0048b322
peekViewTitle.background#eee7d6
pickerGroup.border#d7cdb7
pickerGroup.foreground#0048b3
progressBar.background#0048b3
quickInput.background#eee7d6
quickInput.foreground#28323a
quickInputList.focusBackground#0048b322
quickInputList.focusForeground#28323a
scrollbarSlider.activeBackground#0048b355
scrollbarSlider.background#43505c22
scrollbarSlider.hoverBackground#43505c44
selection.background#0048b338
settings.dropdownBackground#e5dcc6
settings.dropdownBorder#d7cdb7
settings.headerForeground#28323a
settings.modifiedItemIndicator#0048b3
sideBar.background#eee7d6
sideBar.border#d7cdb7
sideBar.foreground#46535f
sideBarSectionHeader.background#eee7d6
sideBarSectionHeader.border#d7cdb7
sideBarSectionHeader.foreground#28323a
sideBarTitle.foreground#28323a
statusBar.background#eee7d6
statusBar.border#d7cdb7
statusBar.debuggingBackground#0048b3
statusBar.debuggingForeground#ffffff
statusBar.foreground#46535f
statusBar.noFolderBackground#eee7d6
statusBarItem.focusBorder#0048b3
statusBarItem.hoverBackground#e5dcc699
statusBarItem.hoverForeground#28323a
statusBarItem.remoteBackground#0048b3
statusBarItem.remoteForeground#ffffff
tab.activeBackground#f7f2e6
tab.activeBorder#00000000
tab.activeBorderTop#0048b3
tab.activeForeground#28323a
tab.border#d7cdb7
tab.hoverBackground#e5dcc680
tab.hoverForeground#28323a
tab.inactiveBackground#eee7d6
tab.inactiveForeground#43505c
tab.selectedBorderTop#0048b3
tab.unfocusedActiveBackground#f7f2e6
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#0048b3b3
tab.unfocusedActiveForeground#28323a
tab.unfocusedHoverBackground#f7f2e680
tab.unfocusedInactiveForeground#43505c
terminal.foreground#28323a
terminal.selectionBackground#0048b338
terminal.tab.activeBorder#0048b3
textBlockQuote.background#eee7d6
textBlockQuote.border#d7cdb7
textCodeBlock.background#eee7d6
textLink.activeForeground#0048b3
textLink.foreground#0048b3
textPreformat.background#e5dcc6
textPreformat.foreground#28323a
textSeparator.foreground#d7cdb7
titleBar.activeBackground#eee7d6
titleBar.activeForeground#28323a
titleBar.border#d7cdb7
titleBar.inactiveBackground#f7f2e6
titleBar.inactiveForeground#46535f
tree.indentGuidesStroke#d7cdb7
tree.tableColumnsBorder#d7cdb7
welcomePage.progress.foreground#0048b3
welcomePage.tileBackground#eee7d6
widget.border#d7cdb7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#524b42	italic
keyword, keyword.control, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.declaration	#0048b3	bold
entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type	#843900	—
entity.name.function, support.function	#7a1f7a	—
variable.other.property, entity.name.variable.property, variable.other.object.property, meta.object-literal.key, support.type.property-name, entity.name.tag.yaml	#4b1fa3	—
variable, variable.other, variable.parameter	#364450	—
string, string.quoted	#005f2f	—
constant.numeric, constant.language	#095b62	—
entity.name.tag	#0048b3	—
markup.heading.1	#1c4470	bold
markup.heading.2	#20538a	bold
markup.heading.3	#1c60a2	bold
markup.heading.4	#236bb5	—
markup.heading.5	#286fc0	—
markup.heading.6	#2f75c6	—