Non. Couleurs, polices, en-tête, pied de page, espacements et mise en page sont des réglages du tableau de bord DXPR Theme. Un sous-thème ne sert qu’à votre propre CSS, aux surcharges de modèles, aux bibliothèques supplémentaires ou à une palette livrée avec le code.
' - '@type': Question name: 'Un agent IA peut-il créer le sous-thème et ses réglages ?' acceptedAnswer: '@type': Answer text: 'Oui. Après drush dxt:setup-ai, l’agent connaît les réglages du thème et les modifie depuis un brief, et il peut créer le sous-thème lui-même avec drush dxt:subtheme:create. Vous relisez le résultat sur le site.
' - '@type': Question name: 'Quelles versions de Drupal un sous-thème DXPR Theme prend-il en charge ?' acceptedAnswer: '@type': Answer text: 'Les mêmes que DXPR Theme 8.2 : Drupal 10.3 et versions ultérieures, et Drupal 11. Le fichier info du kit de démarrage déclare aussi des versions plus anciennes, mais DXPR Theme 8.2 dépend de modules qui exigent Drupal 10.3.
' - '@type': Question name: 'Mettre à jour DXPR Theme écrase-t-il mon sous-thème ?' acceptedAnswer: '@type': Answer text: 'Non. Composer ne remplace que themes/contrib/dxpr_theme ; votre sous-thème vit dans themes/custom. Enregistrez le formulaire de réglages du sous-thème une fois après une mise à jour, pour que sa feuille de style récupère les nouvelles variables.
' - '@type': TechArticle headline: 'Créer un sous-thème DXPR Theme (Drupal 11)' description: 'DXPR Theme modifie couleurs, polices, en-tête, espacements et mise en page depuis son tableau de bord des réglages : la plupart des sites n’ont donc jamais besoin d’une ligne de CSS. Le sous-thème est pour le reste : votre propre feuille de style, des surcharges de modèles, des bibliothèques supplémentaires ou une palette de couleurs livrée avec le code.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:24:41+0000' dateModified: '2026-10-24T19:36:26+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-theme/creer-un-sous-theme/creer-un-sous-theme-dxpr-theme' articleSection: 'Créer un sous-thème' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-theme/creer-un-sous-theme/creer-un-sous-theme-dxpr-theme' description: 'DXPR Theme modifie couleurs, polices, en-tête, espacements et mise en page depuis son tableau de bord des réglages : la plupart des sites n’ont donc jamais besoin d’une ligne de CSS. Le sous-thème est pour le reste : votre propre feuille de style, des surcharges de modèles, des bibliothèques supplémentaires ou une palette de couleurs livrée avec le code.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Theme](/fr/hc/documentation/learn-dxpr-theme) /[Créer un sous-thème](/fr/hc/documentation/learn-dxpr-theme/creating-sub-theme) # Créer un sous-thème DXPR Theme (Drupal 11). Apprendre DXPR ThemeCréer un sous-thème ## Dans ce guide DXPR Theme modifie couleurs, polices, en-tête, espacements et mise en page depuis son tableau de bord des réglages : la plupart des sites n’ont donc jamais besoin d’une ligne de CSS. Le sous-thème est pour le reste : votre propre feuille de style, des surcharges de modèles, des bibliothèques supplémentaires ou une palette de couleurs livrée avec le code. Le sous-thème hérite de chaque feuille de style et de chaque modèle de DXPR Theme, a ses propres réglages, et les mises à jour de DXPR Theme le laissent intact. Ce guide couvre DXPR Theme 8.2 sur Drupal 10.3 et Drupal 11. Le kit de démarrage utilisé est livré dans le thème, sous `dxpr_theme/dxpr_theme_STARTERKIT`; la commande `generate-theme` du cœur de Drupal n’est pas utilisée, car DXPR Theme apporte son propre kit de démarrage et sa propre commande. ## Avant de commencer Ajoutez DXPR Theme et activez son module d’aide, dont le thème a besoin avant que Drupal l’installe : ``` composer require drupal/dxpr_theme drush en dxpr_theme_helper ``` ## 1. Générer le sous-thème depuis le kit de démarrage Le plus rapide est la commande Drush fournie par DXPR Theme Helper. Exécutez-la depuis la racine de votre projet : elle valide le nom machine, copie le kit de démarrage dans `themes/custom` et renomme tout pour vous : ``` drush dxt:subtheme:create northwind_theme --theme-name="Northwind Theme" ``` Sans arguments, la commande demande les deux noms. Sans Drush, utilisez le script livré avec le thème : placez-vous dans `web/themes/contrib/dxpr_theme`, rendez les scripts exécutables une fois avec `chmod +x scripts/*`, exécutez `./scripts/create_subtheme.sh` et saisissez le nom lisible et le nom machine quand c’est demandé. Le script ne fonctionne que depuis ce dossier. Dans tous les cas, vous obtenez `web/themes/custom/northwind_theme`, avec les fichiers et la configuration du kit de démarrage renommés à votre nom machine et l’espace réservé `THEMETITLE` remplacé dans les fichiers d’info et de schéma. ## 2. Activez-le et enregistrez les réglages une fois 1. Allez dans *Apparence* et choisissez *Installer et définir par défaut* pour votre sous-thème. 2. Ouvrez les *Réglages* du sous-thème et cliquez sur *Enregistrer la configuration* sans rien changer. Ce premier enregistrement génère la feuille de style des réglages du nouveau thème. Le sous-thème part des réglages par défaut du kit de démarrage, pas de ceux définis dans DXPR Theme. Pour les reprendre, exportez-les depuis DXPR Theme et importez-les dans le sous-thème : ``` drush dxt:config:export --theme=dxpr_theme --file=theme.yml drush dxt:config:import theme.yml --theme=northwind_theme ``` Dès lors, le tableau de bord fonctionne exactement comme pour DXPR Theme : couleurs, typographie, en-tête, pied de page et espacements appartiennent au sous-thème. Gardez les régions du sous-thème identiques à celles du thème de base. Le kit de démarrage déclare les mêmes quatorze régions que DXPR Theme, et l’option *Masquer les régions* de DXPR Theme Helper sur le contenu les désigne par leur nom. ## 3. Ce que fournit le kit de démarrage - `northwind_theme.info.yml` : `base theme: dxpr_theme`, les régions, et une bibliothèque, `global-styling`, qui charge votre feuille de style. Un bloc `libraries-override` en commentaire liste les bibliothèques DXPR Theme que vous désactiverez le plus probablement, de `dxpr_theme/bootstrap-5` à `dxpr_theme/helper-classes`. - `css/dxpr_theme_subtheme.css` : chargé sur chaque page après les feuilles de style du thème. Votre CSS va ici. - `templates/` : vide à part un README. Copiez-y n’importe quel modèle depuis `dxpr_theme/templates` pour le surcharger. - `config/install` et `config/schema` : les réglages par défaut et leur schéma, renommés à votre thème. - `color-settings.json` : vos propres palettes de couleurs nommées, affichées dans la liste des jeux de couleurs à côté de ceux intégrés. - `logo.svg`, `favicon.ico`, `screenshot.png` : remplacez-les par les vôtres. ## 4. Écrire du CSS qui suit les réglages DXPR Theme écrit ses réglages dans des variables CSS : `--dxt-color-*` pour la palette et `--dxt-setting-*` pour la typographie, les espacements et la mise en page, et les associe aux variables `--bs-*` de Bootstrap. Utilisez les variables dans votre feuille de style plutôt que des valeurs fixes, et votre CSS continuera à suivre le tableau de bord quand quelqu’un change une couleur ou une police. ``` /* css/dxpr_theme_subtheme.css */ .card { border-radius: 1rem; border-color: color-mix(in srgb, var(--dxt-color-base) 20%, transparent); } .dxpr-theme-footer h2 { font-family: var(--dxt-setting-headings-font-face); color: var(--dxt-color-footertext); } ``` La couleur de base, les couleurs d’accent, le texte, les titres, les liens, les cartes et le pied de page ont tous une variable. La liste complète figure dans le README du thème, sous *CSS Custom Properties (Variables) Reference*. ## 5. Surcharger modèles et bibliothèques Copiez le modèle à modifier depuis `themes/contrib/dxpr_theme/templates` vers le dossier `templates` de votre sous-thème, gardez le nom de fichier, modifiez-le et videz les caches. Drupal choisit en premier la copie du sous-thème. Pour abandonner une feuille de style ou un script du thème de base, décommentez la ligne `libraries-override:` dans votre fichier info avec les lignes des bibliothèques à supprimer ; elles sont déjà à `false`. Pour ajouter les vôtres, déclarez d’autres bibliothèques dans `northwind_theme.libraries.yml` et listez-les sous `libraries` dans le fichier info, comme le fait le kit de démarrage pour `global-styling`. ## 6. Donner vos classes aux rédacteurs dans DXPR Builder Les classes déclarées sous `dxpr_builder_classes:` dans le fichier info du sous-thème apparaissent dans le sélecteur de classes de DXPR Builder : les rédacteurs appliquent votre bandeau sombre ou votre panneau en verre sans saisir de nom de classe. Stylisez la classe dans `dxpr_theme_subtheme.css`, limitée aux éléments DXPR Builder visés. ## 7. Livrer une palette de couleurs avec le thème Ajoutez des jeux nommés à `color-settings.json` à la racine du sous-thème. Chaque jeu définit les mêmes clés que le tableau de bord : `base`, `basetext`, `link`, `accent1`, `accent2`, `text`, `headings`, `card`, `footer`, `header`, `pagetitle` et les autres. Le jeu apparaît dans la liste des jeux de couleurs du formulaire de réglages : un site bascule sur la palette de la marque en un clic. ## 8. Mettre à jour DXPR Theme plus tard 1. Mettez à jour le thème de base avec Composer : `composer update drupal/dxpr_theme --with-dependencies`. 2. Exécutez les mises à jour de base de données et videz les caches. 3. Ouvrez le formulaire de réglages du sous-thème et enregistrez-le à nouveau, pour régénérer la feuille de style des réglages avec les nouvelles variables. 4. Lisez les notes de version pour les changements de modèles ou de régions, et comparez chaque modèle surchargé avec la nouvelle version. ## Laissez votre agent IA s’occuper du thème DXPR Theme 8.1.1 et versions ultérieures embarquent une compétence pour agents. Exécutez `drush dxt:setup-ai` dans votre projet, et votre agent de code (Claude Code, Codex, Gemini CLI ou Cursor) apprend les réglages du thème et leur signification. Décrivez la marque, et l’agent règle couleurs, typographie, mise en page d’en-tête et espacements avec les mêmes réglages que ceux écrits par le tableau de bord, à relire sur le site. Il peut aussi créer le sous-thème avec `drush dxt:subtheme:create`. La compétence DXPR Builder fait de même pour les pages, et Drush Webmaster pour le contenu et les vues. [Voir les compétences pour agents en action](/fr/drupal-agent-skills). ## Questions sur les sous-thèmes DXPR Theme ### Couleurs et polices sans sous-thème ? Non. Couleurs, polices, en-tête, pied de page, espacements et mise en page sont des réglages du tableau de bord DXPR Theme. Un sous-thème ne sert qu’à votre propre CSS, aux surcharges de modèles, aux bibliothèques supplémentaires ou à une palette livrée avec le code. ### Un agent IA peut-il créer le sous-thème et ses réglages ? Oui. Après `drush dxt:setup-ai`, l’agent connaît les réglages du thème et les modifie depuis un brief, et il peut créer le sous-thème lui-même avec `drush dxt:subtheme:create`. Vous relisez le résultat sur le site. ### Quelles versions de Drupal un sous-thème DXPR Theme prend-il en charge ? Les mêmes que DXPR Theme 8.2 : Drupal 10.3 et versions ultérieures, et Drupal 11. Le fichier info du kit de démarrage déclare aussi des versions plus anciennes, mais DXPR Theme 8.2 dépend de modules qui exigent Drupal 10.3. ### Mettre à jour DXPR Theme écrase-t-il mon sous-thème ? Non. Composer ne remplace que `themes/contrib/dxpr_theme` ; votre sous-thème vit dans `themes/custom`. Enregistrez le formulaire de réglages du sous-thème une fois après une mise à jour, pour que sa feuille de style récupère les nouvelles variables.