Drupal 8 & Drupal 9 - Thème Gin - ajouter une feuille de style personnalisée

Gin est mon thème backoffice coup de coeur de ces derniers mois, il donne un coup de fouet au backoffice de drupal !

Gin

 Thème  Backoffice

Gin est un thème backoffice « moderne » qui intègre un mode dark.

En cours de test de mon côté, pour l'instant je suis convaincu, on verra si ça tiens dans la durée.

Modules additionnels recommandés :

• gin_toolbar : Fournir une toolbar optimisée pour le thème
• gin_login : Un bel écran de connexion !

• Lire la suite de Gin

Il est possible de lui adjoindre une feuille de style css pour surcharger quelques propriétés sans avoir à lui créer un thème enfant, très pratique !

Pour cela rien de plus simple, il suffit de créer un fichier gin-custom.css dans le répertoire public:// donc la plupart du temps : web/sites/default/files/gin-custom.css.

Attention, généralement, ce dossier est exclu du versionning, mais il est possible de forcer l'ajout d'un fichier avec la commande :

git add -f web/sites/default/files/gin-custom.css

Note : cette manipulation est possible depuis la version 8.x-3.0-alpha31, sortie le 02 décembre 2020 (plus d'informations ici : https://www.drupal.org/project/gin/issues/3179676)

Encore mieux, ce thème utilise des variables CSS pour les couleurs, si vous souhaitez changer les couleurs de « focus » c'est possible avec les lignes suivantes, à ajuster en fonction de vos goûts :

* {
  --colorGinPrimary: #cc7700;
  --colorGinFocus: #cc7700;
  --colorGinPrimaryActive: #ff9900;
  --colorGinPrimaryHover: #ff9900;
}