Add multiple background images for the window, editors, sidebars, or the panel. Load backgrounds from file, glob, or URL. Transition between multiple background images.
katsute.code-background
.Background: Configuration
in the command pallette or press the Background tab in the statusbar.Background: Install
or press the install button.Add background images for the whole window, editors, sidebars, or the panel. Transition between multiple background images.
Type Background: Configuration
in the command pallette or press the Background tab in the statusbar to access the configuration menu.
Add background images by file, folder, glob, or URL.
⚠️ Use only
/
for directoriesnode-glob only accepts
/
as path separators,\
is reserved for escape characters.
Command | Description |
---|---|
Background: Install | Installs and enables the background. |
Background: Uninstall | Uninstalls and disables the background. |
Background: Reload | Randomizes the backgrounds. Background must already be installed. |
Background: Configuration | Opens the configuration menu. |
Use the Background: Configuration
command to access the configuration menu.
Background properties are saved as arrays so you can have different options for different UI elements.
The order settings are saved in is:
Background | Type | Description |
---|---|---|
background.windowBackgrounds | string[] | The list of files or globs to use for the window background image. |
background.editorBackgrounds | string[] | The list of files or globs to use for editor background images. |
background.sidebarBackgrounds | string[] | The list of files or globs to use for the sidebar background images. |
background.panelBackgrounds | string[] | The list of files or globs to use for the panel background image. |
Property | Type | Description |
---|---|---|
background.backgroundAlignment | enum[4] | The alignment of the background image. |
background.backgroundAlignmentValue | string[4] | If the background image alignment is set to Manual , this is the literal value for the background-position css property. Only accepts a css <position>. |
background.backgroundBlur | string[4] | Background image blur. Only accepts a css <length>. |
background.backgroundOpacity | number[4] | The UI opacity. 0 is fully visible and 1 is invisible. |
background.backgroundRepeat | enum[4] | The background image repeat. |
background.backgroundSize | enum[4] | The background image size. |
background.backgroundSizeValue | string[4] | If the background image size is set to Manual , this is the literal value for the background-size css property. Only accepts a css <position>. |
background.backgroundChangeTime | number[4] | How long in seconds before the background should automatically change. Set to 0 to always use the same image. |
Advanced | Type | Description |
---|---|---|
background.useWindowOptionsForAllBackgrounds | boolean | If enabled, all background images will use the options set for the windows background. This does not include the backgrounds, you still need to add background images separately. |
background.renderContentAboveBackground | boolean | If enabled, content like images, pdfs, and markdown previews will render above the background. |
background.smoothImageRendering | boolean | If enabled, use smooth image rendering rather than pixelated rendering when resizing images. |
background.CSS | string | Apply raw CSS to VSCode. |
This extension doesn’t natively support Mac, please refer to #76 to get this extension working on Mac.
Applications installed using snap are inherently read-only, install VSCode using deb or rpm.
As described in #27, you can not change the background while running this extension in a remote WSL window. You can however still use custom backgrounds by installing and making changes in the main VSCode window, then opening a remote WSL window.
This extension modifies an internal file to make backgrounds work, if VSCode stops working replace %LocalAppData%\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.js
with workbench.desktop.main-backup.js
.
This extension also modifies %LocalAppData%\Programs\Microsoft VS Code\resources\app\product.json
, replace with product-backup.json
if VSCode stops working.
This extension is released under the GNU General Public License (GPL) v2.0.
The only background extension that supports glob. Add multiple background images for the window, editors, sidebars, or the panel. Created as an improved alternative to existing background extensions.