Comment modifier les propriétés de style des thèmes GNOME Shell

Les thèmes GNOME Shell (GS) dépendent fortement de CSS pour styliser divers éléments du shell. Un fichier CSS typique inclus dans un thème GS peut avoir des milliers de propriétés. Cet article couvrira certains concepts que vous pouvez utiliser pour peaufiner les thèmes GS existants en créant un nouveau thème qui hérite des valeurs des thèmes d'origine. Si vous connaissez un peu le fonctionnement de CSS, vous pouvez vous appuyer sur les exemples mentionnés ci-dessous pour modifier presque tous les aspects d'un thème GS.

Activation des thèmes de shell GNOME personnalisés

Ubuntu, ainsi que de nombreuses autres distributions basées sur GNOME, n'autorise pas par défaut les thèmes personnalisés créés par l'utilisateur. Pour charger des thèmes utilisateur, une extension GS et un utilitaire de réglages cachés doivent être installés. Vous pouvez installer l'extension requise et l'outil de réglage GNOME dans Ubuntu en exécutant la commande suivante :

$ sudo apt install gnome-shell-extensions gnome-tweaks

Lancez l'application « Tweaks » à partir du lanceur d'applications et accédez à l'onglet « Extensions » dans la barre latérale. Activez l'extension « Thèmes utilisateur », comme indiqué dans la capture d'écran ci-dessous. Assurez-vous que la bascule « Extensions » est activée en haut.

Une fois cette étape terminée, fermez et relancez l'application Tweaks. Maintenant, vous pourrez changer le thème GS à partir de l'onglet "Apparence".

Création des fichiers nécessaires à la personnalisation du thème

Pour personnaliser un thème existant, vous devrez créer un nouveau thème GS qui s'appuie sur le thème d'origine. De cette façon, vous ne pouvez modifier que des parties sélectionnées du thème, sans changer le thème entier. Toute partie intacte du thème original sera conservée telle quelle. L'exécution des commandes ci-dessous créera un nouveau thème personnalisé nommé "mytheme" dans votre répertoire $ HOME.

$ mkdir -p ~/.thèmes/mytheme/gnome-shell/
$ toucher ~/.thèmes/mytheme/gnome-shell/gnome-shell.css

Vous pouvez utiliser n'importe quel éditeur de texte pour entrer vos propres personnalisations dans le "gnome-shell.css" créé en exécutant la commande ci-dessus. Une fois que vous avez entré le code requis, vous pouvez sélectionner le thème « Mytheme » dans le menu déroulant de l'application Tweaks, comme expliqué dans la première section de cet article. Notez que vous devrez vous déconnecter et vous reconnecter pour que les modifications prennent effet. Alternativement, vous pouvez également appuyer sur et entrez "r" dans la zone de saisie contextuelle pour recharger le shell GNOME.

Trouver le fichier CSS de base

Si vous souhaitez utiliser le fichier CSS d'origine comme référence, vous devrez d'abord le trouver et l'extraire. Les thèmes tiers peuvent inclure directement un "gnome-shell.css", le rendant facile à utiliser comme base pour la personnalisation CSS. Cependant, les fichiers système par défaut peuvent inclure "gnome-shell-theme.gresource" à la place. Vous pouvez trouver le thème GS du système par défaut situé dans le chemin "/usr/share/gnome-shell/theme". Dans ce répertoire, vous trouverez le fichier gresource sous un autre dossier du même nom que le thème système par défaut. Dans la dernière version d'Ubuntu, vous trouverez le fichier gresource dans le chemin "/usr/share/gnome-shell/theme/Yaru". Copiez le fichier gresource dans un autre dossier et exécutez la commande suivante :

$ gresource liste gnome-shell-theme.ressource

Après avoir entré la commande ci-dessus, vous recevrez le résultat suivant :

/org/gnome/shell/theme/Yaru-dark/gnome-shell-high-contrast.css
/org/gnome/shell/theme/Yaru-dark/gnome-shell.css
/org/gnome/shell/theme/Yaru/gnome-shell-high-contrast.css
/org/gnome/shell/theme/Yaru/gnome-shell.css
…
…
…

La quatrième ligne de la sortie ci-dessus donne le chemin correct vers le fichier CSS. Pour l'extraire, exécutez une commande au format suivant :

$ gresource extrait gnome-shell-theme.gresource /org/gnome/shell/theme/Yaru/gnome-shell.css
> sortie.css

Vous pouvez maintenant vous référer à la « sortie.css" obtenu ci-dessus et l'utiliser comme base de personnalisation. Quelques exemples de personnalisation CSS sont mentionnés ci-dessous. Ces exemples ne couvrent pas tous les cas d'utilisation mais vous donneront une idée de base sur la façon de procéder. Notez qu'aucune explication ne sera donnée pour les règles CSS mentionnées ci-dessous, car elles dépassent le cadre de cet article. Vous pouvez vous référer à la documentation de référence CSS de W3Schools ou Mozilla pour plus d'informations.

Modification des propriétés de police du thème système

Le code suivant modifiera les propriétés de police du thème système par défaut. Le style de police sera changé en Noto Sans et la taille de la police sera changée en 12 pt.

étape
famille de polices : Noto Sans, sans empattement ;
taille de la police : 12 pt ;

Si vous utilisez un thème GS tiers, vous devrez peut-être d'abord importer son fichier CSS en spécifiant le chemin complet, comme indiqué dans l'exemple ci-dessous :

@import url("chemin/vers/thème.css");
étape
famille de polices : Noto Sans, sans empattement ;
taille de la police : 12 pt ;

Si un fichier CSS n'est pas disponible pour l'importation, vous pouvez l'extraire du fichier gresource, comme expliqué ci-dessus.

Modification de la couleur d'arrière-plan du panneau

Pour changer la couleur d'arrière-plan du panneau en rouge, utilisez le code suivant :

#panneau
couleur de fond : rouge ;

Modification de la largeur de l'interrupteur à bascule

Utilisez le code ci-dessous pour modifier la largeur des boutons bascule :

.interrupteur à bascule
largeur : 100 pixels ;

Conclusion

Avec une certaine connaissance des règles et des propriétés CSS, vous pouvez facilement personnaliser presque tous les aspects d'un thème GS. Cependant, il est important de localiser le bon fichier CSS de base pour l'utiliser comme référence et éviter beaucoup de conjectures.