Como modificar as propriedades de estilo dos temas de shell gnome

Os temas Gnome Shell (GS) dependem fortemente do CSS para modelar vários elementos do shell. Um arquivo CSS típico incluído em um tema GS pode ter milhares de propriedades. Este artigo abordará alguns conceitos que você pode usar para ajustar os temas GS existentes, criando um novo tema que herda os valores dos temas originais. Se você está um pouco familiarizado com o funcionamento do CSS, pode desenvolver os exemplos mencionados abaixo para mudar quase qualquer aspecto de um tema GS.

Habilitando temas de shell GNOME personalizados

O Ubuntu, juntamente com muitas outras distribuições baseadas em Gnome, não permite temas personalizados fabricados pelo usuário por padrão. Para carregar os temas do usuário, uma extensão GS e um utilitário de ajustes ocultos precisam ser instalados. Você pode instalar a extensão necessária e a ferramenta de ajustes GNOME no Ubuntu executando o seguinte comando:

$ sudo apt install gnome-shell-extensões gnome-tweaks

Inicie o aplicativo "Tweaks" do lançador de aplicativos e vá para a guia "Extensões" na barra lateral. Ative a extensão dos "temas do usuário", conforme mostrado na captura de tela abaixo. Certifique -se de que a alternância de "extensões" esteja ativada no topo.

Depois de terminar esta etapa, feche e relançam o aplicativo Tweaks. Agora, você poderá alterar o tema GS da guia "Aparência".

Criando os arquivos necessários para a personalização do tema

Para personalizar um tema existente, você precisará criar um novo tema GS que se baseie no tema original. Dessa forma, você pode alterar apenas partes selecionadas do tema, sem alterar todo o tema. Qualquer parte intocada do tema original será mantida como está. Executar os comandos abaixo criará um novo tema personalizado chamado "MyTheme" em seu diretório $ home.

$ mkdir -p ~//.Temas/MytheMe/Gnome-Shell/
$ touch ~//.Temas/MytheMe/Gnome-Shell/Gnome-Shell.CSS

Você pode usar qualquer editor de texto para inserir suas próprias personalizações no “Gnome-Shell.Arquivo CSS ”criado executando o comando acima. Depois de inserir o código necessário, você pode selecionar o tema "mytheMe" no menu suspenso no aplicativo Tweaks, conforme explicado na primeira seção deste artigo. Observe que você precisará fazer logon e fazer logon para que as mudanças tenham efeito. Como alternativa, você também pode pressionar e entrar "R" na caixa de entrada pop -up para recarregar o shell Gnome.

Encontrando o arquivo CSS base

Se você deseja usar o arquivo CSS original como referência, precisará encontrá -lo e extraí -lo primeiro. Temas de terceiros podem incluir diretamente um “Gnome-Shell.Arquivo CSS ”, facilitando o uso como base para a personalização CSS. No entanto, os arquivos do sistema padrão podem incluir “o time de gnome-shell.Arquivos Gresource ”em vez disso. Você pode encontrar o tema GS do sistema padrão localizado no caminho "/usr/share/gnome-shell/tema". Dentro deste diretório, você encontrará o arquivo Gresource sob outra pasta do mesmo que o nome do tema do sistema padrão. Na versão mais recente do Ubuntu, você encontrará o arquivo Gresource no caminho "/usr/share/gnome-shell/tema/yaru". Copie o arquivo Gresource para outra pasta e execute o seguinte comando:

$ GRESOURCE LISTA GNOME-SHELL-THEM.Gresource

Depois de entrar no comando acima, você receberá a seguinte saída:

/org/gnome/shell/theme/yaru-duk/gnome-shell-alta contraste.CSS
/org/gnome/shell/tema/yaru-duk/gnome-shell.CSS
/org/gnome/shell/tema/yaru/gnome-shell-alter.CSS
/org/gnome/shell/tema/yaru/gnome-shell.CSS
..
..
..

A quarta linha na saída acima fornece o caminho correto para o arquivo CSS. Para extraí -lo, execute um comando no seguinte formato:

$ GRESOURCE Extrato Gnome-Shell-Them.Gresource/org/gnome/shell/tema/yaru/gnome-shell.CSS
> saída.CSS

Agora você pode se referir à “saída.Arquivo CSS ”obtido acima e use -o como base para personalização. Alguns exemplos de personalização CSS são mencionados abaixo. Esses exemplos não cobrem todos os casos de uso, mas oferecem uma ideia básica de como proceder. Observe que nenhuma explicação será dada para as regras CSS mencionadas abaixo, pois estão além do escopo deste artigo. Você pode consultar a documentação de referência CSS da W3Schools ou Mozilla para obter mais informações.

Alterando as propriedades da fonte do tema do sistema

O código a seguir alterará as propriedades da fonte do tema do sistema padrão. O estilo da fonte será alterado para Noto Sans e o tamanho da fonte será alterado para 12 pt.

estágio
Font-Family: Noto Sans, sem serrif;
tamanho de fonte: 12pt;

Se você estiver usando um tema GS de terceiros, pode ser necessário importar seu arquivo CSS primeiro, especificando o caminho completo, como mostrado no exemplo abaixo:

@import url ("caminho/para/tema.css ");
estágio
Font-Family: Noto Sans, sem serrif;
tamanho de fonte: 12pt;

Se um arquivo CSS não estiver disponível para importação, você poderá extraí -lo do arquivo Gresource, conforme explicado acima.

Alteração da cor de fundo do painel

Para alterar a cor de fundo do painel para vermelho, use o seguinte código:

#Panel
cor de fundo: vermelho;

Alteração da largura do interruptor de alternância

Use o código abaixo para alterar a largura dos botões de alternância:

.interruptor
Largura: 100px;

Conclusão

Com algum conhecimento das regras e propriedades do CSS, você pode personalizar facilmente quase todos os aspectos de um tema GS. No entanto, é importante localizar o arquivo CSS de base correto para usá -lo como uma referência e evitar muitas suposições.