Créer le thème de votre équipe

Un thème donne aux présentations leurs couleurs, leur police, leurs tailles et leurs fonds. C'est un dossier qui contient un manifeste theme.json et une feuille de style SCSS construite sur le paquet @vignettes/theme-kit. Dans ce tutoriel, vous écrivez ce dossier, vous le vérifiez dans un studio installé sur votre ordinateur, puis l'exploitant de votre instance le publie.

Installer le studio sur votre ordinateur

Le studio est dans le dépôt privé ShallowRed/vignettes, que votre compte GitHub doit pouvoir lire. mise installe Node 22 et pnpm, puis lance les tâches du dépôt.

git clone https://github.com/ShallowRed/vignettes.git
cd vignettes
mise install
mise run setup

Les thèmes de votre instance sont dans presentations/themes/, un dossier ignoré par git. Si votre instance garde ses présentations et ses thèmes dans un dépôt, clonez ce dépôt sous le nom presentations.

Copier le thème d'exemple

Partez du thème complet examples/themes/exemple-marque. Le nom de votre thème, en minuscules et avec des tirets, est à la fois celui du dossier, de la clé name du manifeste, du fichier SCSS et de la clé theme des présentations. Il doit être différent de dsfr et de minimal. Ici, le thème s'appelle mon-equipe :

mkdir -p presentations/themes
cp -R examples/themes/exemple-marque presentations/themes/mon-equipe
mv presentations/themes/mon-equipe/exemple-marque.scss presentations/themes/mon-equipe/mon-equipe.scss

Dans theme.json, remplacez exemple-marque par mon-equipe, et reportez dans preview les couleurs et la police de votre thème : le catalogue dessine la carte d'une présentation avec ces valeurs, sans charger la feuille du thème. La référence du manifeste décrit les autres clés, dont backgrounds pour une image de fond par rôle de diapositive.

Régler les couleurs

Dans mon-equipe.scss, le bloc :root donne leur valeur aux jetons que lisent tous les composants. Remplacez-les par les couleurs de votre équipe :

• --accent, --accent-soft et --accent-bg : la couleur principale, des liens, des puces et des diagrammes, et deux teintes plus claires ;
• --accent-strong : l'accent mélangé à la couleur des titres, pour un texte posé sur --accent-soft ou --accent-bg, et --accent-line : l'accent mélangé au fond, pour les contours d'un schéma : cartes, zones subject et étiquettes des flèches ; sans valeur, ils sont calculés à partir de --accent ;
• --surface : le fond des diapositives, et --surface-contrast avec --on-contrast : une surface sombre et son texte ;
• --text-title, --text-default et --text-mention : les titres, le texte courant, les légendes ;
• --border, --radius et --shadow : le contour, les coins et l'ombre des boîtes ;
• --code-surface et --code-surface-dark : le fond des blocs de code des thèmes de code clair et nuit ; sans valeur, ils prennent les fonds clair et sombre du code de GitHub ;
• --accent-on-contrast : l'accent éclairci, pour la zone active d'un JsonTour sur un bloc de code sombre ; sans valeur, il est calculé à partir de --accent.

Un jeton omis garde la valeur par défaut du kit, un gris neutre avec un accent bleu. Les deux dernières règles de l'exemple colorent les diapositives de section avec --surface-contrast : gardez-les. Slides by role explique comment elles atteignent le fond de l'écran, l'export PDF et la vue du téléphone.

Les cartes et les zones d'un schéma prennent une couleur par son nom, comme color="green". Le kit définit blue, green, yellow, orange, brown, pink, purple et grey. Pour un nom, --palette-<nom>-text colore le titre et l'icône, --palette-<nom>-bg et --palette-<nom>-main le fond et le contour d'une zone. Redéfinissez ces propriétés dans le bloc :root, ou ajoutez un nom avec les trois mêmes propriétés.

Pour garder la police Marianne et la mise en forme du DSFR, avec vos couleurs, remplacez les trois lignes @use du kit et le bloc :root par le thème DSFR, réglé par ses variables Sass :

@use 'pkg:@vignettes/theme-dsfr/variables' with (
  $dsfr-blue-france-sun-113: #7c2d12,
  $dsfr-blue-france-main-525: #c2410c,
  $dsfr-blue-france-850: #fed7aa,
  $dsfr-blue-france-950: #fff7ed
);
@use 'pkg:@vignettes/theme-dsfr';

Le thème DSFR associe --accent à $dsfr-blue-france-main-525, --accent-soft à $dsfr-blue-france-850, --accent-bg à $dsfr-blue-france-950 et --accent-strong à $dsfr-blue-france-sun-113, qui colore aussi le survol des liens. Le fichier _variables.scss liste les autres variables.

Choisir la police

Placez les fichiers de la police dans assets/fonts/ et déclarez-la dans un fichier _fonts.scss du dossier du thème. Le dossier assets/ est servi à l'adresse /themes/mon-equipe/assets/ :

@font-face {
  font-family: Equipe;
  font-weight: 400;
  font-display: swap;
  src: url('/themes/mon-equipe/assets/fonts/Equipe-Regular.woff2') format('woff2');
}

Dans mon-equipe.scss, ajoutez @use 'fonts'; et appliquez la police :

.reveal {
  font-family: Equipe, system-ui, sans-serif;
}

Pour la carte du catalogue, ajoutez "fonts": "fonts" dans preview et mettez Equipe en tête de fontFamily.

Vérifier le thème

Lancez le studio, puis connectez-vous sans compte GitHub ni Google à l'adresse http://localhost:3000/auth/dev-login?role=owner, qui répond seulement en développement :

mise run dev:nuxt

Une modification d'un fichier .scss recharge la page ; après une modification de theme.json, relancez la commande.

La présentation de contrôle examples/controle-du-theme.md contient chaque rôle de diapositive et chaque élément que colore un thème. Copiez-la, écrivez mon-equipe dans sa clé theme, puis importez-la et publiez-la. Lisez chaque diapositive en largeur d'ordinateur, puis à 390 pixels de large, avec la liste de Checking a theme : le contraste de chaque couple de couleurs, le code en ligne en fin de ligne, les diagrammes, la vue du téléphone et l'export PDF.

Faire publier le thème

La commande de publication envoie le thème dans le stockage de l'instance, et il faut pour la lancer les clés de ce stockage : l'exploitant de votre instance la lance, dans son propre clone du studio. Envoyez-lui le dossier du thème, en archive ou par un commit dans le dépôt des présentations, et demandez-lui :

1. de placer le dossier dans presentations/themes/ ;
2. de lancer mise run theme:push -- mon-equipe, qui affiche les fichiers à envoyer, puis mise run theme:push -- mon-equipe --apply, qui les envoie ;
3. de vous prévenir quand la commande affiche ✓ published.

Le thème apparaît dans la liste des thèmes de la fenêtre « Nouvelle présentation » une minute plus tard au plus. Pour l'appliquer à une présentation existante, écrivez theme: mon-equipe dans son en-tête et publiez-la. Pour une nouvelle version du thème, faites la même demande : la commande remplace les fichiers publiés sous le même nom.

Pour faire écrire le thème par un agent, utilisez la skill writing-themes. Dans Claude Code, le plugin vignettes-decks la contient : commencez la demande par /vignettes-decks:writing-themes. Pour les autres agents, installez-la comme writing-decks (Installer la skill), avec gh skill install ShallowRed/vignettes writing-themes --agent codex --scope user.