surface.background
surface background. Background color of framed container surfaces ("cards"), such as the floating workbench panels in the modern layout.
Group: Modern UI colors
Where surface background paints
This sample moves from #252526 to #1a5276, then back.
How to change surface 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 surface background under workbench.colorCustomizations. Background color of framed container surfaces ("cards"), such as the floating workbench panels in the modern layout. 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 surface background under workbench.colorCustomizations. Background color of framed container surfaces ("cards"), such as the floating workbench panels in the modern layout. 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": {
"surface.background": "#1a5276"
}
}Other Modern UI colors
- surface.foreground
Foreground color of framed container surfaces ("cards"), such as the floating workbench panels in the modern layout.
- surface.border
Border color of framed container surfaces ("cards"), such as the floating workbench panels in the modern layout.
- editor.border
Border color of the editor surface in the modern layout.
- modernPanel.border
Border color of the panel surface when the modern UI is enabled.
- modernSash.gripForeground
Color of the grip handles marking the resizable boundaries between workbench parts when the modern UI is enabled.
- modernTab.activeBackground
Background color of active tabs when the modern tab style is enabled.
- modernTab.activeForeground
Foreground color of active tabs when the modern tab style is enabled.
- modernTab.hoverBackground
Background color of tabs when hovering and the modern tab style is enabled.
- modernTab.hoverForeground
Foreground color of tabs when hovering and the modern tab style is enabled.
- modernEditorTab.activeBackground
Background color of active editor tabs when the modern tab style is enabled.
- modernEditorTab.activeActionBackground
Opaque background color of tab actions on active editor tabs when the modern tab style is enabled.
- modernEditorTab.activeForeground
Foreground color of active editor tabs when the modern tab style is enabled.
- modernEditorTab.inactiveBackground
Background color of inactive editor tabs when the modern tab style is enabled.
- modernEditorTab.hoverBackground
Background color of editor tabs when hovering and the modern tab style is enabled.
- modernEditorTab.hoverActionBackground
Opaque background color of tab actions on editor tabs when hovering and the modern tab style is enabled.
- modernEditorTab.hoverForeground
Foreground color of editor tabs when hovering and the modern tab style is enabled.
- modernEditorTab.activeHoverBackground
Background color of active editor tabs when hovering and the modern tab style is enabled.
- modernEditorTab.activeHoverActionBackground
Opaque background color of tab actions on active editor tabs when hovering and the modern tab style is enabled.
- modernEditorTab.selectedActionBackground
Opaque background color of tab actions on selected editor tabs when the modern tab style is enabled.
- modernActivityBar.background
Background color of the Activity Bar in the default side position when the modern UI is enabled.
- modernActivityBar.inactiveBackground
Background color of the Activity Bar in an inactive window when it is in the default side position and the modern UI is enabled.
- modernActivityBarItem.activeBackground
Background color of active Activity Bar items in the default side position when the modern UI is enabled.
- modernActivityBarItem.activeForeground
Foreground color of active Activity Bar items in the default side position when the modern UI is enabled.
- modernActivityBarItem.hoverBackground
Background color of Activity Bar items in the default side position when hovering and the modern UI is enabled.
- modernActivityBarItem.hoverForeground
Foreground color of Activity Bar items in the default side position when hovering and the modern UI is enabled.
- modernActivityBar.border
Border color of the Activity Bar in the default side position when the modern UI is enabled.
- modernUI.shellBackground
Background color of the shell visible around floating workbench surfaces when the modern UI is enabled.
- modernUI.inactiveShellBackground
Background color of the shell visible around floating workbench surfaces when the window is inactive and the modern UI is enabled.