Alterando o fundo de sobreposição escuro nas telas de visão geral de atividades e aplicativos, bem como atrás das caixas de diálogo (Gnome 3)

Compatibilidade de resposta:

Ubuntu 20.04.1,
versão gnome-shell: 3.36.4
servidor de exibição: X.Org Server

O fundo escuro com um gradiente radial vem do lightbox.js da interface do usuário do shell do gnome.

https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/gnome-3-36/js/ui/lightbox.js

Parece haver 3 abordagens:

• via parâmetros (?)
• via substituição de código js, ​​utilizando "sobreposições gresource"
• via css, através da criação de um tema gnome-shell personalizado

Por meio de parâmetros fornecidos ao lightbox.js da interface do usuário do gnome-shell

Eu não sei muito sobre isso. Não encontrei nada relevante em dconf-editor, além de que dois dos três parâmetros interessantes pareciam estar codificados para mim. Então eu fui para o código.

Por meio da substituição do código lighbox.js da interface do usuário do gnome-shell

Alterar o comportamento do lighbox.js afeta não apenas as telas de visão geral da atividade e dos aplicativos, mas também outras caixas de diálogo, como: Executar um comando , Autenticação necessária , Desligar e muito mais.

No Ubuntu 20.04, o arquivo normalmente é empacotado dentro de /usr/lib/gnome-shell/libgnome-shell.so.

Para substituí-lo, é preciso extrair uma cópia dele e pedir ao Gnome para usar essa cópia.

Crie esta estrutura de diretórios e cdlá em um terminal:

~/.gnome-shell-custom-overlays/ui/

# You should be here:
~/.gnome-shell-custom-overlays/ui$

Enquanto estiver neste diretório, faça o seguinte:

# Make a copy of the resource:
cp /usr/lib/gnome-shell/libgnome-shell.so .

# To see all of its contents:
gresource list libgnome-shell.so

# To obtain lightbox.js:
gresource extract libgnome-shell.so /org/gnome/shell/ui/lightbox.js > lightbox.js

# If the extraction was successful, our copy of the resource can
# (probably should?) be removed.
rm libgnome-shell.so

Edite o arquivo lightbox.js; altere as três variáveis ​​próximas ao topo, como segue:

// Old:
//var DEFAULT_FADE_FACTOR = 0.4;
//var VIGNETTE_BRIGHTNESS = 0.5;
//var VIGNETTE_SHARPNESS = 0.7;

// New:
var DEFAULT_FADE_FACTOR = 0.1;
var VIGNETTE_BRIGHTNESS = 0.8;
var VIGNETTE_SHARPNESS = 0.2;

Agora precisamos informar ao Gnome sobre nosso arquivo modificado. Coloque a seguinte linha em ~/.profile:

export G_RESOURCE_OVERLAYS="/org/gnome/shell=$HOME/.gnome-shell-custom-overlays"

O termo "sobreposições" aqui não se refere à sobreposição da caixa de luz; em vez disso, sugere como esse recurso de substituição de recursos do Gnome/GTK funciona.

Nota importante: antes de fazer tudo isso, eu já tinha o libgtk-3-devpacote instalado no meu sistema. É para desenvolvimento / depuração, assim como o recurso de sobreposições de recursos parece ser. Portanto, no momento não posso determinar se respeitar a G_RESOURCE_OVERLAYSvariável de ambiente depende da presença deste pacote ou não... Apenas no caso de estar pronto para instalá-lo...

De qualquer forma: para que as alterações entrem em vigor, saia e faça login novamente.

Ajustes adicionais

Para ver o efeito de mais ajustes nos parâmetros do lightbox, é necessário recarregar o shell do Gnome após cada edição. Isso pode ser feito emitindo o rcomando através da caixa de diálogo Executar comando (revelada por Alt+F2).

Interessante: Na minha experiência, quando se salva o arquivo lightbox.js com um erro de sintaxe, a caixa de diálogo do comando Executar parece não aparecer mais. Mas pode estar "lá", mas não "visível". Nesse caso, proceda como se estivesse lá: corrija a sintaxe e salve o arquivo, pressione Alt+F2, depois r, depois Enter.

Outras considerações importantes sobre o impacto potencial do recurso de sobreposição de recursos na estabilidade do sistema são discutidas nesta resposta .

Referências / literatura:

• Crédito para perguntas/respostas do superusuário
• Referência dos desenvolvedores do Gnome
• Livro de receitas do Gnome no Arch wiki

Via CSS (tema personalizado gnome-shell)

Se você conseguiu substituir lightbox.js, esta parte pode oferecer apenas mais alguns ajustes para aprimorar um pouco mais a experiência.

No entanto, se você não substituiu lightbox.js, esta parte pode oferecer uma solução alternativa adicional com utilidade limitada para as telas de visão geral de Atividade e Aplicativos.

(Além disso, o seguinte foi minha resposta original para o problema, antes que eu pudesse colocar minha mão na substituição de javascript acima.)

Usando temas personalizados do shell do Gnome

O aplicativo Gnome Tweaks, bem como uma extensão do shell do Gnome, "User Themes" (parte do gnome-shell-extensionspacote, disponível via apt install), são necessários para isso.

sudo apt install gnome-tweaks gnome-shell-extensions

Abra o aplicativo Tweaks e ative a extensão "Temas do usuário" na guia "Extensões".

Criando um tema de shell Gnome personalizado

Esta parte não é comprovadamente o melhor método; é só que eu encontrei este caminho.

Crie a seguinte estrutura de diretórios:

~/.themes/my-gnome-shell-theme/gnome-shell/

copie este arquivo (a implementação do tema shell do tema Yaru padrão):

/usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource

para este diretório recém-criado, então você acaba com isso:

~/.themes/my-gnome-shell-theme/gnome-shell/gnome-shell-theme.gresource

Abrindo este diretório no terminal, gresource list gnome-shell-theme.gresourcerevela o conteúdo deste arquivo recém-copiado.

Um script personalizado pode ajudar a extrair todo o conteúdo.

O conteúdo do script poderia ser algo assim, ou melhor (não sou um especialista em scripts bash) (já sei que as pessoas não gostam mais de backticks):

#!/bin/bash

currentdir=$(pwd);

# For regular themes:
# gresource_name="gtk.gresource"
# For shell themes:
gresource_name="gnome-shell-theme.gresource"

for resource in `gresource list ${currentdir}/${gresource_name}`;
do
    echo $resource
    filename=`basename ${resource}`
    gresource extract $currentdir/$gresource_name $resource > $currentdir/$filename
done

Observação: esse script personalizado não reproduz a estrutura de diretórios prescrita no arquivo .gresource; em vez disso, ele coloca os arquivos no diretório de destino (atual) de maneira simples. No entanto, ele imprime a definição de cada recurso que encontra, completa com seu caminho originalmente pretendido/definido. Embora nem sempre pareça ser necessário, em alguns casos (por exemplo, quando ícones quebrados ou fundos de widget são encontrados) pode valer a pena considerar reorganizar os arquivos em uma estrutura de diretório de acordo com o que as definições sugerem. Observe que deixei o arquivo .gresource original no diretório.

Script extrator alternativo: mais scripts desse tipo podem ser encontrados pesquisando a string "do gresource extract" neste site ou em outro lugar na internet.

Depois de executar o script do extrator e, em seguida, garantir rapidamente um backup do arquivo original,

cp gnome-shell.css gnome-shell.css.bak

o arquivo extraído gnome-shell.cssestá pronto para edição.

ferramenta de desenvolvedor gnome-shell

Chama-se Espelho . Ele pode ser ativado emitindo o lgcomando através da caixa de diálogo Executar comando (revelada por Alt+F2).

Ajustes de CSS

As alterações abaixo funcionaram melhor para a cor de fundo da minha área de trabalho monótona; mas com alguns ajustes de cor pode ser útil para qualquer caso.

CSS funciona de tal forma que as definições feitas no final de um arquivo podem substituir as definições escritas anteriormente no mesmo arquivo. É por isso que não é necessário espalhar edições por todo o arquivo; apenas anexar a coisa certa no final faz o trabalho. Isso é o que eu acrescentei gnome-shell.css:

/* Activity-Overview-related */

/* Covers up the dark lightbox overlay with a lighter semi-opaque tone.
   This may be needed only if lightbox.js is not overridden. */

/*
#overview {
    background-color: rgba(210,202,194,0.6);
}
*/

.search-section-content {
    /* This has text on it; for eligibility, keep it more opaque. */
    background-color: rgba(29, 29, 29, 0.5);
}
.workspace-thumbnails {
    /* Plain background area, may be pretty transparent. */
    background-color: rgba(29, 29, 29, 0.25);
}

/* A less harsh workspace-switcher popup. */

.workspace-switcher-container {
    background-color: rgba(100, 96, 92, 0.45);
    border-radius: 10px;
}
.ws-switcher-active-up,
.ws-switcher-active-down,
.ws-switcher-active-left,
.ws-switcher-active-right {
    background-color: rgba(215, 86, 41, 0.8);
    border: 1px solid #cc4414;
    border-radius: 5px;
    color: #ffffff; }

/* Misc. */

.switcher-list, .osd-window, .resize-popup {
    /* A bit softer Alt+Tab popup.
     * This has text on it; for eligibility, keep it more opaque. */
    background-color: rgba(100, 96, 92, 0.85);
}

Ativando o tema personalizado

Na guia "Aparência" do aplicativo Tweaks, na seção "Temas", há um campo chamado "Shell". O novo tema personalizado deve estar disponível no widget de seleção. Lembre-se, para que este widget esteja ativo, a extensão do shell do Gnome "Temas do usuário" precisa estar ativada.

Fazendo modificações CSS para entrar em vigor

Método 1: Emitir o rcomando por meio da caixa de diálogo Executar comando (revelada por Alt+F2) recarrega o shell; ele também deve pegar as novas mudanças de CSS.

Método 2: alternar entre os temas de shell padrão e personalizados parecia ser mais suave e gracioso em comparação com o Método 1. A alternância de temas pode ser obtida na interface do usuário do aplicativo Tweaks ou gsettingsno cli, da seguinte maneira:

# For resetting to default, the argument can apparently be either
# an empty string: '' or: default.
gsettings set org.gnome.shell.extensions.user-theme name ''

# The custom theme's name is the name of its directory in ~/.themes/
gsettings set org.gnome.shell.extensions.user-theme name my-gnome-shell-theme

Recuperação de um tema personalizado confuso

Se necessário, é possível voltar ao tema padrão executando o gsettings setcomando acima em um console virtual (por exemplo, Ctrl+Alt+F3) (sem a necessidade de iniciar uma sessão gráfica).