This extension runs on the vscode custom-css extension.
https://github.com/be5invis/vscode-custom-css
- Download and install the Custom CSS and JS Loader extension from the official link: https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css
- Download the latest FileBG .js file here from the releases page
- Add this code to your settings.json (Ctrl+Shift+P -> Open Settings (JSON))
"vscode_custom_css.imports": [
"file:///D:/path/to/FileBG.js",
],- Don't forget to insert your own path to the FileBG.js file on your computer, best in your home folder (for Windows e.g. ´C:\Users<name>\Documents...´) so Custom CSS/JS loader can access it
- Run VSCode with Admin privileges
- Ctrl+Shift+P -> Reload Custom CSS and JS, click Restart
Common Errors:
- There will be a notice that vscode's files have been modified by the CSS loader, you can disable it with the cog and "Don't show again".
- Opening FileBG.js might give a windows warning so try to do it per hand first
- Save FileBG.js somewhere in your home folder (for Windows e.g. C:\Users<name>\Documents...), if you get an error that it can't be loaded
It should work now! If it doesn't try to bugfix the Custom CSS JS loader extension.
Custom background images for languages in vscode. Quick Demonstration:
2021-09-17.18-00-30.mp4
Open FileBG.js from the location you saved it.
FileBG.config = {
default: "https://images.alphacoders.com/985/thumb-1920-985802.png",
plaintext: "https://img5.goodfon.com/wallpaper/nbig/2/28/tsvety-buket-bloknot-1.jpg",
javascript: "https://www.wallpapertip.com/wmimgs/83-838172_programming-javascript.jpg",
json: "https://wallpaperaccess.com/full/1555147.png",
jsonc: "https://wallpaperaccess.com/full/1555147.png",
html: "https://wallpaperaccess.com/full/4868336.jpg",
}
FileBG.opacity = 0.9;For further information on different filetypes look into the Wiki page