sideBarTitle.border
side bar title border. Side bar title border color on the bottom, separating the title from the views. The side bar is the container for views like explorer and search.
Group: Side Bar
Where side bar title 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 side bar title 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 side bar title border under workbench.colorCustomizations. Side bar title border color on the bottom, separating the title from the views. The side bar is the container for views like explorer and search. 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 side bar title border under workbench.colorCustomizations. Side bar title border color on the bottom, separating the title from the views. The side bar is the container for views like explorer and search. 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": {
"sideBarTitle.border": "#e8a317"
}
}Other Side Bar
- sideBar.background
Side Bar background color.
- sideBar.foreground
Side Bar foreground color. The Side Bar is the container for views like Explorer and Search.
- sideBar.border
Side Bar border color on the side separating the editor.
- sideBar.dropBackground
Drag and drop feedback color for the side bar sections. The color should have transparency so that the side bar sections can still shine through.
- sideBarTitle.foreground
Side Bar title foreground color.
- sideBarSectionHeader.background
Side Bar section header background color.
- sideBarSectionHeader.foreground
Side Bar section header foreground color.
- sideBarSectionHeader.border
Side bar section header border color.
- sideBarActivityBarTop.border
Border color between the activity bar at the top/bottom and the views.
- sideBarTitle.background
Side bar title background color. The side bar is the container for views like explorer and search.
- sideBarStickyScroll.background
Background color of sticky scroll in the side bar.
- sideBarStickyScroll.border
Border color of sticky scroll in the side bar.
- sideBarStickyScroll.shadow
Shadow color of sticky scroll in the side bar.