Claude Clay Dark

Name: Claude Clay Dark
Author: prabal

Publisher: prabalThemes in package: 1

A calm, focused dark theme inspired from Claude.

Open in VS Code GitHub

VS Code preview

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

Claude Clay Dark — Claude Clay 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.activeBackground#37373720
activityBar.activeBorder#C3C2B7
activityBar.activeFocusBorder#C3C2B7
activityBar.background#171716
activityBar.border#2a2a29
activityBar.foreground#DED8CE
activityBar.inactiveForeground#999999
activityBarBadge.background#D97757
activityBarBadge.foreground#DED8CE
badge.background#264F78
badge.foreground#DED8CE
breadcrumb.activeSelectionForeground#DED8CE
breadcrumb.background#1A1A19
breadcrumb.focusForeground#D97757
breadcrumb.foreground#999999
breadcrumbPicker.background#1A1A19
button.background#3D3D3A
button.foreground#FAF9F5
button.hoverBackground#4E4E4A
button.secondaryBackground#3D3D3A
button.secondaryForeground#FAF9F5
button.secondaryHoverBackground#4E4E4A
button.separator#4E4E4A
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#FF6B80
debugConsole.infoForeground#6A9BCC
debugConsole.sourceForeground#999999
debugConsole.warningForeground#FFC107
debugIcon.breakpointDisabledForeground#505050
debugIcon.breakpointForeground#E51400
debugIcon.breakpointUnverifiedForeground#FAC35F
debugIcon.pauseForeground#FAC35F
debugIcon.restartForeground#D97757
debugIcon.startForeground#64C663
debugIcon.stepIntoForeground#6A9BCC
debugIcon.stepOutForeground#6A9BCC
debugIcon.stepOverForeground#6A9BCC
debugIcon.stopForeground#FF6B80
debugToolBar.background#1A1A19
debugToolBar.border#00000000
descriptionForeground#999999
diffEditor.insertedLineBackground#225C2B20
diffEditor.insertedTextBackground#225C2B40
diffEditor.removedLineBackground#7A293620
diffEditor.removedTextBackground#7A293640
disabledForeground#99999980
dropdown.background#202021
dropdown.border#2a2a29
dropdown.foreground#DED8CE
dropdown.listBackground#202021
editor.background#1A1A19
editor.findMatchBackground#FBBC0440
editor.findMatchHighlightBackground#FBBC0420
editor.foreground#DED8CE
editor.inactiveSelectionBackground#5598E735
editor.lineHighlightBackground#33333380
editor.lineHighlightBorder#00000000
editor.selectionBackground#5598E773
editor.selectionHighlightBackground#5598E735
editor.wordHighlightBackground#5598E730
editor.wordHighlightStrongBackground#5598E750
editorBracketHighlight.foreground1#FAC35F
editorBracketHighlight.foreground2#C882B4
editorBracketHighlight.foreground3#82AADC
editorBracketHighlight.foreground4#FAC35F
editorBracketHighlight.foreground5#C882B4
editorBracketHighlight.foreground6#82AADC
editorBracketMatch.background#3994BC55
editorBracketMatch.border#2A2B2CFF
editorCodeLens.foreground#999999
editorCursor.foreground#BBBEBF
editorError.foreground#FF6B80
editorGroup.border#2a2a29
editorGroupHeader.tabsBackground#171716
editorGroupHeader.tabsBorder#2a2a29
editorGutter.addedBackground#38A660
editorGutter.background#1A1A19
editorGutter.deletedBackground#C74E39
editorGutter.modifiedBackground#E0AD72
editorHoverWidget.background#1A1A19
editorHoverWidget.border#2a2a29
editorHoverWidget.foreground#DED8CE
editorIndentGuide.activeBackground1#999999
editorIndentGuide.background1#505050
editorInfo.foreground#6A9BCC
editorInlayHint.background#2a2a2980
editorInlayHint.foreground#999999
editorInlayHint.parameterBackground#2a2a2980
editorInlayHint.parameterForeground#999999
editorInlayHint.typeBackground#2a2a2980
editorInlayHint.typeForeground#6A9BCC
editorLineNumber.activeForeground#999999
editorLineNumber.foreground#505050
editorStickyScroll.background#1A1A19
editorStickyScroll.border#30302E
editorSuggestWidget.background#1A1A19
editorSuggestWidget.border#2a2a29
editorSuggestWidget.focusHighlightForeground#FAC35F
editorSuggestWidget.highlightForeground#C3C2B7
editorSuggestWidget.selectedBackground#264F78
editorWarning.foreground#FFC107
editorWhitespace.foreground#6E6B66
editorWidget.background#1A1A19
editorWidget.border#2a2a29
editorWidget.foreground#DED8CE
errorForeground#FF6B80
extensionButton.prominentBackground#3D3D3A
extensionButton.prominentForeground#FAF9F5
extensionButton.prominentHoverBackground#4E4E4A
focusBorder#C3C2B780
foreground#DED8CE
gitDecoration.addedResourceForeground#38A660
gitDecoration.conflictingResourceForeground#D97757
gitDecoration.deletedResourceForeground#C74E39
gitDecoration.ignoredResourceForeground#505050
gitDecoration.modifiedResourceForeground#E0AD72
gitDecoration.renamedResourceForeground#6A9BCC
gitDecoration.submoduleResourceForeground#52B2C9
gitDecoration.untrackedResourceForeground#38A660
icon.foreground#999999
input.background#1A1A19
input.border#2a2a29
input.foreground#DED8CE
inputOption.activeBorder#2A78D6
list.activeSelectionBackground#264F78
list.activeSelectionForeground#DED8CE
list.focusBackground#264F7880
list.focusHighlightForeground#FAC35F
list.highlightForeground#C3C2B7
list.hoverBackground#333333
menu.background#202021
menu.border#2a2a29
menu.foreground#DED8CE
menu.selectionBackground#151515
menu.selectionForeground#DED8CE
menu.separatorBackground#2a2a29
merge.border#2a2a29
merge.commonContentBackground#D9775715
merge.commonHeaderBackground#D9775730
merge.currentContentBackground#225C2B20
merge.currentHeaderBackground#225C2B40
merge.incomingContentBackground#264F7820
merge.incomingHeaderBackground#264F7840
mergeEditor.change.background#225C2B20
mergeEditor.change.word.background#225C2B40
mergeEditor.conflict.handledFocused.border#64C663
mergeEditor.conflict.handledUnfocused.border#64C66380
mergeEditor.conflict.unhandledFocused.border#FAC35F
mergeEditor.conflict.unhandledUnfocused.border#FBBC0480
minimap.errorHighlight#FF6B80
minimap.findMatchHighlight#D9775780
minimap.selectionHighlight#264F7880
minimap.warningHighlight#FFC107
minimapSlider.activeBackground#99999940
minimapSlider.background#99999915
minimapSlider.hoverBackground#99999930
notificationCenter.border#2a2a29
notificationCenterHeader.background#292929
notificationLink.foreground#C3C2B7
notifications.background#292929
notifications.border#2a2a29
notifications.foreground#C3C2B7
notificationsErrorIcon.foreground#FF6B80
notificationsInfoIcon.foreground#6A9BCC
notificationsWarningIcon.foreground#FFC107
notificationToast.border#00000000
panel.background#1A1A19
panel.border#2a2a29
panelTitle.activeBorder#C3C2B7
panelTitle.activeForeground#DED8CE
panelTitle.inactiveForeground#999999
peekView.border#00000000
peekViewEditor.background#1A1A19
peekViewEditor.matchHighlightBackground#FBBC0430
peekViewEditorGutter.background#1A1A19
peekViewResult.background#1A1A19
peekViewResult.fileForeground#DED8CE
peekViewResult.lineForeground#999999
peekViewResult.matchHighlightBackground#D9775730
peekViewResult.selectionBackground#264F78
peekViewResult.selectionForeground#DED8CE
peekViewTitle.background#1A1A19
peekViewTitleDescription.foreground#999999
peekViewTitleLabel.foreground#D97757
pickerGroup.border#2a2a29
pickerGroup.foreground#C3C2B7
quickInput.background#2c2c2a
quickInput.border#2A78D6
quickInput.foreground#DED8CE
quickInputList.focusBackground#264F78
quickInputList.focusOutline#2A78D6
sash.hoverBorder#00000000
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#99999960
scrollbarSlider.background#99999920
scrollbarSlider.hoverBackground#99999940
selection.background#774635
sideBar.background#171716
sideBar.border#2a2a29
sideBar.foreground#C3C2B7
sideBarSectionHeader.background#171716
sideBarSectionHeader.border#2a2a29
sideBarSectionHeader.foreground#C3C2B7
sideBarTitle.foreground#C3C2B7
statusBar.background#171716
statusBar.border#2a2a29
statusBar.debuggingBackground#264F78
statusBar.debuggingForeground#DED8CE
statusBar.foreground#999999
statusBar.noFolderBackground#171716
statusBar.noFolderForeground#999999
statusBarItem.hoverBackground#323233
statusBarItem.hoverForeground#DED8CE
statusBarItem.remoteBackground#D97757
statusBarItem.remoteForeground#DED8CE
symbolIcon.booleanForeground#52B2C9
symbolIcon.classForeground#64C663
symbolIcon.enumeratorForeground#64C663
symbolIcon.eventForeground#FAC35F
symbolIcon.interfaceForeground#64C663
symbolIcon.keywordForeground#D97757
symbolIcon.methodForeground#BAD0EC
symbolIcon.numberForeground#827DBD
symbolIcon.propertyForeground#DED8CE
symbolIcon.stringForeground#64C663
symbolIcon.variableForeground#DED8CE
tab.activeBackground#1A1A19
tab.activeBorder#00000000
tab.activeBorderTop#C3C2B7
tab.activeForeground#DED8CE
tab.border#2a2a29
tab.inactiveBackground#171716
tab.inactiveForeground#999999
terminal.ansiBlack#000000
terminal.ansiBlue#6A9BCC
terminal.ansiBrightBlack#505050
terminal.ansiBrightBlue#B1C3FF
terminal.ansiBrightCyan#00CCCC
terminal.ansiBrightGreen#64C663
terminal.ansiBrightMagenta#AF87FF
terminal.ansiBrightRed#FF6B80
terminal.ansiBrightWhite#c3c2b7
terminal.ansiBrightYellow#FFC107
terminal.ansiCyan#52B2C9
terminal.ansiGreen#16A34A
terminal.ansiMagenta#827DBD
terminal.ansiRed#DC2626
terminal.ansiWhite#c3c2b7
terminal.ansiYellow#CA8A04
terminal.background#1A1A19
terminal.foreground#E3E1DD
terminal.selectionBackground#264F78
terminalCursor.foreground#bfbfbf
titleBar.activeBackground#171716
titleBar.activeForeground#C3C2B7
titleBar.border#2a2a29
titleBar.inactiveBackground#171716
titleBar.inactiveForeground#999999
tree.indentGuidesStroke#2a2a29
widget.border#2a2a29
widget.shadow#00000080
window.activeBorder#00000000
window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#999999	—
keyword, keyword.control	#D97757	—
storage.type, storage.type.modifier	#6A9BCC	—
storage, storage.modifier	#D97757	—
string, string.quoted, string.template	#64C663	—
string.regexp	#CA8A04	—
constant.character.escape, constant.character.unicode, constant.other.placeholder	#52B2C9	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, meta.template.expression, meta.embedded.line, punctuation.definition.interpolation, punctuation.section.interpolation	#CA8A04	—
constant.numeric	#827DBD	—
entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, constant.language	#827DBD	—
constant.language.boolean, constant.language.true, constant.language.false, constant.language.null, constant.language.nullptr, constant.language.undefined, constant.language.python, keyword.other.true, keyword.other.false, keyword.other.null, keyword.other.nullptr, keyword.other.undefined, keyword.constant.bool, keyword.constant.null	#52B2C9	—
entity.name.function	#FAC35F	—
support.function, meta.function-call, entity.name.function.member, meta.method-call	#BAD0EC	—
entity.name.type, entity.name.class, support.type, support.class	#64C663	—
variable, variable.other, variable.parameter, entity.name.namespace	#DED8CE	—
keyword.operator	#C3C2B7	—
punctuation, meta.brace	#999999	—
meta.object-literal.key, variable.other.property	#DED8CE	—
entity.name.tag, support.class.component	#6A9BCC	—
entity.other.attribute-name, entity.other.pseudo-class, entity.other.pseudo-element	#FAC35F	—
entity.other.attribute-name.class, entity.other.attribute-name.id	#FAC35F	—
support.type.property-name	#6A9BCC	—
markup.heading	#D97757	—
markup.underline.link, string.other.link	#6A9BCC	—
markup.bold	—	bold
invalid, invalid.deprecated	#FF6B80	underline
entity.other.inherited-class	#6A9BCC	—
entity.name.function.preprocessor, entity.name.constant.preprocessor, meta.preprocessor.macro	#FAC35F	—
meta.decorator, entity.name.function.decorator, punctuation.decorator, meta.annotation, entity.name.type.annotation, punctuation.definition.annotation, storage.type.annotation	#D97757	—
storage.modifier.package.java, storage.modifier.import.java	#DED8CE	—