sideBySideEditor.verticalBorder
side by side editor vertical border. Color to separate two editors from each other when shown side by side in an editor group from left to right.
Group: Editor Groups & Tabs
Where side by side editor vertical border paints
This sample moves from #3c3c3c to #e8a317, then back.
How to change side by side editor vertical 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 by side editor vertical border under workbench.colorCustomizations. Color to separate two editors from each other when shown side by side in an editor group from left to right. 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 by side editor vertical border under workbench.colorCustomizations. Color to separate two editors from each other when shown side by side in an editor group from left to right. 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": {
"sideBySideEditor.verticalBorder": "#e8a317"
}
}Other Editor Groups & Tabs
- editorGroup.border
Color to separate multiple editor groups from each other.
- editorGroup.dropBackground
Background color when dragging editors around.
- editorGroupHeader.noTabsBackground
Background color of the editor group title header when using single Tab (set `"workbench.editor.showTabs": "single"`).
- editorGroupHeader.tabsBackground
Background color of the Tabs container.
- editorGroupHeader.tabsBorder
Border color below the editor tabs control when tabs are enabled.
- editorGroupHeader.border
Border color between editor group header and editor (below breadcrumbs if enabled).
- editorGroup.emptyBackground
Background color of an empty editor group.
- editorGroup.focusedEmptyBorder
Border color of an empty editor group that is focused.
- editorGroup.dropIntoPromptForeground
Foreground color of text shown over editors when dragging files. This text informs the user that they can hold shift to drop into the editor.
- editorGroup.dropIntoPromptBackground
Background color of text shown over editors when dragging files. This text informs the user that they can hold shift to drop into the editor.
- editorGroup.dropIntoPromptBorder
Border color of text shown over editors when dragging files. This text informs the user that they can hold shift to drop into the editor.
- tab.activeBackground
Active Tab background color in an active group.
- tab.unfocusedActiveBackground
Active Tab background color in an inactive editor group.
- tab.activeForeground
Active Tab foreground color in an active group.
- tab.border
Border to separate Tabs from each other.
- tab.activeBorder
Bottom border for the active tab.
- tab.selectedBorderTop
Border to the top of a selected tab. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.
- tab.selectedBackground
Background of a selected tab. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.
- tab.selectedForeground
Foreground of a selected tab. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.
- tab.dragAndDropBorder
Border between tabs to indicate that a tab can be inserted between two tabs. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.
- tab.unfocusedActiveBorder
Bottom border for the active tab in an inactive editor group.
- tab.activeBorderTop
Top border for the active tab.
- tab.unfocusedActiveBorderTop
Top border for the active tab in an inactive editor group
- tab.lastPinnedBorder
Border on the right of the last pinned editor to separate from unpinned editors.
- tab.inactiveBackground
Inactive Tab background color.
- tab.unfocusedInactiveBackground
Inactive Tab background color in an unfocused group
- tab.inactiveForeground
Inactive Tab foreground color in an active group.
- tab.unfocusedActiveForeground
Active tab foreground color in an inactive editor group.
- tab.unfocusedInactiveForeground
Inactive tab foreground color in an inactive editor group.
- tab.hoverBackground
Tab background color when hovering
- tab.unfocusedHoverBackground
Tab background color in an unfocused group when hovering
- tab.hoverForeground
Tab foreground color when hovering
- tab.unfocusedHoverForeground
Tab foreground color in an unfocused group when hovering
- tab.hoverBorder
Border to highlight tabs when hovering
- tab.unfocusedHoverBorder
Border to highlight tabs in an unfocused group when hovering
- tab.activeModifiedBorder
Border on the top of modified (dirty) active tabs in an active group.
- tab.inactiveModifiedBorder
Border on the top of modified (dirty) inactive tabs in an active group.
- tab.unfocusedActiveModifiedBorder
Border on the top of modified (dirty) active tabs in an unfocused group.
- tab.unfocusedInactiveModifiedBorder
Border on the top of modified (dirty) inactive tabs in an unfocused group.
- editorPane.background
Background color of the editor pane visible on the left and right side of the centered editor layout.
- sideBySideEditor.horizontalBorder
Color to separate two editors from each other when shown side by side in an editor group from top to bottom.