Skip to main content
Coding Theme

panelInput.border

panel input border. Input box border for inputs in the panel.

Group: Panel colors

Where panel input border paints

This sample moves from #3c3c3c to #e8a317, then back.

panel input border
panelInput border

How to change panel input border 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 input border under workbench.colorCustomizations. Input box border for inputs in the panel. Use a hex color such as #e8a317.
  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 input border under workbench.colorCustomizations. Input box border for inputs in the panel. Use a hex color such as #e8a317.
  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": {
    "panelInput.border": "#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.activeBorder

    Border color for the active panel title.

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

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