import {Meta, Source} from '@storybook/blocks';
import '../styles/shared.css';

<Meta title="Guide Du Dev/Configuration du thème" />



<div className="header">
  <h1>Configuration du thème</h1>
</div>

Le thème par défaut du Starter kit est celui de la Cnam par défaut.
Si votre projet dépend du Portail Agent ou d'Amelipro, appliquez le thème correspondant à votre ligne de fabrication.

Pour configurer Vuetify et changer le thème, utilisez `createVuetifyInstance` — consultez la page [createVuetifyInstance](/docs/guide-du-dev-createvuetifyinstance--docs) pour le détail complet.

## Résumé des thèmes disponibles

<table>
  <thead>
    <tr>
      <th>Identifiant</th>
      <th>Application</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>cnam</code></td>
      <td>CNAM (défaut)</td>
    </tr>
    <tr>
      <td><code>pa</code></td>
      <td>Portail Agent</td>
    </tr>
    <tr>
      <td><code>ap</code></td>
      <td>Amelipro</td>
    </tr>
  </tbody>
</table>

## Appliquer le thème dans le composant racine

<Source dark code={`
<template>
  <VApp theme="pa">
    <!-- votre application -->
  </VApp>
</template>
`}
/>

Après avoir modifié le thème, relancez le serveur de développement :

<Source dark code={`
pnpm dev
`}
/>