Add a stunning custom background image to your VS Code with an elegant glass and blur effect directly on your code editor.
🚀 Features
- Custom Image: Set any PNG, JPG, or JPEG as your editor background.
- Adjustable Blur: Fine-tune the blur level to maintain your code focus.
- Opacity Control: Darken or lighten the background overlay to ensure optimal code readability.
- One-Click Reload: Instantly applies changes using the built-in action button.
💡 PRO TIP: For the best visual experience, it is highly recommended to use an image with a resolution equal to or higher than your monitor's resolution.
⚙️ How to Setup and Use
⚠️ IMPORTANT: You must run VS Code as ADMINISTRATOR to apply or remove the wallpaper, as this extension writes directly to the core installation CSS files.
- Close VS Code and reopen it by right-clicking the icon and selecting "Run as Administrator".
- Press
Ctrl + Shift + P(orCmd + Shift + Pon Mac) to open the Command Palette. - Search for and execute the command:
Wallpaper: Set Background Image(or the exact title configured in yourpackage.jsonforextensionBackground.setWallpaper). - A file selection window will open. Select your desired image.
- The extension will prompt you with two configuration input boxes:
- Blur Level: Enter a value (e.g.,
0for perfectly sharp,5for medium blur,15for heavy blur). - Background Opacity: Enter a decimal value from
0.0(fully clear image) to1.0(fully solid dark overlay). Recommended value:0.6.
- Blur Level: Enter a value (e.g.,
- A success notification will appear at the bottom right. Click "Reload Now" to see your new background immediately!
🛑 Important Notes & Troubleshooting
- "Installation Appears Corrupted" Warning: After applying the wallpaper, VS Code will display a warning saying "Your Code installation appears to be corrupt. Please reinstall". This is perfectly safe and expected. It occurs because the extension modifies the core CSS layout to unlock true transparency. You can safely hide this message permanently by clicking the gear icon on the notification and choosing to ignore/dismiss it.
- To Remove the Wallpaper: Simply open the Command Palette (
Ctrl + Shift + P), run the remove command (extensionBackground.removeWallpaper), and reload the window.
Custom Background Wallpaper (Glass) - Português
Adicione uma imagem de fundo customizada ao seu VS Code com um efeito elegante de vidro e desfoque (Glass/Blur) diretamente na sua área de código.
🚀 Funcionalidades
- Imagem Customizada: Defina qualquer arquivo PNG, JPG ou JPEG como fundo do seu editor.
- Desfoque Ajustável: Controle o nível de blur para manter o foco total no código.
- Controle de Opacidade: Escureça ou clareie a película sobre a imagem para garantir uma excelente legibilidade.
- Recarregamento Instantâneo: Aplique as mudanças na hora usando o botão de reload embutido na notificação.
💡 DICA DE OURO: Para um melhor resultado visual, é altamente recomendável o uso de imagens com resolução igual ou superior à do seu monitor.
⚙️ Como Configurar e Usar
⚠️ IMPORTANTE: É obrigatório executar o VS Code como ADMINISTRADOR para aplicar ou remover o wallpaper, pois esta extensão precisa de permissões para alterar os arquivos de estilo (CSS) internos da aplicação.
- Feche o VS Code e abra-o novamente clicando com o botão direito no ícone e escolhendo "Executar como Administrador".
- Pressione
Ctrl + Shift + Ppara abrir a Paleta de Comandos. - Busque e execute o comando:
Wallpaper: Set Background Image(ou o nome que configurou no seupackage.jsonparaextensionBackground.setWallpaper). - Uma janela para seleção de arquivos será aberta. Escolha a imagem que deseja usar.
- A extensão exibirá duas caixas de configuração consecutivas no topo do editor:
- Nível de Desfoque (Blur): Digite um valor (ex:
0para imagem nítida,5para desfoque médio,15para desfoque intenso). - Opacidade do Fundo: Digite um valor decimal entre
0.0(imagem totalmente clara) e1.0(fundo totalmente opaco/escuro). O valor ideal recomendado é0.6.
- Nível de Desfoque (Blur): Digite um valor (ex:
- Um balão de sucesso aparecerá no canto inferior direito. Clique em "Reload Now" para ver o seu novo wallpaper instantaneamente!
🛑 Avisos Importantes e Resolução de Problemas
- Aviso de "Instalação Corrompida": Após aplicar a foto, o VS Code exibirá um aviso no canto inferior direito dizendo "Your Code installation appears to be corrupt. Please reinstall". Isto é perfeitamente normal e seguro. O aviso ocorre porque a nossa extensão edita o arquivo CSS nativo do editor para permitir a transparência absoluta. Pode ocultar esta mensagem para sempre clicando na engrenagem da notificação e escolhendo ocultar/ignorar.
- Para Remover o Wallpaper: Pressione
Ctrl + Shift + P, execute o comando de remoção (extensionBackground.removeWallpaper) e recarregue a janela.