Skip to main content
Home Theme VS Code Grayscale Blend of white, black and gray theme for Visual Studio Code
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBackground #555555 activityBar.activeBorder #eeeeee activityBar.background #333333 activityBar.foreground #eeeeee activityBar.inactiveForeground #777777 activityBarBadge.background #eeeeee tokenColors TextMate scopes and font styles (syntax highlighting rules).
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground #333333
activityBarItem.settingsProfilesBackground #4d4d4d
badge.background #333333
badge.foreground #eeeeee
breadcrumb.activeSelectionForeground #333333
breadcrumb.background #dddddd
breadcrumb.focusForeground #555555
breadcrumb.foreground #999999
breadcrumbPicker.background #dddddd
button.background #333333
button.border #bbbbbb
button.foreground #eeeeee
button.hoverBackground #555555
contrastBorder #bbbbbb
debugIcon.breakpointDisabledForeground #999999
debugIcon.breakpointForeground #333333
disabledForeground #999999
editor.background #dddddd
editor.findMatchBackground #eeeeee
editor.findMatchBorder #eeeeee
editor.findMatchHighlightBackground #bbbbbb
editor.findMatchHighlightBorder #bbbbbb
editor.foldBackground #bbbbbb
editor.foreground #333333
editor.hoverHighlightBackground #eeeeee
editor.inactiveSelectionBackground #eeeeee
editor.lineHighlightBackground #cccccc
editor.lineHighlightBorder #cccccc
editor.selectionBackground #bbbbbb
editor.selectionForeground #eeeeee
editor.selectionHighlightBackground #cccccc
editor.selectionHighlightBorder #cccccc
editorIndentGuide.activeBackground #bbbbbb
editorIndentGuide.background #bbbbbb
editorLineNumber.activeForeground #333333
editorLineNumber.foreground #999999
editorSuggestWidget.background #cccccc
editorSuggestWidget.border #bbbbbb
editorSuggestWidget.focusHighlightForeground #333333
editorSuggestWidget.foreground #333333
editorSuggestWidget.highlightForeground #333333
editorSuggestWidget.selectedBackground #eeeeee
editorSuggestWidget.selectedForeground #333333
editorSuggestWidget.selectedIconForeground #333333
editorWidget.background #dddddd
editorWidget.border #bbbbbb
editorWidget.foreground #333333
focusBorder #bbbbbb
foreground #333333
icon.foreground #bbbbbb
input.background #eeeeee
input.border #bbbbbb
input.foreground #333333
input.placeholderForeground #999999
list.activeSelectionBackground #777777
list.activeSelectionForeground #eeeeee
list.activeSelectionIconForeground #eeeeee
list.focusAndSelectionOutline #777777
list.focusBackground #777777
list.focusForeground #eeeeee
list.focusHighlightForeground #eeeeee
list.focusOutline #eeeeee
list.highlightForeground #333333
list.hoverBackground #999999
list.hoverForeground #eeeeee
list.inactiveFocusBackground #777777
list.inactiveFocusOutline #777777
list.inactiveSelectionBackground #777777
list.inactiveSelectionForeground #eeeeee
list.inactiveSelectionIconForeground #eeeeee
menu.background #333333
menu.border #777777
menu.foreground #eeeeee
menu.selectionBackground #777777
menu.selectionBorder #777777
menu.selectionForeground #eeeeee
menu.separatorBackground #777777
menubar.selectionBackground #333333
menubar.selectionBorder #777777
menubar.selectionForeground #eeeeee
minimap.background #bbbbbb
minimap.selectionHighlight #777777
notebook.cellBorderColor #e8e8e8
notebook.selectedCellBackground #c8ddf150
notificationCenter.border #777777
notificationCenterHeader.background #dddddd
notificationCenterHeader.foreground #333333
notificationLink.foreground #333333
notifications.background #dddddd
notifications.border #777777
notifications.foreground #333333
notificationsErrorIcon.foreground #333333
notificationsInfoIcon.foreground #333333
notificationsWarningIcon.foreground #333333
panel.background #dddddd
panelTitle.activeBorder #333333
panelTitle.activeForeground #333333
panelTitle.inactiveForeground #333333
peekView.border #bbbbbb
peekViewEditor.background #cccccc
peekViewEditor.matchHighlightBackground #eeeeee
peekViewEditor.matchHighlightBorder #eeeeee
peekViewEditorGutter.background #bbbbbb
peekViewResult.background #cccccc
peekViewResult.fileForeground #333333
peekViewResult.lineForeground #333333
peekViewResult.matchHighlightBackground #eeeeee
peekViewResult.selectionBackground #bbbbbb
peekViewResult.selectionForeground #333333
peekViewTitle.background #333333
peekViewTitleDescription.foreground #eeeeee
peekViewTitleLabel.foreground #eeeeee
problemsErrorIcon.foreground #333333
problemsInfoIcon.foreground #333333
problemsWarningIcon.foreground #333333
scrollbar.shadow #777777
scrollbarSlider.activeBackground #555555
scrollbarSlider.background #333333
scrollbarSlider.hoverBackground #555555
searchEditor.textInputBorder #cecece
settings.numberInputBorder #cecece
settings.textInputBorder #cecece
sideBar.background #bbbbbb
sideBar.border #777777
sideBar.foreground #333333
sideBarSectionHeader.background #333333
sideBarSectionHeader.border #777777
sideBarSectionHeader.foreground #eeeeee
sideBarTitle.foreground #333333
statusBar.background #333333
statusBar.border #777777
statusBar.foreground #eeeeee
statusBarItem.remoteForeground #ffffff
tab.activeBackground #cccccc
tab.activeForeground #333333
tab.border #bbbbbb
tab.hoverBackground #dddddd
tab.hoverForeground #333333
tab.inactiveBackground #eeeeee
tab.inactiveForeground #333333
tab.lastPinnedBorder #61616130
terminal.background #333333
terminal.foreground #eeeeee
terminal.inactiveSelectionBackground #e5ebf1
terminal.selectionBackground #bbbbbb
titleBar.activeBackground #333333
titleBar.activeForeground #eeeeee
toolbar.activeBackground #bbbbbb
toolbar.hoverBackground #dddddd
toolbar.hoverOutline #dddddd 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 }!` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
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
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...
main*
Button.tsx
fetchUser
31
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 }!` ;
}
Grayscale | Coding Theme