editorWidget.resizeBorder
editor widget resize border. Border color of the resize bar of editor widgets. The color is only used if the widget chooses to have a resize border and if the color is not overridden by a widget.
Group: Editor widget colors
Where editor widget resize border paints
The outlined area moves from #3c3c3c 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 editor widget resize border 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 editor widget resize border under workbench.colorCustomizations. Border color of the resize bar of editor widgets. The color is only used if the widget chooses to have a resize border and if the color is not overridden by a widget. Use a hex color such as #e8a317.
- 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 editor widget resize border under workbench.colorCustomizations. Border color of the resize bar of editor widgets. The color is only used if the widget chooses to have a resize border and if the color is not overridden by a widget. Use a hex color such as #e8a317.
- 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": {
"editorWidget.resizeBorder": "#e8a317"
}
}Other Editor widget colors
- editorWidget.foreground
Foreground color of editor widgets, such as find/replace.
- editorWidget.background
Background color of editor widgets, such as Find/Replace.
- editorWidget.border
Border color of the editor widget unless the widget does not contain a border or defines its own border color.
- editorSuggestWidget.background
Background color of the suggestion widget.
- editorSuggestWidget.border
Border color of the suggestion widget.
- editorSuggestWidget.foreground
Foreground color of the suggestion widget.
- editorSuggestWidget.focusHighlightForeground
Color of the match highlights in the suggest widget when an item is focused.
- editorSuggestWidget.highlightForeground
Color of the match highlights in the suggestion widget.
- editorSuggestWidget.selectedBackground
Background color of the selected entry in the suggestion widget.
- editorSuggestWidget.selectedForeground
Foreground color of the selected entry in the suggest widget.
- editorSuggestWidget.selectedIconForeground
Icon foreground color of the selected entry in the suggest widget.
- editorSuggestWidgetStatus.foreground
Foreground color of the suggest widget status.
- editorHoverWidget.foreground
Foreground color of the editor hover.
- editorHoverWidget.background
Background color of the editor hover.
- editorHoverWidget.border
Border color of the editor hover.
- editorHoverWidget.highlightForeground
Foreground color of the active item in the parameter hint.
- editorHoverWidget.statusBarBackground
Background color of the editor hover status bar.
- editorGhostText.border
Border color of the ghost text shown by inline completion providers and the suggest preview.
- editorGhostText.background
Background color of the ghost text in the editor.
- editorGhostText.foreground
Foreground color of the ghost text shown by inline completion providers and the suggest preview.
- editorStickyScroll.background
Editor sticky scroll background color.
- editorStickyScroll.border
Border color of sticky scroll in the editor.
- editorStickyScroll.shadow
Shadow color of sticky scroll in the editor.
- editorStickyScrollGutter.background
Background color of the gutter part of sticky scroll in the editor.
- editorStickyScrollHover.background
Editor sticky scroll on hover background color.
- debugExceptionWidget.background
Exception widget background color.
- debugExceptionWidget.border
Exception widget border color.
- editorMarkerNavigation.background
Editor marker navigation widget background.
- editorMarkerNavigationError.background
Editor marker navigation widget error color.
- editorMarkerNavigationWarning.background
Editor marker navigation widget warning color.
- editorMarkerNavigationInfo.background
Editor marker navigation widget info color.
- editorMarkerNavigationError.headerBackground
Editor marker navigation widget error heading background.
- editorMarkerNavigationWarning.headerBackground
Editor marker navigation widget warning heading background.
- editorMarkerNavigationInfo.headerBackground
Editor marker navigation widget info heading background.