# Theme dans Docusaurus

## Infima pour le style

**Docusaurus** utilise [Infima](https://infima.dev/) pour générer du style intelligent : c'est un Framework de style.

Notre site utilise les styles d'**Infima** par défaut. Nous pouvons rappeler ces variables ou bien les remplacer. De plus, à noter que le **dark mode** est facilement géré dans notre CSS.

```css
html[data-theme='dark'] .menu__link {
  color: var(--ifm-color-tonic-one);
}
```

Pour les couleurs, **Infima** utilise un nuancier sur [Colorbox](https://colorbox.io/).

## Le Swizzling

Docusaurus propose une méthode pour personnaliser le thème : c'est le [Swizzling](https://docusaurus.io/fr/docs/swizzling).

On échange un composant de thème généré par Docusaurus, par le notre.
Il en existe deux types :

1. **Éjection** : créer une copie du composant de thème à personnaliser.
2. **Enveloppement** : on améliorer le composant de thème existant.

### Éjection

**Pour procéder à l'éjection, on lance dans son terminal la commande suivante :**

```sh
npm run swizzle [nom du thème] [nom du composant] -- --eject
```

### Enveloppement

**Pour l'enveloppement, procéder comme suit :**

```sh
npm run swizzle [theme name] [component name] -- --wrap
```

En exemple, de notre Footer :
En lançant la commande de l'enveloppement, il nous crée le répertoire `theme/Footer`.
Le fichier `index.js` s'y trouvant est notre nouveau Footer.

Nous avons enveloppé notre Footer avec de nouveaux éléments.