Neste artigo vou mostrar como você pode colocar uma imagem de fundo no seu Visual Studio Code JUNTO com seu Tema, que por sua vez recomendo o tema de minha autoria https://marketplace.visualstudio.com/items?itemName=stefanycr.stefany-repetcki-theme&ssr=false#overview
:D
Você vai poder colocar a foto que desejar:
PASSO A PASSO
1° BAIXE A EXTENSÃO ( Custom CSS and JS Loader )
2° Crie um arquivo CSS no seguinte path, caso não exista você pode criar as pastas.
C:\Users\SEU-USUARIO\ .vscode\vscode_style
3° Crie um arquivo com o nome vscode_style.css e coloque as seguintes linhas de código dentro deste arquivo de estilo.
body{
pointer-events: auto !important;
background-size: 100% !important;
opacity: 0.90 !important;
background-position: 0 0 !important;
background-image: url('COLOQUE A URL DA SUA IMAGEM AQUI');
content: '';
position: absolute;;
z-index: 999;
width: 100%;
background-repeat: no-repeat;
}
4° Na propriedade background-image troque a frase "COLOQUE A URL DA SUA IMAGEM AQUI" por uma imagem com url, por exemplo, na imagem desejada você copia o endereço e cola dentro do url('');
Ficará desta forma o arquivo css:
body{
pointer-events: auto !important;
background-size: 100% !important;
opacity: 0.90 !important;
background-position: 0 0 !important;
background-image: url('https://media.istockphoto.com/photos/exemplo');
content: '';
position: absolute;;
z-index: 999;
width: 100%;
background-repeat: no-repeat;
}
O Path do seu estilo ficará assim:
C:\Users\SEU-USUARIO.vscode\vscode_style\vscode_style.css
5° Após isso localize em seu vscode o settings.json dele, para facilitar pode dar um Ctrl + P e procurar por >settings
Procure o settings.json da sua IDE
6° Coloque esta estrutura com o caminho do seu arquivo css:
{
"vscode_custom_css.imports":["file:///C:/Users/SEU-USUARIO/.vscode/vscode_style/vscode_style.css"],
}
Obs: o file/// é obrigatório e as barras são / se colocar invertida não funcionará.
7° Por fim você pode dar um CTRL + P novamente e procurar por
Enable custom CSS and JS
8° Reinicie seu vscode para visualizar suas alterações. Se não funcionou verifique todos os passos se deixou algo para trás, como um erro de nomenclatura, sintaxe ou css mesmo. Você pode ficar alterando o seu fundo sempre que desejar neste arquivo css, apenas mudando a url da imagem :D
Espero que tenha ajudado. Abraço da dev tefinha :D
Top comments (2)
Consegui executar na versão instalada no Windows.
Tem como usar também na versão portable?
caso ainda tenha interesse eu sei como fazer. no portable