Skip to main content
Coding Theme

panelTitle.inactiveForeground

panel title inactive foreground. Title color for the inactive panel.

Group: Panel colors

Where panel title inactive foreground paints

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

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
Dark+

How to change panel title inactive foreground color in Visual Studio Code

macOS

  1. Open settings.json. Press Shift+Command+P to open the Command Palette, then run Preferences: Open User Settings (JSON).
  2. Set this color id. Add panel title inactive foreground under workbench.colorCustomizations. Title color for the inactive panel. Use a hex color such as #f5d76e.
  3. Save the file. Press Command+S to save settings.json. Visual Studio Code applies the override on top of the active color theme. Remove the entry to use the theme color again.

Windows

Linux uses the same shortcuts.

  1. Open settings.json. Press Shift+Ctrl+P to open the Command Palette, then run Preferences: Open User Settings (JSON).
  2. Set this color id. Add panel title inactive foreground under workbench.colorCustomizations. Title color for the inactive panel. Use a hex color such as #f5d76e.
  3. Save the file. Press Ctrl+S to save settings.json. Visual Studio Code applies the override on top of the active color theme. Remove the entry to use the theme color again.
{
  "workbench.colorCustomizations": {
    "panelTitle.inactiveForeground": "#f5d76e"
  }
}

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.activeBorder

    Border color for the active panel title.

  • panelTitle.activeForeground

    Title color for the active 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.