Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
key
HEX
RGB
RGBA
activityBar.background
activityBar.border
breadcrumbPicker.border
chat.avatarBorder
chat.requestBorder
chat.responseBorder
contrastBorder
debugConsole.border
debugExceptionWidget.border
debugToolBar.border
diffEditor.border
dropdown.border
editor.background
editor.foreground
editor.lineHighlightBackground
editor.selectionBackground
editorCursor.foreground
editorGroupHeader.border
editorGroupHeader.tabsBackground
editorGroupHeader.tabsBorder
editorOverviewRuler.background
editorWhitespace.foreground
focusBorder
inlineChat.border
inlineChat.shadow
input.border
merge.border
mergeEditor.change.border
mergeEditor.conflict.border
mergeEditor.conflict.handledFocused.border
mergeEditor.conflict.handledUnfocused.border
mergeEditor.conflict.unhandledFocused.border
mergeEditor.conflict.unhandledUnfocused.border
notificationCenter.border
notifications.border
notificationToast.border
panel.border
panelSection.border
panelSectionHeader.border
panelTitle.activeBorder
pickerGroup.border
quickInput.background
sideBar.background
sideBar.border
sideBarSectionHeader.border
sideBarTitle.foreground
statusBar.background
statusBar.border
tab.activeBackground
tab.activeBorder
tab.activeForeground
tab.inactiveBackground
tab.inactiveForeground
terminal.border
testing.message.error.border
testing.message.info.border
testing.message.warning.border
titleBar.activeBackground
titleBar.inactiveBackground
walkthrough.step.border
welcomePage.border
widget.border
tokenColors
Foregrounds this theme assigns to the token scope catalog. A rule with only a font style is skipped, and a longer matching scope wins. Italic and bold rules are not listed — the preview above shows them in the code.
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}!`;}
