clickwithclark / vscode-filebg Goto Github PK

Custom background images for languages in vscode. Quick Demonstration:

This extension runs on the vscode custom-css extension.

https://github.com/be5invis/vscode-custom-css

Added more options to cover different areas of your background. 🎴

• You can only cover your editor area now, for example
• available modes: fullscreen, fullscreen_notitle, editor, editor_extended, panel, sidebar, sidebar_extended

// available modes: fullscreen, fullscreen_notitle, editor, editor_extended, panel, sidebar, sidebar_extended
FileBG.mode = "fullscreen_notitle";

You can choose one of the modes.

1. Download and install the Custom CSS and JS Loader extension from the official link: https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css
2. Download FileBG here or from the releases page
3. Add this code to your settings.json (Ctrl+P -> Open Settings (JSON))

"vscode_custom_css.imports": [
        "file:///D:/path/to/FileBG.js",
],

4. Don't forget to insert your own path to the FileBG.js file on your computer
5. Run VSCode with Admin priviliges
6. Ctrl+P -> Reload Custom CSS and JS, click Restart

It should work now! If it doesn't try to bugfix the Custom CSS JS loader extension.

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;

You can just change the links to the images here. If you want to add your own languages just go into the VSCode devtools (Help -> Toggle Developer Tools) and filter for "FileBG" in the console.

When switching tab to the filetype tab you want to add there should appear the message "Switched to tab with mode xxx" The "xxx" is what the filetype is named in vscode

Example:

"Switched to tab with mode css"

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",
    css: "https://p4.wallpaperbetter.com/wallpaper/285/806/562/css-css3-wallpaper-preview.jpg" // insert this with your image
}

After configuring reload the JS again. (Ctrl+P -> Reload Custom CSS and JS, click Restart)

Finally, have fun! The possibilities for theming are endless and your imagination are the only borders! If you have a nice combination you can gladly showcase it here!