Vscode: Tornar a janela do VSCode transparente

Criado em 25 set. 2016  ·  89Comentários  ·  Fonte: microsoft/vscode

  • Versão do VSCode: 1.5.3
  • Versão do SO: Atualização de aniversário do Windows 10

    Solicitação de recurso

Seria ótimo se pudéssemos tornar a janela do VSCode transparente, usando uma porcentagem.

Isso foi discutido no StackOverflow em junho.

http://stackoverflow.com/questions/38031369/how-to-make-ms-visual-code-transparent

Saúde,
Trevor Sullivan
Capitão estivador
Microsoft MVP: gerenciamento de nuvem e data center
https://trevorsullivan.net
https://twitter.com/pcgeek86

*out-of-scope feature-request layout upstream

Comentários muito úteis

Confirmando que a extensão "Glassit-VSC" para Visual Studio Code (no Windows) funciona muito bem.
2017-10-12 14_17_45-

Todos 89 comentários

Isso pode exigir a API do Electron, configurando assim para upstream.

Parece que a configuração de "vibração" para o macOS cobriria isso no Electron: https://github.com/electron/electron/blob/master/docs/api/browser-window.md#winsetvibrancytype -macos

O suporte para ele acabou de ser adicionado ao aplicativo do terminal Hyper que também usa Electron: https://github.com/zeit/hyper/releases/tag/1.0.0

Espero que esse recurso apareça em breve

Esse recurso é muito útil para executar o teste automático atrás da janela durante o TDD.

Estou morrendo de vontade de ter essa funcionalidade - isso ajudaria a criar interfaces de usuário sem alternar constantemente os aplicativos.

Definitivamente, um código vs deve ter. Dessa forma, poderíamos conseguir isso: https://github.com/Microsoft/vscode/issues/32257

Jonathan Perez gostou do seu e-mail
Spark por Readdle

Adoraria o mesmo para o Mac OS também.

+1

👍 parece que alguém fez um plugin transparente para windows, mas o mac ainda não conseguiu uma solução. https://marketplace.visualstudio.com/items?itemName=s-nlf-fh.glassit

-- Desculpe pelo inglês, usei o Google Translator --

Experimentando a extensão. 😄 Obrigado @webdevbrian . 👍

Confirmando que a extensão "Glassit-VSC" para Visual Studio Code (no Windows) funciona muito bem.
2017-10-12 14_17_45-

@MikePaer Eu realmente espero que esteja disponível para MacOs ... atualmente ainda não está funcionando :)

+1 Nós SOOOOOOOO precisamos disso no OSX.

Talvez até uma opção para definir apenas o explorer e não a parte do código também?
+1

para usuários do OSX, https://github.com/rwu823/afloat que tem uma opção de transparência funciona com o vscode, só que em algum momento o menu afloat desaparece, então você precisa ativá-lo quando o vscode for iniciado

Alguém conhece uma solução para isso no linux?

@okinskas Você pode dar ao VSCode transparência total da janela no Linux com devilspie no Xorg. Meu ~/.devilspie/opacity.ds fica assim:

( if
( contains ( window_class ) "Code" )
( begin
( spawn_async (str "transset-df -i " (window_xid) " 0.95" ))
)
)

@SamHH Funciona muito bem, obrigado!

@SamHH que não funcionou para mim :/ Tenho que reiniciar o computador ou algo assim? Eu corri devilspie -a e quando abro o VSCode, ele diz Set Property to 0.95 , mas nada muda ...

@lucasqueiroz Verifique o link no meu comentário (Arch Wiki é um recurso _excelente_ para Linux), você está executando um compositor? Eu, por exemplo, estou executando o Compton.

Este problema é uma duplicata de #32257?

Este recurso estará disponível para usuários linux, aguardando ansiosamente pelo recurso.

Muito bom, a extensão Glassit funciona lindamente no Windows 10.

MacOS aqui, este é um recurso que estou esperando. 👍

Ainda aguardando suporte nativo de transparência no vscode :)
Opções:

  • transparência de fundo (sem texto - porque o mais importante aqui é a codificação, e para tornar isso amigável, definitivamente precisamos ver o código da melhor maneira possível em primeiro lugar, e depois nos divertir usando o ambiente vscode - e, claro, para diferentes partes do aplicativo como: terminal, explorer, menu, menu lateral...)
  • transparência de texto (acho que haverá alguns que usarão isso também)
  • efeito de vibração (isso não funcionará em todos os lugares, no entanto, por que não deixar aqueles que estão prontos para o software, basta tê-lo)

TextMate2 permite a especificação RGBA em seus temas. Eu acho que seria uma boa maneira de lidar com isso no VSCode, uma vez que o suporte chega ao upstream, permitindo que os autores do tema façam o que quiserem para estilizar os valores alfa junto com todo o resto.

Enquanto isso estou usando a tona no OSX. É um pouco complicado, pois os menus do afloat desaparecem quando o VSCode altera a estrutura do menu, mas você pode ativar a transparência quando o VSCode é iniciado pela primeira vez.

Será bom se o VSC tiver um recurso de transparência, como o gnome-terminal. Apenas fundo transparente, o texto não é transparente.

KDEName

+1 para adicionar isso ao OSX.

Modifiquei o código @SamHH para acionar o efeito blur no kde, dá um resultado muito bom com o novo blur no plasma 5.13! Descobri que, por algum motivo, o transset-df não estava funcionando no meu sistema, então usei uma regra kwin para definir a opacidade.

( if
( contains ( window_class ) "Code" )
( begin
( spawn_async (str "xprop -f _KDE_NET_WM_BLUR_BEHIND_REGION 32c -set _KDE_NET_WM_BLUR_BEHIND_REGION 0 -id " (window_xid) ))
)
)

screenshot_20180709_135708

Para usuários de Linux, encontrei esta solução

Precisava de uma reinicialização, mas funciona perfeitamente para o Ubuntu 16.04

Podemos ter apenas um terminal transparente?

@lloydjatkinson que pode ser possível com CSS personalizado, pelo menos para mostrar o editor por baixo.

MacOS aqui também!
Precisa desesperadamente desse recurso!

PRECISA ISTO COMO iTerm2.

OSX aqui, fundos transparentes são muito comuns no Mac OS, até mesmo aplicativos do sistema como o finder o usam. Por favor, faça isso ❤

MacOS aqui também!
Eu adoraria esse recurso, uma das coisas que a maioria dos editores de texto esquece. Esse recurso pode me tornar um usuário vitalício.

Um pedido de implementação para quem quiser trabalhar neste recurso: Textmate permite cores RGBA em arquivos de tema, o que permite que cada parte da interface tenha seus próprios valores de opacidade. (O Sublime Text 3 também permite isso, mas da última vez que tentei, ele ignora os valores alfa.)

Enquanto isso no OSX estou usando este fork do afloat: https://github.com/w0lfschild/afloat . Ele contém uma correção que fiz para atrasar a instalação dos itens de menu extras relacionados aos recursos do afloat, o que o faz funcionar em mais situações do que antes.

Não é perfeito de forma alguma. Afloat é um pouco chato de instalar no OSX devido à Proteção de Integridade do Sistema e, se o aplicativo reescrever os menus, o plug-in afloat não percebe e, portanto, os controles de transparência desaparecerão até que o aplicativo seja reiniciado.

Apoiar a transparência diretamente no editor ajudaria muito. Acho que fundos transparentes são um problema de acessibilidade para mim – meus olhos ficam muito mais felizes com um fundo fraco aparecendo e eu termino o dia sentindo menos cansaço visual. Também é bonito, e quem não quer um ambiente de trabalho bonito? :-)

Este script devilspie deve funcionar para usuários do Ubuntu 18.04.

( if
( contains ( window_class ) "Code" )
( begin
( spawn_async (str "xprop -id " (window_xid) " -f _NET_WM_WINDOW_OPACITY 32c -set _NET_WM_WINDOW_OPACITY 0xdfffffff") )
)
)

Por favor, suporte isso para macOS 🤞

Obrigado a @ikbelkirasan . Funciona muito bem no Ubuntu 18.04.
Eu tenho -set _NET_WM_WINDOW_OPACITY 0xd0000000 em vez de -set _NET_WM_WINDOW_OPACITY 0xdfffffff. Minha tela de código parece muito clara agora
screenshot from 2018-10-26 05-49-12

Por favor, suporte isso para macOS 🤞

+1 para suporte ao macOS

Obrigado a @SamHH
Aqui está minha captura de tela do vscode em uma máquina Linux. Plasma KDE (desfoque) + devilspie + vscode

vscode_blur

E, a seguir está meu script ~/.devilspie/vscode.ds .

(if (contains (window_class) "Code")
    (begin
        (spawn_async (str "xprop -id " (window_xid) " -f _KDE_NET_WM_BLUR_BEHIND_REGION 32c -set _KDE_NET_WM_BLUR_BEHIND_REGION 0 "))
        (spawn_async (str "xprop -id " (window_xid) " -f _NET_WM_WINDOW_OPACITY 32c -set _NET_WM_WINDOW_OPACITY 0xdfffffff"))
    )
)

Precisamos dele em macOs, assim como iTerm2

Este é um PR muito básico que permite a vibração no macOS Mojave: https://github.com/Microsoft/vscode/pull/65215 😃

Parece que vai entrar na versão oficial!

#52707

@webispy @lunarfyre7 Alguma idéia de por que não consigo fazê-lo funcionar? Tecnicamente, estou usando o VSCodium, que é um fork FOSS do VSCode, mas fora isso não vejo por que não está funcionando para mim. Usando o KDE Neon

@BrianD91 Por favor, verifique sua configuração do KDE.
https://www.reddit.com/r/unixporn/comments/9un99u/kde_plasma_do_you_need_so_more_blur/

Você pode conseguir isso com compton, basta adicionar
regra de opacidade = [
"94:class_g = 'Código'"
]
Aqui está o resultado

2019-01-25_22-26-47
Uploading 2019-01-25_22-28-25.jpg…

@vkubre

Parece que eu preciso iniciar o compton depois que o código já estiver em execução, não parece funcionar de outra forma. Por exemplo: start code; then start compton; (code is transparent); close code; start code; (code is not transparent) .

No entanto, parece ótimo e após a configuração inicial funciona perfeitamente. Obrigado por isso.

Editar: Parece corrigir-se após a reinicialização sem necessidade de configuração manual adicional.

Oi, cara, eu sou um usuário de Mac e não tenho informações suficientes sobre o uso de elétrons ou outras coisas. Baixei o vs code hoje. E eu quero tornar o fundo do código vs transparente como você fez no post. Já tentei acessar a pasta src/vs/ mas infelizmente não consegui. Não há nenhum vídeo para torná-lo transparente. Como não sei como reconstruir o código vs, não consegui tornar o código vs transparente. POR FAVOR, POR FAVOR, faça um tutorial em vídeo do iniciante ao fim sobre como tornar o código vs transparente. Parece fácil para você fazer isso, mas tenho certeza que é muito difícil para um programador iniciante como eu. Espero que você me responda. Tenha um bom dia

Você pode conseguir isso com compton, basta adicionar
regra de opacidade = [
"94:class_g = 'Código'"
]
Aqui está o resultado

Aqui está para o usuário de código interno:

opacity-rule =
[
    "70:class_g = 'Code - Insiders'"
];

@webispy @lunarfyre7 Alguma idéia de por que não consigo fazê-lo funcionar? Tecnicamente, estou usando o VSCodium, que é um fork FOSS do VSCode, mas fora isso não vejo por que não está funcionando para mim. Usando o KDE Neon

@BrianD91 Você pode estar interessado nisso:
https://github.com/sergei-dyshel/vscode/blob/master/README.fork.md

As soluções do devilspie funcionam, mas como altero a opacidade para 51% em vez do valor fornecido usando o código hexadecimal?

Eu procuraria uma implementação mais adequada, pois apenas dizer ao seu compositor para aplicar transparência e desfoque se aplica a todos os elementos igualmente, incluindo fontes, isso precisa ser uma coisa interna, mas essa captura de tela parece boa :+1:

@StarrKiss

mas como faço para alterar a opacidade para 51%

https://dev.to/emmanuelnk/how-to-be-cool-and-make-vscode-transparent-56ib

@BobbyBabes Não, eu entendi. Para desfoque no KDE, ele só funciona com código hexadecimal. Como alterar o valor do código hexadecimal para 51? Eu tentei conversores de código hexadecimal e substituindo os números no início e no final e nada resolve.

Atualizar com compton: Apenas ter transparência com compton às vezes torna o código mais difícil de ler. Você pode usar este fork para usar as opções de desfoque também.

Tema Material:
2019-06-17_08-29-53

1984 Tema:
2019-06-17_08-32-48

@StarrKiss

@BobbyBabes Não, eu entendi. Para desfoque no KDE, ele só funciona com código hexadecimal. Como alterar o valor do código hexadecimal para 51? Eu tentei conversores de código hexadecimal e substituindo os números no início e no final e nada resolve.

Está no artigo. O exemplo do escritor para 87% ( EDIT: veja a terceira caixa de código a partir do topo.):

-set _NET_WM_WINDOW_OPACITY $(printf 0x%x $((0xffffffff * 87 / 100))

Então para 51% fica:
-set _NET_WM_WINDOW_OPACITY $(printf 0x%x $((0xffffffff * 51 / 100))

@WillPower3309 existe uma versão de produção pronta (debnappimage,snap)?

@annymosse inseguro, acabei de contribuir com o readme. Pode ser compilado a partir da fonte, mas eu entraria em contato com @coler706

obrigado @WillPower3309 , sou mais novo no docker wold e no GitHub também, mas com minha pouca experiência, o yjink tarvisCLI pode fazer isso automaticamente a cada nova alteração (se não), (certamente) o docker pode fazer isso porque quero manter meu disto limpe o máximo que puder para a estabilidade.

Se você estiver executando o Linux, achei o devilspie muito útil e fiz um vídeo sobre ele.
Também encontrei uma pequena fórmula que ajuda a definir uma % de transparência

Espero que isto ajude!
https://youtu.be/PzObHq72Vug

@marcel-dempers não é uma boa solução que não podemos personalizar a parte do código vs separada, como essas imagens tema de janela vibrante

Esta questão está sendo encerrada para manter o número de questões em nossa caixa de entrada em um nível gerenciável, estamos encerrando questões que não serão abordadas em um futuro próximo: Observamos o número de votos que a questão recebeu e o número de questões duplicadas arquivadas. Mais detalhes aqui . Se você discordar e achar que esta questão é crucial: Estamos felizes em ouvir e reconsiderar.

Se você se pergunta o que estamos fazendo, consulte nosso roteiro e diretrizes de relatórios de problemas .

Obrigado pela sua compreensão e boa codificação!

Se você estiver executando o Linux, achei o devilspie muito útil e fiz um vídeo sobre ele.
Também encontrei uma pequena fórmula que ajuda a definir uma % de transparência

Espero que isto ajude!
https://youtu.be/PzObHq72Vug

Funciona no Elementary OS 5.0 Juno

Usar a transparência Devilspie ou compton é apenas uma grande solução alternativa que resulta na aplicação do mesmo nível de transparência a tudo de uma vez, o que provavelmente está longe do desejado para muitas pessoas que solicitam suporte à opacidade. Precisamos de uma maneira de tornar transparente apenas um elemento específico sem aplicá-lo a outros elementos. Por exemplo, você pode querer que seu plano de fundo do VSCode seja totalmente transparente sem afetar seu código/texto no processo.

Eu configurei atalhos de teclado para esses dois comandos no Ubuntu para tornar qualquer janela geral transparente. No entanto, gostaria de controlar a transparência de áreas individuais na interface do VSCode.

transset --inc .05 -a
transset --dec .05 -a -m .6

Parece que vai entrar na versão oficial!

52707

Um ano depois

Hah, e acabei de lançar um GlassIt para Linux: https://marketplace.visualstudio.com/items?itemName=nowsci.glassit-linux

@Fmstrat torna toda a janela transparente, o que é capaz de obter esse efeito sem o seu ext, o objetivo principal é tornar alguma parte transparente https://github.com/microsoft/vscode/issues/32257 ou visualização da imagem

@annymosse Ah, sim, ter suporte nativo ao fade é muito melhor, mas a MS afirmou que não se fundirá em alterações focadas em elétrons.

@vegerot Parece que o PR foi fechado e não será mesclado.

@Fmstrat parece que a equipe do MS ainda está contra os usuários do Linux e não desiste, para fazer os usuários voltarem para o Windows, a verdade é "SOMOS LIVRES PARA USAR QUALQUER SISTEMA QUE GOSTARÍAMOS" a liberdade de nossas mentes fazendo este mundo ilimitado, o WINDOWS & MAC os alcançou no fim da vida útil e não na obrigação de desperdiçar dinheiro por um sistema desconfortável.

@Fmstrat parece que a equipe do MS ainda está contra os usuários do Linux e não desiste, para fazer os usuários voltarem para o Windows, a verdade é "SOMOS LIVRES PARA USAR QUALQUER SISTEMA QUE GOSTARÍAMOS" a liberdade de nossas mentes fazendo este mundo ilimitado, o WINDOWS & MAC os alcançou no fim da vida útil e não na obrigação de desperdiçar dinheiro por um sistema desconfortável.

Bem, ninguém está apontando uma arma para você usar o VSCode no Linux. Com muitos outros editores, já que é tudo de código aberto e todo esse jazz, você está livre para não usar o VSCode e deixar os usuários do Windows felizes com um sistema operacional tão bom.

parece que o Windows é sua casa e a equipe é sua família, então eu não os machuquei afinal essa é minha visão e eu tenho a liberdade de explicar minhas opiniões sob o respeito, MS & Apple são empresas comerciais, pois têm a liberdade de anuncie os produtos (mesmo com alguns serviços falsos como eles fornecem), pois temos o direito de dizer a verdade de nossa experiência ruim.
Desculpe aos usuários do Windows "Eu não estou apontando uma arma para suas cabeças" e Linux não é minha empresa e todas as pessoas sabem que o Linux é uma organização gratuita e sem fins lucrativos.
@darkguy2008 seja um coração branco, não importa a cor da sua pele, estamos aqui para fazer um mundo bom e uma vida simples com nossas mentes, não com nossa força e armas.
este problema relacionado ao recurso de transparência em plataformas cruzadas para não atirar uns nos outros.

Ei!
Eu uso o Arch Linux onde tenho usado o picom para transparência e efeito de desfoque. Funciona para vs studio/code oss. Ouvi dizer que o compton-tryone fornece kawase blur que não está disponível no picom no momento.

@monikaprajpt Picom é um fork de compton, que é um fork de xcompmgr-dana, que por sua vez é um fork de xcompmgr.
todos eles afetam o processo e você não pode personalizar cada parte do editor como:transparent image effect
então o resultado desses hacks torna o código de texto não legível como esta imagemtransparent and vibrant porque essas soluções afetam o processo em vez dos elementos.

@monika-prajapati FYI: https://github.com/yshui/picom/pull/382 @tryone144 está trabalhando na integração para picom

@monika-prajapati FYI: yshui/picom#382 @tryone144 está trabalhando na integração para picom

Isso irá desfocar, mas o afaik ainda requer transparência no final do vscode

Realmente gostaria que pudéssemos ajustar a transparência de cada elemento no Arch ...

@Boss-U Meu fork funciona perfeitamente bem no arco com KDE plasma kwin e outros compositores de desfoque!
https://github.com/ckissane/vscode
e ao contrário do glassit ele mantém o texto com total opacidade

@Boss-U @ckissane Caramba:

This branch is 10 commits ahead, 8736 commits behind microsoft:master. 

Lol sim, vou mesclar o mestre do vscode em

@Fmstrat @Boss-U agora são 12 commits à frente 0 atrás

Olá a todos,
Não tenho certeza se seria útil, mas só queria sugerir esse utilitário leve chamado WndowTop para usuários do Windows10. (https://windowtop.info/) Experimente e pode tornar qualquer janela de editor de código/texto (incluindo vscode) transparente em pouco tempo. Custa $ 5,99 para três peças. Eu sei que não é o mesmo que ter essa funcionalidade embutida no vscode, mas funciona bem para mim no Wondows10. Então, pensei em compartilhar.

𝗥𝗘𝗢𝗣𝗘𝗡 𝗧𝗛𝗘 𝗙𝗘𝗔𝗤𝗨𝗥𝗘 𝗥𝗘𝗤𝗨𝗘𝗦𝗧 𝗣𝗟𝗘𝗔𝗦𝗘!!!

Esta questão está sendo encerrada para manter o número de questões em nossa caixa de entrada em um nível gerenciável, estamos encerrando questões que não serão abordadas em um futuro próximo: Observamos o número de votos que a questão recebeu e o número de questões duplicadas arquivadas. Mais detalhes aqui . Se você discordar e achar que esta questão é crucial: Estamos felizes em ouvir e reconsiderar.

Se você se pergunta o que estamos fazendo, consulte nosso roteiro e diretrizes de relatórios de problemas .

Obrigado pela sua compreensão e boa codificação!

Você ainda precisa de um ano para reconsiderar?

Esta página foi útil?
0 / 5 - 0 avaliações