Skip to main content
Coding Theme

VS Code preview

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

src
components
fetchUser.ts
User
tags
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}!`;
}
WSL
1 1
main*
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Deep Blue

colors

Workbench UI color keys from the theme JSON colors map.

keyHEXRGBRGBA
activityBar.background
activityBar.foreground
activityBar.inactiveForeground
activityBarBadge.background
activityBarBadge.foreground
breadcrumbPicker.background
button.background
button.foreground
button.hoverBackground
button.separator
#ODOEOF2E——
commandCenter.activeBorder
commandCenter.background
commandCenter.border
commandCenter.inactiveBorder
debugIcon.breakpointForeground
debugToolBar.background
descriptionForeground
diffEditor.insertedLineBackground
diffEditor.insertedTextBackground
diffEditor.removedLineBackground
diffEditor.removedTextBackground
disabledForeground
editor.background
editor.findMatchHighlightBackground
editor.foreground
editor.hoverHighlightBackground
editor.lineHighlightBackground
editor.selectionBackground
editor.tab.background
editorBracketPairGuide.background1
editorBracketPairGuide.background2
editorBracketPairGuide.background3
editorBracketPairGuide.background4
editorBracketPairGuide.background5
editorBracketPairGuide.background6
editorCursor.foreground
editorGroupHeader.tabsBackground
editorGroupHeader.tabsBorder
editorIndentGuide.activeBackground
editorIndentGuide.activeBackground1
editorIndentGuide.background
editorIndentGuide.background1
editorLineNumber.activeForeground
editorLineNumber.foreground
editorLink.activeForeground
editorStickyScrollHover.background
editorUnnecessaryCode.opacity
errorForeground
focusBorder
foreground
icon.foreground
icube--bg-bg-menu
icube.blendColor.btnHover.bg2
icube.blendColor.btnTransparent3.bg2
icube.chatIconBg1
icube.chatIconColor1
icube.colorBg1
icube.colorBg2
icube.colorBg3
icube.colorBgCode
icube.colorBgTr0
icube.colorBrandTransparent
icube.colorBrandTransparent2
icube.colorBrandTransparent3
icube.colorBtnHover
icube.colorBtnHover2
icube.colorBtnTransparent3
icube.colorLine1
icube.colorLine2
icube.colorLine3
input.background
input.placeholderForeground
inputOption.activeBorder
inputValidation.errorBorder
inputValidation.warningBorder
list.activeSelectionBackground
list.activeSelectionForeground
list.dropBackground
list.errorForeground
list.highlightForeground
list.hoverBackground
list.inactiveSelectionBackground
list.inactiveSelectionForeground
listFilterWidget.background
menu.background
menu.border
menu.foreground
menu.selectionBackground
menu.selectionForeground
menu.separatorBackground
notifications.background
notificationsErrorIcon.foreground
notificationsInfoIcon.foreground
notificationsWarningIcon.foreground
panelSectionHeader.background
panelSectionHeader.border
panelSectionHeader.foreground
panelTitle.activeForeground
panelTitle.inactiveForeground
pickerGroup.border
pickerGroup.foreground
progressBar.background
quickInput.background
quickInput.foreground
quickInputList.focusBackground
quickInputTitle.background
sash.hoverBorder
search.resultsInfoForeground
settings.dropdownBackground
settings.dropdownBorder
settings.headerBorder
settings.headerForeground
settings.modifiedItemIndicator
sideBar.background
sideBarSectionHeader.background
sideBarSectionHeader.border
sideBarSectionHeader.foreground
statusBar.background
statusBar.noFolderBackground
symbolIcon.methodForeground
tab.activeBackground
tab.activeBorder
tab.activeBorderTop
tab.activeForeground
tab.border
tab.inactiveBackground
tab.inactiveForeground
tab.unfocusedActiveForeground
textLink.activeForeground
textLink.foreground
titleBar.activeBackground
titleBar.activeForeground
titleBar.inactiveBackground
toolbar.activeBackground
toolbar.hoverBackground
tree.inactiveIndentGuidesStroke
tree.indentGuidesStroke
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.

This theme does not set foregrounds for these scopes.