Personnalisation du thème

Explainer utilise Tailwind CSS 4 pour le style avec un support intégré du mode sombre/clair.

Mode sombre/clair

Un bouton de changement de thème est disponible dans la barre de navigation via le composant ThemeToggle de @explainer/ui. Il prend en charge trois modes :

• Clair — Schéma de couleurs clair
• Sombre — Schéma de couleurs sombre
• Système — Suit la préférence du système d’exploitation de l’utilisateur

Le thème sélectionné est conservé dans le localStorage et appliqué immédiatement sans flash de contenu non stylisé.

Tailwind CSS 4

Explainer utilise Tailwind CSS 4 avec la nouvelle configuration CSS-first. Les styles globaux sont définis dans le point d’entrée CSS de chaque application :

apps/docs/src/styles/globals.css
apps/blog/src/styles/globals.css
apps/website/src/styles/globals.css

Personnaliser les couleurs

Pour personnaliser le schéma de couleurs, modifiez les propriétés CSS personnalisées dans le fichier globals.css de votre application. Tailwind CSS 4 utilise @theme pour définir les design tokens :

@import 'tailwindcss';

@theme {
  --color-primary: oklch(0.707 0.217 293);
  --color-accent: oklch(0.637 0.237 25);
}

Thèmes des blocs de code

La coloration syntaxique utilise Shiki avec deux thèmes :

Pour changer les thèmes des blocs de code, modifiez la configuration Shiki dans packages/mdx/src/shiki.ts :

export const shikiConfig: ShikiConfig = {
  themes: {
    light: 'github-light',
    dark: 'github-dark',
  },
  // ...
}

Consultez la galerie de thèmes Shiki pour voir les thèmes disponibles.

Où modifier les styles