Chaque nouvelle version majeure de WordPress s’accompagne d’un thème par défaut, et Twenty Twenty-One, livré avec WordPress 5.6 en décembre dernier, marque une rupture nette avec ses prédécesseurs. Fini le design tape-à-l’œil : l’équipe menée par Ari Stathopoulos a choisi la sobriété radicale, en misant sur l’accessibilité et la simplicité technique plutôt que sur les effets visuels.
J’ai passé plusieurs semaines à l’utiliser comme thème parent sur des projets clients et à en disséquer le code source. Ce thème mérite qu’on s’y attarde, non pas pour sa beauté (discutable et très personnelle), mais pour les choix techniques qu’il révèle sur la direction que prend WordPress.
Une palette de couleurs générée automatiquement
La particularité la plus frappante de Twenty Twenty-One se cache dans son Customizer : on n’y choisit qu’une seule couleur de base. À partir de cette teinte unique, le thème calcule automatiquement toutes les variations nécessaires — arrière-plans, bordures, contrastes de texte — en manipulant la luminosité et la saturation via des fonctions PHP dédiées dans inc/custom-colors.php.
Ce mécanisme garantit un contraste suffisant entre le texte et l’arrière-plan quelle que soit la couleur choisie par l’utilisateur, ce qui est loin d’être garanti dans la plupart des thèmes personnalisables classiques.
Une accessibilité pensée dès la conception
Twenty Twenty-One a été conçu avec l’accessibilité comme exigence de départ, pas comme correctif après coup. On retrouve notamment :
- Des contrastes de couleurs conformes au niveau AA des WCAG sur l’ensemble des combinaisons générées
- Une navigation au clavier testée sur tous les éléments interactifs, y compris le menu et les formulaires
- Des tailles de police fluides qui s’adaptent sans casser la lisibilité, via des unités relatives plutôt que des pixels fixes
- Un balisage sémantique rigoureux, avec des rôles ARIA posés uniquement là où le HTML natif ne suffit pas
C’est probablement le thème par défaut le plus abouti sur ce plan depuis Twenty Seventeen, et il sert clairement de vitrine pour les efforts du groupe accessibilité de WordPress.
Le minimalisme comme choix assumé
Le thème abandonne la plupart des artifices visuels : pas de dégradés, pas d’ombres portées complexes, une typographie unique (Inter pour le texte courant, avec une police serif pour les titres). Ce dépouillement n’est pas un hasard : il met en valeur le contenu généré par l’éditeur de blocs, qui devient le véritable centre d’intérêt de la page plutôt qu’un habillage graphique fourni par le thème.
On sent ici l’influence directe du projet Gutenberg : Twenty Twenty-One est pensé comme un thème « neutre », une toile de fond qui laisse les blocs s’exprimer sans imposer un style visuel trop marqué.
Un CSS structuré autour des blocs
Le fichier style.css s’organise très largement autour des sélecteurs de blocs natifs (.wp-block-quote, .wp-block-cover, etc.), ce qui facilite grandement la lecture du code pour qui veut créer un thème enfant adapté à l’éditeur de blocs.
Le dark mode automatique via prefers-color-scheme
Autre nouveauté notable : Twenty Twenty-One propose un mode sombre qui s’active automatiquement selon les préférences système du visiteur, sans bouton ni réglage à activer manuellement. Techniquement, cela repose sur la media query CSS prefers-color-scheme :
@media (prefers-color-scheme: dark) {
body {
background-color: var(--global--color-dark-gray);
color: var(--global--color-white);
}
a {
color: var(--global--color-primary);
}
}
Le thème définit ses couleurs sous forme de variables CSS personnalisées, ce qui permet de basculer proprement l’ensemble de la palette sans dupliquer les règles de style. C’est une approche propre, mais qui suppose que l’utilisateur n’ait aucun moyen de forcer un mode indépendamment du système — un compromis assumé par l’équipe cœur.
Ce que cela implique pour vos thèmes enfants
Si vous créez un thème enfant à partir de Twenty Twenty-One, gardez en tête que la logique de génération de couleurs peut entrer en conflit avec des styles codés en dur. Mieux vaut réutiliser les variables CSS existantes que de les redéfinir intégralement.
Sur les projets où le client changera régulièrement de couleur de marque, j’utilise Twenty Twenty-One comme base plutôt qu’un thème premium classique : le système de génération de palette évite bien des retouches manuelles à chaque changement d’identité visuelle.
Notre verdict
Twenty Twenty-One n’est pas un thème taillé pour impressionner visuellement, et ce n’est pas son objectif. C’est une démonstration technique solide de ce que WordPress peut offrir en matière d’accessibilité et de flexibilité colorimétrique par défaut. Pour un blog personnel sobre ou comme base de thème enfant orientée blocs, il constitue un excellent point de départ. Pour un site vitrine à forte identité visuelle, il restera surtout une source d’inspiration technique plutôt qu’un thème à utiliser tel quel.
