theme.md

Theme dans Docusaurus

Infima pour le style

Docusaurus utilise Infima 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.

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

Pour les couleurs, Infima utilise un nuancier sur Colorbox.

Le Swizzling

Docusaurus propose une méthode pour personnaliser le thème : c'est le 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 :

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

Enveloppement

Pour l'enveloppement, procéder comme suit :

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.