ChromaCanvas

Your wallpaper. Your palette. Your workspace.

Personalize Visual Studio Code with your own wallpaper and colors sampled from your image. Preview the look, adjust readability, and give your code a coordinated palette.

Install from the VS Code Marketplace and start customizing. No compiling, Node.js, or terminal commands required.

Get started

1. In VS Code, open Extensions, search for ChromaCanvas, and select Install.
2. Open the Command Palette with Ctrl+Shift+P (Cmd+Shift+P on macOS) and run ChromaCanvas: Open Settings.
3. Select Choose image, then pick a local PNG, JPEG, WebP, or GIF up to 50 MB.
4. Try Focus, Balanced, or Vivid, or adjust the controls yourself.
5. Select Save & apply. Choose Enable Wallpaper for a background behind VS Code, or Code Colors Only for matching syntax colors with the image in the preview.
6. If you enable wallpaper, accept the installation modification after reading the explanation, then select Reload Window when prompted.

Save settings saves your preferences without applying them. You can also turn on Enable wallpaper behind VS Code at the top of Appearance before applying.

Make it yours

• Continuous wallpaper: extend one image across the editor, Explorer, and built-in chat, or limit it to the editor.
• Coordinated colors: match interface text, theme icons, tabs, buttons, and surfaces to your image in full-window mode.
• Code color sync: use related, distinct shades for tags, keywords, strings, functions, numbers, and comments.
• Readable controls: adjust sidebar dimming and floating panel opacity so text remains comfortable to read.
• Live preview: check opacity, blur, image fit, alignment, and tiling before applying.
• Update recovery: optionally restore a previously approved wallpaper after a VS Code update.

Light and dark themes have separate palettes. High-contrast themes retain their colors, and warnings and errors keep their meaning. Images are processed locally.

Installation warning

Full-window wallpaper changes VS Code's workbench HTML because VS Code has no supported API for that background. Enabling it triggers the message “Your Code installation appears to be corrupt.” This is an expected result of the customization; it does not by itself mean your installation is damaged. See Microsoft's explanation.

ChromaCanvas asks before enabling this modification and leaves it off by default. It does not bypass integrity checks or rewrite Microsoft's expected checksums.

• Keep your wallpaper: use the notification's gear menu and choose Don't Show Again if offered. This dismisses the notification for that VS Code build; it does not make the modified installation officially supported. The message may return after an update.
• Restore the original installation: run ChromaCanvas: Restore Original Installation, or use that button under Installation warning help in ChromaCanvas settings, then reload. This removes the wallpaper modification, verifies the original files against VS Code's expected checksums, and turns off automatic wallpaper recovery. Your selected image and code colors are kept.
• Use code colors without the warning: choose Code Colors Only. The image stays in the settings preview, and VS Code's background remains unchanged.

The repair command stops if it cannot verify the original files, rather than overwriting other modifications. A clean VS Code reinstall may be needed if other installation files have changed. Expected checksums are never rewritten.

Tips and compatibility

• Use lower Image visibility over busy images. Increase Sidebar & chat dimming or Floating panel opacity if text is difficult to read.
• Wallpaper changes need Save & apply, then Reload Window. Version 1.0.4 gives each image and appearance change a distinct stylesheet URL so the previous wallpaper is not reused from the resource cache. On Windows, a first-time window-control change can still require a full restart. When removing a wallpaper originally applied by an older version, a restart may be needed once to discard that version's cached stylesheet.
• Desktop VS Code is required. During remote development, ChromaCanvas runs locally and uses images on your computer.
• Full-window mode requires a writable VS Code installation and affects windows sharing that installation.
• Isolated third-party webviews and some specialized views may keep their own backgrounds. VS Code updates can change UI compatibility.
• If an image has moved, use Choose image to select it again. If an update removes the wallpaper, run ChromaCanvas: Apply Wallpaper or enable update recovery in settings.

Remove or switch extensions

Before disabling or uninstalling ChromaCanvas, run ChromaCanvas: Remove Wallpaper / Restore Background and reload. This removes the wallpaper and restores the appearance settings managed by the extension while keeping your selected image and preferences.

If you previously installed Wallpaper Studio, remove its wallpaper, reload, and uninstall it before using ChromaCanvas. Avoid running both extensions together. Existing settings remain compatible.

License

MIT.