Drupal 9 : rajouter une feuille de style personnalisée au thème d'administration

En voilà une bonne idée.

Nous n'aurions qu'à dire à notre module de surcharger notre thème d'administration avec notre feuille de style personnalisée.

Plus de nouveau thème à maintenir (couteux en temps) mais juste un module à créer comportant quelques lignes de codes.

De plus, sur la plupart de nos projets, nous utilisons déjà un "custom" module. Nous pouvons donc envisager d'inclure cette surcharge sur celui-ci.

Pour cet exemple, nous allons passer par la création d'un nouveau module, mais libre à vous d'adapter les étapes suivantes pour intégrer cette surcharge sur votre module "custom" existant.

Je vous mets les sources à télécharger en fin d'article.

Première étape : nous allons créer notre module.

Pour cela, nous allons créer un dossier ayant le nom de notre module (ici, tao pour Theme Admin Override) et le placer dans notre site Drupal : dans le dossier "modules" par exemple ou dans un dossier spécifique ("modules/custom").

Nous allons créer le fichier tao.info.yml qui sera placé à la racine de notre module.

name: Theme Admin Override
description: Custom module to override CSS administration theme

type: module
core_version_requirement: ^8 || ^9

version: '8.x-0.1'

Ensuite, nous allons créer le fichier tao.module qui sera également placé à la racine de notre module.

<?php

/**
 * Implements hook_page_attachments().
 */
function tao_page_attachments(array &$attachments) {

}

Dans ce fichier, nous avons préparé la fonction hook_page_attachments() qui nous servira plus tard.

Deuxième étape : nous allons créer notre feuille de style CSS.

Pour cela, nous allons créer le dossier "css", à la racine de notre module et le fichier theme_admin_extend.css que nous allons placé dans ce dossier.

Libre à vous de placer ce fichier CSS directement à la racine du module. Mais pour ma part, je trouve que c'est une bonne pratique de ranger les fichiers CSS dans un dossier spécifique.

Ce fichier theme_admin_extend.css nous servira à surcharger des règles existantes et / ou à en créer de nouvelles.

Troisième étape : nous allons créer une librairie qui inclura notre feuille de style.

Pour cela, nous allons créer le fichier tao.libraries.yml qui se trouvera à la racine de notre module.

# Override CSS theme admin
theme_admin_extend:
  css:
    theme:
      css/theme_admin_extend.css: {}

Nous venons de créer la librairie "tao/theme_admin_extend" qui inclut la feuille de style theme_admin_extend.css.

Quatrième étape : nous devons attacher la librairie nouvellement créée à notre thème d'administration.

Pour cela, nous allons utiliser la fonction hook_page_attachments() se trouvant dans le fichier tao.module.

<?php

/**
 * Implements hook_page_attachments().
 */
function tao_page_attachments(array &$attachments) {
  $config = \Drupal::config('system.theme');
  $theme = \Drupal::theme()->getActiveTheme()->getName();

  if ($theme == $config->get('admin')) {
     $attachments['#attached']['library'][] = 'tao/theme_admin_extend';
  }
}

En détail :

Nous récupérions la configuration des thèmes.

$config = \Drupal::config('system.theme');

Nous récupérons le nom du thème actif.

$theme = \Drupal::theme()->getActiveTheme()->getName();

Si le thème actif est bien le thème d'administration alors nous rattachons notre librairie.

if ($theme == $config->get('admin')) {
   $attachments['#attached']['library'][] = 'tao/theme_admin_extend';
}

Désormais, notre feuille de style theme_admin_extend.css sera charger dans le thème d'administration du site.

J'ai souvent été confronté à ce genre de demande sous Drupal 7 et la seule réponse possible était de développer un thème d'administration "enfant".

Comme je l'ai évoqué au début de cet article, le développement d'un nouveau thème pour répondre à cette demande est couteux en temps : on développe un thème uniquement pour surcharger le CSS.

La souplesse de cette nouvelle approche sous Drupal 9 ne présente donc que des avantages :

• la maintenabilité du thème d'administration
• la centralisation du code
• le développement d'une solution technique peu couteuse en temps