panelSection.dropBackground
panel section drop background. 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.
Group: Panel colors
Where panel section drop background paints
This sample moves from #252526 to #1a5276, then back.
How to change panel section drop background color in Visual Studio Code
macOS
- Open settings.json. Press Shift+Command+P to open the Command Palette, then run Preferences: Open User Settings (JSON).
- Set this color id. Add panel section drop background under workbench.colorCustomizations. 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. Use a hex color such as #1a5276.
- 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.
- Open settings.json. Press Shift+Ctrl+P to open the Command Palette, then run Preferences: Open User Settings (JSON).
- Set this color id. Add panel section drop background under workbench.colorCustomizations. 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. Use a hex color such as #1a5276.
- 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": {
"panelSection.dropBackground": "#1a5276"
}
}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.
- 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.
- 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.