Créer un thème compatible

Le langage est indépendant du thème graphique : une organisation peut avoir sa propre charte, du moment que son CSS implémente le contrat Core v1.

Ce qu’un thème doit déclarer

/* @theme Client-A */
/* @dwa-language core-v1 */

• @theme : le nom utilisé dans le frontmatter (theme: Client-A). Une lettre, puis lettres, chiffres, - ou _ ; 64 caractères au plus. Sur le portail, ce nom ne change plus d’une version à l’autre.
• @dwa-language core-v1 : la version du langage implémentée. Le validateur l’exige.
• Une taille de slide au format 16:9 si le thème en fixe une (1280 × 720 pour le thème DWA).

Ce qu’un thème doit implémenter

Toutes les classes de la référence, avec le même sens :

• les six layouts (title, toc, chapter, callout, content, closing) ;
• les compositions (cols-2 à cols-6, image-text-N, text-image-N, image-fit, image-full, gallery, gallery-bento, timeline, timeline-vertical, chart-wide) ;
• les options (with-title, with-legend, cards, branded), les tailles (medium, small), les ajustements (fit, bg) et les neuf palettes ;
• les 27 classes callout-size-50 à callout-size-180 (pas de 5 px), pour la taille automatique des callouts.

Le validateur vérifie que chacune de ces classes a un effet réel, et que les valeurs d’une même famille sont distinctes ; callout-size-N doit donner au titre du callout une taille de N px.

Le plus simple est de partir de theme/DWA.css et de remplacer les couleurs, les polices et les fonds.

Ne changez pas le sens d’un nom

Les couleurs, polices, espacements et motifs appartiennent au thème. Le sens des classes appartient au langage : image-text-80 doit rester « image à gauche sur 80 % ». C’est ce qui permet de changer de thème sans réécrire les présentations.

Couleurs d’une charte client

Utilisez uniquement la palette fournie par le client. Les neuf palettes sont des rôles (neutre, sombre, positive, alerte…) : associez chacun à une combinaison de la charte, en vérifiant le contraste du texte sur chaque fond.

Ressources incorporées

Un thème doit être autonome : il ne charge rien de l’extérieur.

• images et polices incorporées en data: base64 (PNG, JPEG, GIF, WebP, WOFF, WOFF2, TTF, OTF), dont le contenu correspond au type annoncé ;
• aucun @import autre que les thèmes intégrés à Marp (default, gaia, uncover) ;
• pas de SVG, pas de séquence </style.

Le portail n’incorpore pas les fichiers à votre place : importez un CSS déjà autonome. Il n’y a pas de limite de taille comme règle. Les polices restent soumises à leur licence de distribution.

Les classes supplémentaires propres à votre charte sont permises, du moment que toutes les classes du Core v1 existent avec leur sens.

Vérifier

Pour être publié sur le portail, un thème doit passer le validateur des thèmes sans erreur : lecture, identité, sécurité, effet de chaque classe du Core v1, rendu Marp et géométrie des slides de contrôle mesurée dans un navigateur.

1. Dans VS Code : enregistrez le thème dans un dossier de test avec DWA : choisir le thème CSS pour DWA et Marp. L’extension le contrôle (étapes 1 à 4) et affiche les constats dans Problèmes, sur le fichier CSS ; DWA : contrôler le thème (Core v1) relance le contrôle. Parcourez les exemples de cette documentation : l’aperçu Marp et la mesure des débordements utilisent votre CSS.
2. Sur le portail : l’éditeur valide le CSS pendant la saisie (étapes 1 à 6), indique la ligne de chaque erreur avec une piste de correction et montre l’aperçu des slides de contrôle. Le serveur revalide à la publication.

Les avertissements (contraste insuffisant d’une palette, sélecteur non évalué) n’empêchent pas la publication, mais méritent une relecture de l’aperçu.

Limite de l’export PowerPoint

L’export PPTX reprend aujourd’hui les palettes et dimensions du Core DWA ; les variantes de couleurs d’un thème personnalisé ne sont pas encore converties, et le rapport d’export le signale. Les décors PNG du CSS choisi sont, eux, conservés en fond.