> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# Thème du produit

Personnalisez le chrome du produit SaaS du kit sans modifier le thème de marque marketing.

## Configuration et paramètres

Avant toute étape, lisez [Avant de commencer](https://supastack.dev/fr/docs/web/before-you-start.md) et [Principes de base du terminal](https://supastack.dev/fr/docs/web/terminal-basics.md). Ces instructions supposent que vous avez ouvert le monorepo supastack complet dans VS Code ; sa racine package.json marque la racine du référentiel. Dans les commandes pnpm, un package d'espace de travail est une application ou un dossier de code partagé ; dans le produit, un espace de travail est le conteneur de données et la limite de sécurité d'une équipe. corepack pnpm --filter ... sélectionne un package dans le monorepo tandis que les commandes sont exécutées à partir de sa racine. Si vous avez ouvert uniquement un dossier mobile ou de bureau synchronisé, il ne contient pas le backend Web, la configuration Docker ou les scripts racine : exécutez le backend à partir de ce monorepo ou d'un serveur hébergé accessible et utilisez les propres scripts du dossier de plateforme. Une variable d'environnement est un paramètre nommé stocké dans un fichier .env local ou dans votre tableau de bord d'hébergement ; redémarrez l'application concernée après l'avoir modifiée et conservez les secrets du serveur en dehors des valeurs NEXT_PUBLIC_ et EXPO_PUBLIC_.

1. Dans VS Code, ouvrez apps/web/app/app-theme.css pour les écrans de produits connectés et apps/web/src/theme/catalog.ts pour ajouter un pack de couleurs. Ne modifiez pas apps/web/app/theme.css pour les couleurs du produit ; il contrôle la marque marketing.

2. À partir de la racine du référentiel, exécutez corepack pnpm --filter @supastack/web dev, puis visitez http://localhost:3000/settings/appearance..

3. Modifiez un jeton dans votre succursale locale et actualisez l'aperçu. Attendu : le tableau de bord contrôle la mise à jour tandis que la page d'accueil conserve son thème marketing sélectionné.

Le thème de marque marketing et le thème produit se trouvent dans des fichiers distincts. Modifiez `apps/web/app/app-theme.css` pour le tableau de bord, l’authentification, les paramètres, la facturation, le chat et le chrome des organisations. Ajoutez des palettes dans `apps/web/src/theme/catalog.ts`. Étendez les axes de densité, rayon, police et disposition dans `apps/web/src/theme/presets.ts` ainsi que les règles `html[data-*]` correspondantes dans `app-theme.css`. Choisissez l’identité marketing dans `apps/web/src/theme/marketing-theme.ts` (`MARKETING_THEME_MODE: locked | inherit | a pack id`) au lieu de modifier `apps/web/app/theme.css` : son verrou `.marketing-theme:not(.app-theme):not([data-theme]):not([data-marketing-theme=\"inherit\"])` conserve par défaut la marque Obsidian de la page d’accueil supastack.

À l’exécution, Paramètres → Apparence → ThemePicker enregistre la couleur, la densité, le rayon, la police et la disposition dans un cookie navigateur + localStorage afin que theme-boot.ts restaure tous les axes avant le premier affichage, et synchronise le lot complet d’apparence de l’utilisateur connecté entre les navigateurs via user_appearance (GET/PUT /api/account/appearance). La même page monte la galerie UI du kit pour que les packs et préréglages mettent à jour en direct boutons, champs, cartes, badges et boîtes de dialogue. Les détails de conception et exemples prêts à copier se trouvent dans docs/design/kit-product-theme.md et docs/design/kit-ui-gallery.md.

```
/* Edit product chrome here — not theme.css */
.app-theme {
  --radius-card: 14px;
  background: var(--page);
  color: var(--text);
}
.app-theme .button-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

/* catalog.ts — append a ThemeDefinition with every THEME_TOKEN_NAMES entry */
{
  id: "coral",
  name: "Coral",
  colorScheme: "light",
  tokens: { "--page": "#fff7f4", "--accent": "#e06b4f" /* …full token set… */ }
}
```


## Commandes à copier

Suivez les commentaires pour voir dans quel dossier une commande s'exécute. Si deux terminaux sont étiquetés, ouvrez deux fenêtres de terminal et laissez la première commande s'exécuter pendant que vous utilisez la seconde.

```
corepack pnpm --filter @supastack/web dev

# In a second terminal, after changing a theme token:
corepack pnpm test -- apps/web/src/theme/contrast.test.ts
```


## Processus d’implémentation

Dans les consommateurs de l’application (`app-theme.css`, alias de `globals.css`, routes `WorkspaceShell`), préférez `var(--page|--section|--raised|--text|--muted|--border|--accent|…)`. Ne réintroduisez pas de cadres turquoise ou hexagonaux pâles et ne codez pas en dur les hexadécimaux Obsidian dans l’interface du produit.

Lors de l’ajout d’une palette, maintenez `contrast.test.ts` au vert. Lors de l’ajout d’un identifiant de préréglage, mettez à jour `presets.ts` et les correspondances `html[data-density|data-radius|data-font|data-layout]` dans `app-theme.css` afin que ThemePicker et le démarrage anti-FOUC restent cohérents.

Conservez la géométrie partagée du logo à quatre tuiles dans `marketing/brand-geometry.ts` pour les surfaces marketing. Les marques d’en-tête restent transparentes ; les favicons et icônes d’application gardent leur fond noir arrondi. Les pages purement marketing restent Obsidian lorsque `MARKETING_THEME_MODE` vaut \"locked\" (valeur par défaut du kit) ; les produits peuvent épingler une autre palette ou reprendre le choix du visiteur.


## Vérification et dépannage

Si un changement de couleur affecte la page d'accueil marketing, vérifiez que vous avez modifié app-theme.css et examinez apps/web/src/theme/marketing-theme.ts.. Si le texte devient difficile à lire, restaurez la valeur précédente et exécutez corepack pnpm test -- apps/web/src/theme/contrast.test.ts à partir de la racine avant de réessayer.

Après une modification des jetons ou palettes du thème du kit, vérifiez que ThemePicker dans `/settings/appearance` actualise la galerie UI du kit ainsi que les cadres `/dashboard`, `/auth`, `/billing`, `/chat` et organisation. Confirmez que `/` conserve le verrou marketing Obsidian, sauf indication contraire de `MARKETING_THEME_MODE`. Exécutez les contrats unitaires du thème (catalogue, préréglages, contraste, propriété du thème, galerie UI) et les tests Playwright application-theme si disponibles. Vérifiez le focus clavier, le contraste, 320px et la réduction du mouvement.


## Suivant

[Kit UI et blocs](https://supastack.dev/fr/docs/web/ui-kit.md)