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.foreground
activityBarBadge.background
activityBarBadge.foreground
badge.background
badge.foreground
banner.background
breadcrumb.background
button.background
button.border
commandCenter.activeForeground
commandCenter.border
commandCenter.foreground
debugToolBar.background
debugToolBar.border
disabledForeground
dropdown.background
dropdown.border
editor.background
editor.lineHighlightBackground
editor.lineHighlightBorder
editorGroupHeader.tabsBackground
editorGutter.background
editorHoverWidget.background
editorHoverWidget.border
editorRuler.foreground
editorStickyScroll.background
editorStickyScrollHover.background
editorUnnecessaryCode.opacity
editorWidget.background
focusBorder
foreground
icon.foreground
input.background
input.border
list.activeSelectionBackground
list.activeSelectionForeground
list.hoverBackground
list.hoverForeground
list.inactiveFocusOutline
list.inactiveSelectionBackground
list.inactiveSelectionForeground
menu.background
menu.border
menu.foreground
menu.separatorBackground
panel.background
panelTitle.activeForeground
quickInput.background
scrollbar.shadow
settings.focusedRowBackground
settings.headerForeground
settings.numberInputBackground
settings.rowHoverBackground
settings.textInputBackground
sideBar.background
sideBar.border
sideBarSectionHeader.background
statusBar.background
statusBar.debuggingBackground
statusBar.noFolderBackground
statusBarItem.remoteBackground
tab.activeBackground
tab.activeBorderTop
tab.border
tab.hoverBackground
tab.inactiveBackground
tab.unfocusedHoverBorder
tab.unfocusedInactiveForeground
titleBar.activeBackground
titleBar.activeForeground
widget.border
widget.shadow
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}!`;}
