Clay Terminal

Name: Clay Terminal
Author: astechlabs

Publisher: astechlabsThemes in package: 4

A warm dark/light VS Code theme with a coral terminal-inspired accent.

Open in VS Code GitHub

Color themes

VS Code preview

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

Clay Terminal — Clay Terminal

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.background#0d0d0d
activityBar.border#20201f
activityBar.foreground#d97757
activityBar.inactiveForeground#5c5a52
activityBarBadge.background#d97757
activityBarBadge.foreground#1a1a19
badge.background#d97757
badge.foreground#1a1a19
button.background#d97757
button.foreground#1a1a19
button.hoverBackground#c6613f
debugIcon.breakpointDisabledForeground#5c5a52
debugIcon.breakpointForeground#d03b3b
debugIcon.continueForeground#6da7ec
debugIcon.pauseForeground#db9300
debugIcon.restartForeground#6da7ec
debugIcon.startForeground#0ca30c
debugIcon.stepIntoForeground#6da7ec
debugIcon.stepOutForeground#6da7ec
debugIcon.stepOverForeground#6da7ec
debugIcon.stopForeground#d03b3b
descriptionForeground#898781
diffEditor.border#20201f
diffEditor.diagonalFill#38383588
diffEditor.insertedLineBackground#0ca30c1a
diffEditor.insertedTextBackground#0ca30c22
diffEditor.removedLineBackground#d03b3b1a
diffEditor.removedTextBackground#d03b3b22
dropdown.background#161615
dropdown.border#383835
editor.background#1a1a19
editor.findMatchBackground#d9775755
editor.findMatchHighlightBackground#d9775733
editor.foreground#e4e3dd
editor.lineHighlightBackground#26261f
editor.selectionBackground#d9775733
editor.selectionHighlightBackground#d9775722
editor.wordHighlightBackground#d9775722
editorBracketHighlight.foreground1#d97757
editorBracketHighlight.foreground2#bcd1ca
editorBracketHighlight.foreground3#827dbd
editorBracketHighlight.foreground4#629987
editorBracketHighlight.foreground5#cbcadb
editorBracketHighlight.foreground6#ebc9b7
editorBracketHighlight.unexpectedBracket.foreground#d03b3b
editorBracketMatch.background#d9775733
editorBracketMatch.border#d97757
editorCursor.foreground#d97757
editorError.foreground#d03b3b
editorGroup.border#20201f
editorGroupHeader.tabsBackground#0d0d0d
editorGroupHeader.tabsBorder#20201f
editorGutter.addedBackground#0ca30c
editorGutter.deletedBackground#d03b3b
editorGutter.errorBackground#d03b3b
editorGutter.modifiedBackground#db9300
editorGutter.warningBackground#db9300
editorHint.foreground#629987
editorIndentGuide.activeBackground1#4a4840
editorIndentGuide.background1#2e2d27
editorInfo.foreground#6da7ec
editorLineNumber.activeForeground#d97757
editorLineNumber.foreground#5c5a52
editorOverviewRuler.errorForeground#d03b3b
editorOverviewRuler.warningForeground#db9300
editorRuler.foreground#2e2d27
editorUnnecessaryCode.opacity#000000aa
editorWarning.foreground#db9300
editorWhitespace.foreground#3a382f
focusBorder#d9775766
foreground#e4e3dd
gitDecoration.addedResourceForeground#0ca30c
gitDecoration.deletedResourceForeground#d03b3b
gitDecoration.ignoredResourceForeground#5c5a52
gitDecoration.modifiedResourceForeground#db9300
gitDecoration.untrackedResourceForeground#629987
input.background#161615
input.border#383835
input.foreground#e4e3dd
input.placeholderForeground#7b7974
inputOption.activeBorder#d97757
list.activeSelectionBackground#26261f
list.activeSelectionForeground#e4e3dd
list.focusBackground#26261f
list.hoverBackground#161615
list.inactiveSelectionBackground#1a1a19
merge.border#383835
merge.commonContentBackground#89878114
merge.commonHeaderBackground#89878133
merge.currentContentBackground#0ca30c14
merge.currentHeaderBackground#0ca30c33
merge.incomingContentBackground#6da7ec14
merge.incomingHeaderBackground#6da7ec33
minimap.background#0d0d0d
minimap.errorHighlight#d03b3b
minimap.findMatchHighlight#d97757aa
minimap.selectionHighlight#d9775766
minimap.warningHighlight#db9300
minimapGutter.addedBackground#0ca30c
minimapGutter.deletedBackground#d03b3b
minimapGutter.modifiedBackground#db9300
minimapSlider.activeBackground#d97757aa
minimapSlider.background#38383588
minimapSlider.hoverBackground#454442aa
notificationCenter.border#383835
notificationCenterHeader.background#0d0d0d
notifications.background#161615
notifications.border#383835
notificationsErrorIcon.foreground#d03b3b
notificationsInfoIcon.foreground#6da7ec
notificationsWarningIcon.foreground#db9300
notificationToast.border#383835
panel.background#0d0d0d
panel.border#20201f
panelTitle.activeBorder#d97757
panelTitle.activeForeground#e4e3dd
panelTitle.inactiveForeground#7b7974
peekView.border#d97757
peekViewEditor.background#161615
peekViewEditor.matchHighlightBackground#d9775755
peekViewEditorGutter.background#161615
peekViewResult.background#0d0d0d
peekViewResult.matchHighlightBackground#d9775733
peekViewResult.selectionBackground#26261f
peekViewResult.selectionForeground#e4e3dd
peekViewTitle.background#0d0d0d
peekViewTitleDescription.foreground#898781
peekViewTitleLabel.foreground#e4e3dd
problemsErrorIcon.foreground#d03b3b
problemsInfoIcon.foreground#6da7ec
problemsWarningIcon.foreground#db9300
progressBar.background#d97757
scrollbarSlider.activeBackground#d97757aa
scrollbarSlider.background#38383588
scrollbarSlider.hoverBackground#454442aa
sideBar.background#0d0d0d
sideBar.border#20201f
sideBar.foreground#c3c2b7
sideBarSectionHeader.background#1a1a19
sideBarTitle.foreground#e4e3dd
statusBar.background#0d0d0d
statusBar.border#20201f
statusBar.debuggingBackground#d97757
statusBar.debuggingForeground#1a1a19
statusBar.foreground#898781
statusBar.noFolderBackground#0d0d0d
tab.activeBackground#1a1a19
tab.activeBorderTop#d97757
tab.activeForeground#e4e3dd
tab.border#20201f
tab.inactiveBackground#0d0d0d
tab.inactiveForeground#7b7974
terminal.ansiBlack#1a1a19
terminal.ansiBlue#6da7ec
terminal.ansiBrightBlack#898781
terminal.ansiBrightBlue#2a78d6
terminal.ansiBrightCyan#bcd1ca
terminal.ansiBrightGreen#5cc95c
terminal.ansiBrightMagenta#cbcadb
terminal.ansiBrightRed#ec7e7e
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fab219
terminal.ansiCyan#629987
terminal.ansiGreen#0ca30c
terminal.ansiMagenta#a096eb
terminal.ansiRed#d03b3b
terminal.ansiWhite#e4e3dd
terminal.ansiYellow#db9300
terminal.background#1a1a19
terminal.foreground#e4e3dd
terminalCursor.foreground#d97757
testing.iconErrored#ec7e7e
testing.iconFailed#d03b3b
testing.iconPassed#0ca30c
testing.iconQueued#5c5a52
testing.iconSkipped#898781
testing.iconUnset#5c5a52
testing.runAction#d97757
titleBar.activeBackground#0d0d0d
titleBar.activeForeground#e4e3dd
titleBar.border#20201f
titleBar.inactiveBackground#0d0d0d
titleBar.inactiveForeground#5c5a52
widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#e4e3dd	—
comment, punctuation.definition.comment	#7b7974	italic
string, string.quoted, string.template	#9dbb7d	—
string.regexp	#db9300	—
constant.character.escape	#cbcadb	—
punctuation.definition.template-expression	#629987	—
constant.numeric, constant.language, constant.character, support.constant	#ebc9b7	—
keyword, storage.type, storage.modifier, keyword.control	#d97757	—
keyword.operator	#898781	—
variable.language	#c6613f	italic
entity.name.function, support.function, meta.function-call	#e0b473	—
entity.name.class, entity.name.type, support.class, support.type, entity.name.namespace, entity.other.inherited-class	#bcd1ca	—
entity.name.function.decorator, meta.decorator, punctuation.decorator	#827dbd	—
variable, variable.other	#e4e3dd	—
variable.parameter	#c3c2b7	—
variable.other.property, meta.object-literal.key, support.type.property-name	#cbcadb	—
entity.other.attribute-name	#cbcadb	—
entity.name.tag	#d97757	—
punctuation, meta.brace	#898781	—
invalid	#ec7e7e	—
markup.bold	—	bold
markup.italic	—	italic
markup.heading	#d97757	bold
markup.quote	#898781	italic
markup.underline.link	#629987	—
markup.inserted, diff.inserted	#0ca30c	—
markup.deleted, diff.deleted	#d03b3b	—
markup.changed, diff.changed	#db9300	—

VS Code preview

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

Clay Terminal — Clay Terminal High Contrast

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.background#000000
activityBar.border#f0b48c
activityBar.foreground#d97757
activityBar.inactiveForeground#e4e3dd
activityBarBadge.background#d97757
activityBarBadge.foreground#000000
badge.background#d97757
badge.foreground#000000
button.background#d97757
button.border#f0b48c
button.foreground#000000
button.hoverBackground#f0b48c
contrastActiveBorder#d97757
contrastBorder#f0b48c
debugIcon.breakpointDisabledForeground#c3c2b7
debugIcon.breakpointForeground#ec7e7e
debugIcon.continueForeground#6da7ec
debugIcon.pauseForeground#fab219
debugIcon.restartForeground#6da7ec
debugIcon.startForeground#5cc95c
debugIcon.stepIntoForeground#6da7ec
debugIcon.stepOutForeground#6da7ec
debugIcon.stepOverForeground#6da7ec
debugIcon.stopForeground#ec7e7e
descriptionForeground#e4e3dd
diffEditor.border#f0b48c
diffEditor.insertedTextBackground#5cc95c33
diffEditor.removedTextBackground#ec7e7e33
dropdown.background#000000
dropdown.border#f0b48c
editor.background#000000
editor.findMatchBackground#d97757aa
editor.findMatchHighlightBackground#d9775766
editor.foreground#ffffff
editor.lineHighlightBorder#f0b48c
editor.selectionBackground#d9775766
editor.selectionHighlightBackground#d9775744
editor.wordHighlightBackground#d9775744
editorBracketHighlight.foreground1#d97757
editorBracketHighlight.foreground2#bcd1ca
editorBracketHighlight.foreground3#cbcadb
editorBracketHighlight.foreground4#5cc95c
editorBracketHighlight.foreground5#f0b48c
editorBracketHighlight.foreground6#ebc9b7
editorBracketHighlight.unexpectedBracket.foreground#ec7e7e
editorBracketMatch.background#d9775744
editorBracketMatch.border#d97757
editorCursor.foreground#d97757
editorError.foreground#ec7e7e
editorGroup.border#f0b48c
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#f0b48c
editorGutter.addedBackground#5cc95c
editorGutter.deletedBackground#ec7e7e
editorGutter.errorBackground#ec7e7e
editorGutter.modifiedBackground#fab219
editorGutter.warningBackground#fab219
editorHint.foreground#bcd1ca
editorIndentGuide.activeBackground1#f0b48c
editorIndentGuide.background1#4a4840
editorInfo.foreground#6da7ec
editorLineNumber.activeForeground#d97757
editorLineNumber.foreground#c3c2b7
editorOverviewRuler.errorForeground#ec7e7e
editorOverviewRuler.warningForeground#fab219
editorRuler.foreground#4a4840
editorUnnecessaryCode.border#c3c2b7
editorWarning.foreground#fab219
editorWhitespace.foreground#5c5a52
focusBorder#d97757
foreground#ffffff
gitDecoration.addedResourceForeground#5cc95c
gitDecoration.deletedResourceForeground#ec7e7e
gitDecoration.ignoredResourceForeground#c3c2b7
gitDecoration.modifiedResourceForeground#fab219
gitDecoration.untrackedResourceForeground#bcd1ca
input.background#000000
input.border#f0b48c
input.foreground#ffffff
input.placeholderForeground#c3c2b7
inputOption.activeBorder#d97757
list.activeSelectionBackground#d9775733
list.activeSelectionForeground#ffffff
list.focusBackground#d9775733
list.focusOutline#d97757
list.hoverBackground#d9775722
list.inactiveSelectionBackground#00000000
notificationCenter.border#f0b48c
notificationCenterHeader.background#000000
notifications.background#000000
notifications.border#f0b48c
notificationsErrorIcon.foreground#ec7e7e
notificationsInfoIcon.foreground#6da7ec
notificationsWarningIcon.foreground#fab219
notificationToast.border#f0b48c
panel.background#000000
panel.border#f0b48c
panelTitle.activeBorder#d97757
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#e4e3dd
peekView.border#d97757
peekViewEditor.background#000000
peekViewEditor.matchHighlightBackground#d9775766
peekViewEditorGutter.background#000000
peekViewResult.background#000000
peekViewResult.matchHighlightBackground#d9775744
peekViewResult.selectionBackground#d9775733
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#000000
peekViewTitleDescription.foreground#e4e3dd
peekViewTitleLabel.foreground#ffffff
problemsErrorIcon.foreground#ec7e7e
problemsInfoIcon.foreground#6da7ec
problemsWarningIcon.foreground#fab219
progressBar.background#d97757
scrollbarSlider.activeBackground#d97757
scrollbarSlider.background#f0b48c55
scrollbarSlider.hoverBackground#f0b48c88
sideBar.background#000000
sideBar.border#f0b48c
sideBar.foreground#ffffff
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#f0b48c
sideBarTitle.foreground#ffffff
statusBar.background#000000
statusBar.border#f0b48c
statusBar.debuggingBackground#d97757
statusBar.debuggingForeground#000000
statusBar.foreground#ffffff
statusBar.noFolderBackground#000000
tab.activeBackground#000000
tab.activeBorder#d97757
tab.activeBorderTop#d97757
tab.activeForeground#ffffff
tab.border#f0b48c
tab.inactiveBackground#000000
tab.inactiveForeground#e4e3dd
tab.unfocusedActiveBorder#f0b48c
terminal.ansiBlack#000000
terminal.ansiBlue#6da7ec
terminal.ansiBrightBlack#c3c2b7
terminal.ansiBrightBlue#6da7ec
terminal.ansiBrightCyan#bcd1ca
terminal.ansiBrightGreen#5cc95c
terminal.ansiBrightMagenta#cbcadb
terminal.ansiBrightRed#ec7e7e
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fab219
terminal.ansiCyan#bcd1ca
terminal.ansiGreen#5cc95c
terminal.ansiMagenta#a096eb
terminal.ansiRed#ec7e7e
terminal.ansiWhite#ffffff
terminal.ansiYellow#fab219
terminal.background#000000
terminal.foreground#ffffff
terminalCursor.foreground#d97757
testing.iconErrored#f0b48c
testing.iconFailed#ec7e7e
testing.iconPassed#5cc95c
testing.iconQueued#c3c2b7
testing.iconSkipped#e4e3dd
testing.iconUnset#c3c2b7
testing.runAction#d97757
titleBar.activeBackground#000000
titleBar.activeForeground#ffffff
titleBar.border#f0b48c
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#e4e3dd
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#ffffff	—
comment, punctuation.definition.comment	#c3c2b7	italic
string, string.quoted, string.template	#a8d98a	—
string.regexp	#fab219	—
constant.character.escape	#cbcadb	—
constant.numeric, constant.language, constant.character, support.constant	#ebc9b7	—
keyword, storage.type, storage.modifier, keyword.control	#f0a878	—
keyword.operator	#e4e3dd	—
variable.language	#f0b48c	italic
entity.name.function, support.function, meta.function-call	#f0cf99	—
entity.name.class, entity.name.type, support.class, support.type, entity.name.namespace, entity.other.inherited-class	#bcd1ca	—
entity.name.function.decorator, meta.decorator, punctuation.decorator	#c3befa	—
variable, variable.other	#ffffff	—
variable.parameter	#e4e3dd	—
variable.other.property, meta.object-literal.key, support.type.property-name	#cbcadb	—
entity.other.attribute-name	#cbcadb	—
entity.name.tag	#f0a878	—
punctuation, meta.brace	#e4e3dd	—
invalid	#ec7e7e	—
markup.bold	—	bold
markup.italic	—	italic
markup.heading	#f0a878	bold
markup.quote	#e4e3dd	italic
markup.underline.link	#bcd1ca	—
markup.inserted, diff.inserted	#5cc95c	—
markup.deleted, diff.deleted	#ec7e7e	—
markup.changed, diff.changed	#fab219	—

VS Code preview

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

Clay Terminal — Clay Terminal 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.background#f9f9f7
activityBar.border#e1e0d9
activityBar.foreground#c6613f
activityBar.inactiveForeground#a5a49a
activityBarBadge.background#c6613f
activityBarBadge.foreground#fcfcfb
badge.background#c6613f
badge.foreground#fcfcfb
button.background#c6613f
button.foreground#fcfcfb
button.hoverBackground#a94f31
debugIcon.breakpointDisabledForeground#a5a49a
debugIcon.breakpointForeground#b93535
debugIcon.continueForeground#184f95
debugIcon.pauseForeground#92400e
debugIcon.restartForeground#184f95
debugIcon.startForeground#1a8633
debugIcon.stepIntoForeground#184f95
debugIcon.stepOutForeground#184f95
debugIcon.stepOverForeground#184f95
debugIcon.stopForeground#b93535
descriptionForeground#52514e
diffEditor.border#e1e0d9
diffEditor.diagonalFill#c3c2b788
diffEditor.insertedLineBackground#1a863314
diffEditor.insertedTextBackground#1a863322
diffEditor.removedLineBackground#b9353514
diffEditor.removedTextBackground#b9353522
dropdown.background#ffffff
dropdown.border#c3c2b7
editor.background#fcfcfb
editor.findMatchBackground#d9775755
editor.findMatchHighlightBackground#d9775733
editor.foreground#0b0b0b
editor.lineHighlightBackground#f0efec
editor.selectionBackground#d9775733
editor.selectionHighlightBackground#d9775722
editor.wordHighlightBackground#d9775722
editorBracketHighlight.foreground1#c6613f
editorBracketHighlight.foreground2#3f7562
editorBracketHighlight.foreground3#615ba0
editorBracketHighlight.foreground4#52514e
editorBracketHighlight.foreground5#5b5a8a
editorBracketHighlight.foreground6#9a6a44
editorBracketHighlight.unexpectedBracket.foreground#b93535
editorBracketMatch.background#d9775733
editorBracketMatch.border#c6613f
editorCursor.foreground#c6613f
editorError.foreground#b93535
editorGroup.border#e1e0d9
editorGroupHeader.tabsBackground#f9f9f7
editorGroupHeader.tabsBorder#e1e0d9
editorGutter.addedBackground#1a8633
editorGutter.deletedBackground#b93535
editorGutter.errorBackground#b93535
editorGutter.modifiedBackground#92400e
editorGutter.warningBackground#92400e
editorHint.foreground#3f7562
editorIndentGuide.activeBackground1#c3c2b7
editorIndentGuide.background1#e1e0d9
editorInfo.foreground#184f95
editorLineNumber.activeForeground#c6613f
editorLineNumber.foreground#a5a49a
editorOverviewRuler.errorForeground#b93535
editorOverviewRuler.warningForeground#92400e
editorRuler.foreground#e1e0d9
editorUnnecessaryCode.opacity#000000aa
editorWarning.foreground#92400e
editorWhitespace.foreground#d2d1c7
focusBorder#d9775766
foreground#0b0b0b
gitDecoration.addedResourceForeground#1a8633
gitDecoration.deletedResourceForeground#b93535
gitDecoration.ignoredResourceForeground#a5a49a
gitDecoration.modifiedResourceForeground#92400e
gitDecoration.untrackedResourceForeground#3f7562
input.background#ffffff
input.border#c3c2b7
input.foreground#0b0b0b
input.placeholderForeground#a5a49a
inputOption.activeBorder#c6613f
list.activeSelectionBackground#f0efec
list.activeSelectionForeground#0b0b0b
list.focusBackground#f0efec
list.hoverBackground#f3f3f0
list.inactiveSelectionBackground#f6f6f4
merge.border#c3c2b7
merge.commonContentBackground#52514e14
merge.commonHeaderBackground#52514e33
merge.currentContentBackground#1a863314
merge.currentHeaderBackground#1a863333
merge.incomingContentBackground#184f9514
merge.incomingHeaderBackground#184f9533
minimap.background#f9f9f7
minimap.errorHighlight#b93535
minimap.findMatchHighlight#d97757aa
minimap.selectionHighlight#d9775766
minimap.warningHighlight#92400e
minimapGutter.addedBackground#1a8633
minimapGutter.deletedBackground#b93535
minimapGutter.modifiedBackground#92400e
minimapSlider.activeBackground#c6613faa
minimapSlider.background#c3c2b788
minimapSlider.hoverBackground#a5a49aaa
notificationCenter.border#c3c2b7
notificationCenterHeader.background#f9f9f7
notifications.background#ffffff
notifications.border#c3c2b7
notificationsErrorIcon.foreground#b93535
notificationsInfoIcon.foreground#184f95
notificationsWarningIcon.foreground#92400e
notificationToast.border#c3c2b7
panel.background#f9f9f7
panel.border#e1e0d9
panelTitle.activeBorder#c6613f
panelTitle.activeForeground#0b0b0b
panelTitle.inactiveForeground#7b7974
peekView.border#c6613f
peekViewEditor.background#f3f3f0
peekViewEditor.matchHighlightBackground#d9775755
peekViewEditorGutter.background#f3f3f0
peekViewResult.background#f9f9f7
peekViewResult.matchHighlightBackground#d9775733
peekViewResult.selectionBackground#f0efec
peekViewResult.selectionForeground#0b0b0b
peekViewTitle.background#f9f9f7
peekViewTitleDescription.foreground#52514e
peekViewTitleLabel.foreground#0b0b0b
problemsErrorIcon.foreground#b93535
problemsInfoIcon.foreground#184f95
problemsWarningIcon.foreground#92400e
progressBar.background#c6613f
scrollbarSlider.activeBackground#c6613faa
scrollbarSlider.background#c3c2b788
scrollbarSlider.hoverBackground#a5a49aaa
sideBar.background#f9f9f7
sideBar.border#e1e0d9
sideBar.foreground#20201f
sideBarSectionHeader.background#fcfcfb
sideBarTitle.foreground#0b0b0b
statusBar.background#f9f9f7
statusBar.border#e1e0d9
statusBar.debuggingBackground#c6613f
statusBar.debuggingForeground#fcfcfb
statusBar.foreground#52514e
statusBar.noFolderBackground#f9f9f7
tab.activeBackground#fcfcfb
tab.activeBorderTop#c6613f
tab.activeForeground#0b0b0b
tab.border#e1e0d9
tab.inactiveBackground#f9f9f7
tab.inactiveForeground#7b7974
terminal.ansiBlack#0b0b0b
terminal.ansiBlue#184f95
terminal.ansiBrightBlack#a5a49a
terminal.ansiBrightBlue#2a78d6
terminal.ansiBrightCyan#629987
terminal.ansiBrightGreen#0ca30c
terminal.ansiBrightMagenta#827dbd
terminal.ansiBrightRed#d03b3b
terminal.ansiBrightWhite#0b0b0b
terminal.ansiBrightYellow#db9300
terminal.ansiCyan#3f7562
terminal.ansiGreen#1a8633
terminal.ansiMagenta#615ba0
terminal.ansiRed#b93535
terminal.ansiWhite#52514e
terminal.ansiYellow#92400e
terminal.background#fcfcfb
terminal.foreground#0b0b0b
terminalCursor.foreground#c6613f
testing.iconErrored#8a2020
testing.iconFailed#b93535
testing.iconPassed#1a8633
testing.iconQueued#a5a49a
testing.iconSkipped#52514e
testing.iconUnset#a5a49a
testing.runAction#c6613f
titleBar.activeBackground#f9f9f7
titleBar.activeForeground#0b0b0b
titleBar.border#e1e0d9
titleBar.inactiveBackground#f9f9f7
titleBar.inactiveForeground#a5a49a
widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#0b0b0b	—
comment, punctuation.definition.comment	#7b7974	italic
string, string.quoted, string.template	#2a7a2a	—
string.regexp	#92400e	—
constant.character.escape	#5b5a8a	—
punctuation.definition.template-expression	#3f7562	—
constant.numeric, constant.language, constant.character, support.constant	#9a6a44	—
keyword, storage.type, storage.modifier, keyword.control	#c6613f	—
keyword.operator	#52514e	—
variable.language	#a94f31	italic
entity.name.function, support.function, meta.function-call	#8a5a1e	—
entity.name.class, entity.name.type, support.class, support.type, entity.name.namespace, entity.other.inherited-class	#3f7562	—
entity.name.function.decorator, meta.decorator, punctuation.decorator	#615ba0	—
variable, variable.other	#0b0b0b	—
variable.parameter	#383835	—
variable.other.property, meta.object-literal.key, support.type.property-name	#5b5a8a	—
entity.other.attribute-name	#5b5a8a	—
entity.name.tag	#c6613f	—
punctuation, meta.brace	#52514e	—
invalid	#b93535	—
markup.bold	—	bold
markup.italic	—	italic
markup.heading	#c6613f	bold
markup.quote	#52514e	italic
markup.underline.link	#3f7562	—
markup.inserted, diff.inserted	#1a8633	—
markup.deleted, diff.deleted	#b93535	—
markup.changed, diff.changed	#92400e	—

VS Code preview

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

Clay Terminal — Clay Terminal Light High Contrast

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.background#ffffff
activityBar.border#9a4a28
activityBar.foreground#a94f31
activityBar.inactiveForeground#20201f
activityBarBadge.background#a94f31
activityBarBadge.foreground#ffffff
badge.background#a94f31
badge.foreground#ffffff
button.background#a94f31
button.border#9a4a28
button.foreground#ffffff
button.hoverBackground#7a3820
contrastActiveBorder#a94f31
contrastBorder#9a4a28
debugIcon.breakpointDisabledForeground#383835
debugIcon.breakpointForeground#b93535
debugIcon.continueForeground#184f95
debugIcon.pauseForeground#8a5a00
debugIcon.restartForeground#184f95
debugIcon.startForeground#1a8633
debugIcon.stepIntoForeground#184f95
debugIcon.stepOutForeground#184f95
debugIcon.stepOverForeground#184f95
debugIcon.stopForeground#b93535
descriptionForeground#20201f
diffEditor.border#9a4a28
diffEditor.insertedTextBackground#1a863333
diffEditor.removedTextBackground#b9353533
dropdown.background#ffffff
dropdown.border#9a4a28
editor.background#ffffff
editor.findMatchBackground#d97757aa
editor.findMatchHighlightBackground#d9775766
editor.foreground#000000
editor.lineHighlightBorder#9a4a28
editor.selectionBackground#d9775766
editor.selectionHighlightBackground#d9775744
editor.wordHighlightBackground#d9775744
editorBracketHighlight.foreground1#a94f31
editorBracketHighlight.foreground2#3f7562
editorBracketHighlight.foreground3#4a4593
editorBracketHighlight.foreground4#0b6b46
editorBracketHighlight.foreground5#3a3970
editorBracketHighlight.foreground6#8a5a1e
editorBracketHighlight.unexpectedBracket.foreground#b93535
editorBracketMatch.background#d9775744
editorBracketMatch.border#a94f31
editorCursor.foreground#a94f31
editorError.foreground#b93535
editorGroup.border#9a4a28
editorGroupHeader.tabsBackground#ffffff
editorGroupHeader.tabsBorder#9a4a28
editorGutter.addedBackground#1a8633
editorGutter.deletedBackground#b93535
editorGutter.errorBackground#b93535
editorGutter.modifiedBackground#8a5a00
editorGutter.warningBackground#8a5a00
editorHint.foreground#3f7562
editorIndentGuide.activeBackground1#9a4a28
editorIndentGuide.background1#c3c2b7
editorInfo.foreground#184f95
editorLineNumber.activeForeground#a94f31
editorLineNumber.foreground#383835
editorOverviewRuler.errorForeground#b93535
editorOverviewRuler.warningForeground#8a5a00
editorRuler.foreground#c3c2b7
editorUnnecessaryCode.border#383835
editorWarning.foreground#8a5a00
editorWhitespace.foreground#7b7974
focusBorder#a94f31
foreground#000000
gitDecoration.addedResourceForeground#1a8633
gitDecoration.deletedResourceForeground#b93535
gitDecoration.ignoredResourceForeground#52514e
gitDecoration.modifiedResourceForeground#8a5a00
gitDecoration.untrackedResourceForeground#0b6b46
input.background#ffffff
input.border#9a4a28
input.foreground#000000
input.placeholderForeground#52514e
inputOption.activeBorder#a94f31
list.activeSelectionBackground#d9775733
list.activeSelectionForeground#000000
list.focusBackground#d9775733
list.focusOutline#a94f31
list.hoverBackground#d9775722
list.inactiveSelectionBackground#00000000
notificationCenter.border#9a4a28
notificationCenterHeader.background#ffffff
notifications.background#ffffff
notifications.border#9a4a28
notificationsErrorIcon.foreground#b93535
notificationsInfoIcon.foreground#184f95
notificationsWarningIcon.foreground#8a5a00
notificationToast.border#9a4a28
panel.background#ffffff
panel.border#9a4a28
panelTitle.activeBorder#a94f31
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#20201f
peekView.border#a94f31
peekViewEditor.background#ffffff
peekViewEditor.matchHighlightBackground#d9775766
peekViewEditorGutter.background#ffffff
peekViewResult.background#ffffff
peekViewResult.matchHighlightBackground#d9775744
peekViewResult.selectionBackground#d9775733
peekViewResult.selectionForeground#000000
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#20201f
peekViewTitleLabel.foreground#000000
problemsErrorIcon.foreground#b93535
problemsInfoIcon.foreground#184f95
problemsWarningIcon.foreground#8a5a00
progressBar.background#a94f31
scrollbarSlider.activeBackground#a94f31
scrollbarSlider.background#9a4a2855
scrollbarSlider.hoverBackground#9a4a2888
sideBar.background#ffffff
sideBar.border#9a4a28
sideBar.foreground#000000
sideBarSectionHeader.background#ffffff
sideBarSectionHeader.border#9a4a28
sideBarTitle.foreground#000000
statusBar.background#ffffff
statusBar.border#9a4a28
statusBar.debuggingBackground#a94f31
statusBar.debuggingForeground#ffffff
statusBar.foreground#000000
statusBar.noFolderBackground#ffffff
tab.activeBackground#ffffff
tab.activeBorder#a94f31
tab.activeBorderTop#a94f31
tab.activeForeground#000000
tab.border#9a4a28
tab.inactiveBackground#ffffff
tab.inactiveForeground#20201f
tab.unfocusedActiveBorder#9a4a28
terminal.ansiBlack#000000
terminal.ansiBlue#184f95
terminal.ansiBrightBlack#52514e
terminal.ansiBrightBlue#184f95
terminal.ansiBrightCyan#0b6b46
terminal.ansiBrightGreen#1a8633
terminal.ansiBrightMagenta#4a4593
terminal.ansiBrightRed#b93535
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#8a5a00
terminal.ansiCyan#0b6b46
terminal.ansiGreen#1a8633
terminal.ansiMagenta#4a4593
terminal.ansiRed#b93535
terminal.ansiWhite#20201f
terminal.ansiYellow#8a5a00
terminal.background#ffffff
terminal.foreground#000000
terminalCursor.foreground#a94f31
testing.iconErrored#9a4a28
testing.iconFailed#b93535
testing.iconPassed#1a8633
testing.iconQueued#383835
testing.iconSkipped#20201f
testing.iconUnset#383835
testing.runAction#a94f31
titleBar.activeBackground#ffffff
titleBar.activeForeground#000000
titleBar.border#9a4a28
titleBar.inactiveBackground#ffffff
titleBar.inactiveForeground#20201f
widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#000000	—
comment, punctuation.definition.comment	#52514e	italic
string, string.quoted, string.template	#0b6b1e	—
string.regexp	#8a5a00	—
constant.character.escape	#4a4593	—
constant.numeric, constant.language, constant.character, support.constant	#8a5a1e	—
keyword, storage.type, storage.modifier, keyword.control	#9a4a28	—
keyword.operator	#20201f	—
variable.language	#7a3820	italic
entity.name.function, support.function, meta.function-call	#6b4600	—
entity.name.class, entity.name.type, support.class, support.type, entity.name.namespace, entity.other.inherited-class	#0b6b46	—
entity.name.function.decorator, meta.decorator, punctuation.decorator	#4a4593	—
variable, variable.other	#000000	—
variable.parameter	#20201f	—
variable.other.property, meta.object-literal.key, support.type.property-name	#3a3970	—
entity.other.attribute-name	#3a3970	—
entity.name.tag	#9a4a28	—
punctuation, meta.brace	#20201f	—
invalid	#b93535	—
markup.bold	—	bold
markup.italic	—	italic
markup.heading	#9a4a28	bold
markup.quote	#20201f	italic
markup.underline.link	#0b6b46	—
markup.inserted, diff.inserted	#1a8633	—
markup.deleted, diff.deleted	#b93535	—
markup.changed, diff.changed	#8a5a00	—