Skip to main content
Coding Theme

Color themes

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
Rider

IntelliJ Theme recreates Darcula for IntelliJ, GoLand, CLion, AppCode, and Rider. The five variants share one editor.

Background is #2B2B2B. Text is #A8B6C5.

colors

Workbench UI color keys from the theme JSON colors map.

keyHEXRGBRGBA
activityBar.background
activityBar.border
editor.background
editor.foreground
editor.lineHighlightBackground
editorCursor.background
editorCursor.foreground
editorGroup.border
editorGroupHeader.border
editorGroupHeader.noTabsBackground
editorGroupHeader.tabsBackground
editorGutter.background
editorIndentGuide.activeBackground
editorIndentGuide.background
editorInlayHint.background
editorInlayHint.foreground
editorLineNumber.activeForeground
editorLineNumber.foreground
editorOverviewRuler.border
editorSuggestWidget.foreground
editorWidget.background
editorWidget.border
foreground
panel.background
panel.border
sideBar.background
sideBar.border
statusBar.background
statusBar.border
statusBar.debuggingBackground
statusBar.foreground
statusBar.noFolderBackground
symbolIcon.classForeground
symbolIcon.constantForeground
symbolIcon.enumeratorForeground
symbolIcon.enumeratorMemberForeground
symbolIcon.fieldForeground
symbolIcon.functionForeground
symbolIcon.interfaceForeground
symbolIcon.methodForeground
symbolIcon.moduleForeground
symbolIcon.propertyForeground
symbolIcon.structForeground
symbolIcon.typeParameterForeground
symbolIcon.variableForeground
tab.activeBackground
tab.activeBorderTop
tab.activeForeground
tab.border
tab.hoverBackground
tab.inactiveBackground
tab.inactiveForeground
terminal.ansiBlack
terminal.ansiBlue
terminal.ansiBrightBlack
terminal.ansiBrightBlue
terminal.ansiBrightCyan
terminal.ansiBrightGreen
terminal.ansiBrightMagenta
terminal.ansiBrightRed
terminal.ansiBrightWhite
terminal.ansiBrightYellow
terminal.ansiCyan
terminal.ansiGreen
terminal.ansiMagenta
terminal.ansiRed
terminal.ansiWhite
terminal.ansiYellow
terminal.foreground
terminalCursor.background
terminalCursor.foreground
titleBar.activeBackground
titleBar.activeForeground
titleBar.border
titleBar.inactiveBackground
titleBar.inactiveForeground

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.

scopeHEXRGBRGBA
markup
markup.deleted
markup.inserted