panelTitle.activeBorder

Where panel title active border paints

The outlined area moves from #e7e7e7 to #e8a317, then back. The rest of the workbench stays on the default Dark+ colors.

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}!`;
}

How to change panel title active border color in Visual Studio Code

{
  "workbench.colorCustomizations": {
    "panelTitle.activeBorder": "#e8a317"
  }
}

Other Panel colors

• panel.background

  Panel background color.

• panel.border

  Panel border color to separate the panel from the editor.

• panel.dropBorder

  Drag and drop feedback color for the panel titles. Panels are shown below the editor area and contain views like output and integrated terminal.

• panelTitle.activeForeground

  Title color for the active panel.

• panelTitle.inactiveForeground

  Title color for the inactive panel.

• panelTitle.border

  Panel title border color on the bottom, separating the title from the views. Panels are shown below the editor area and contain views like output and integrated terminal.

• panelTitleBadge.background

  Panel title badge background color. Panels are shown below the editor area and contain views like output and integrated terminal.

• panelTitleBadge.foreground

  Panel title badge foreground color. Panels are shown below the editor area and contain views like output and integrated terminal.

• panelInput.border

  Input box border for inputs in the panel.

• panelSection.border

  Panel section border color used when multiple views are stacked horizontally in the panel. Panels are shown below the editor area and contain views like output and integrated terminal.

• panelSection.dropBackground

  Drag and drop feedback color for the panel sections. The color should have transparency so that the panel sections can still shine through. Panels are shown below the editor area and contain views like output and integrated terminal.

• panelSectionHeader.background

  Panel section header background color. Panels are shown below the editor area and contain views like output and integrated terminal.

• panelSectionHeader.foreground

  Panel section header foreground color. Panels are shown below the editor area and contain views like output and integrated terminal.

• panelStickyScroll.background

  Background color of sticky scroll in the panel.

• panelStickyScroll.border

  Border color of sticky scroll in the panel.

• panelStickyScroll.shadow

  Shadow color of sticky scroll in the panel.

• panelSectionHeader.border

  Panel section header border color used when multiple views are stacked vertically in the panel. Panels are shown below the editor area and contain views like output and integrated terminal.

• outputView.background

  Output view background color.

• outputViewStickyScroll.background

  Output view sticky scroll background color.