Implémenter le mode sombre avec Claude Code

Commencer par le risque produit

Implémenter le mode sombre avec Claude Code ne signifie pas demander à Claude Code de rendre l’écran plus joli. Le but est d’améliorer une interface réelle sans casser la conversion, la lisibilité, l’accessibilité ou le mobile. En production, les détails comptent: état vide, chargement, erreur, focus clavier, textes longs, publicités, blocs de code et position du CTA.

À lire avec claude code design system, claude code accessibility, claude code code review. Les références officielles sont Claude Code docs, MDN prefers-color-scheme, MDN color-scheme, WCAG contrast. La demande à Claude Code doit préciser l’objectif, les limites, les use case, les pitfall et la vérification.

Prompt conseillé

Implémente cette amélioration avec le plus petit changement sûr.
Respecte les composants, les design tokens et les routes existantes.
Couvre use case, pitfall, accessibilité, mobile et états d'erreur.
Retourne du code copiable et une review checklist.

Use case checklist

1. Pages d’atterrissage et articles où le lecteur doit voir l’étape suivante sans pression.
2. Dashboards SaaS avec chargement, état vide, erreur et succès.
3. Achat, inscription et demande de rendez-vous où le bouton principal reste prioritaire.
4. Revue en équipe, avec code et critères de vérification fournis par Claude Code.

Code d’implémentation

:root {
  color-scheme: light;
  --color-page: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #0f172a;
  --color-muted: #475569;
  --color-border: #dbe3ef;
  --color-link: #2563eb;
  --color-focus: #f59e0b;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #0b1120;
  --color-surface: #111827;
  --color-text: #f8fafc;
  --color-muted: #cbd5e1;
  --color-border: #334155;
  --color-link: #93c5fd;
  --color-focus: #fbbf24;
}

body {
  background: var(--color-page);
  color: var(--color-text);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

const storageKey = "theme";
const root = document.documentElement;
const stored = localStorage.getItem(storageKey);
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const theme = stored === "light" || stored === "dark" ? stored : prefersDark ? "dark" : "light";

root.dataset.theme = theme;

type Theme = "light" | "dark" | "system";

export function ThemeToggle({ value, onChange }: { value: Theme; onChange: (theme: Theme) => void }) {
  return (
    <fieldset aria-label="Theme">
      {(["light", "dark", "system"] as const).map((theme) => (
        <button
          key={theme}
          type="button"
          aria-pressed={value === theme}
          onClick={() => onChange(theme)}
        >
          {theme}
        </button>
      ))}
    </fieldset>
  );
}

Pitfall checklist

• Optimiser uniquement la capture d’écran peut dégrader le parcours réel.
• Dépendre seulement de la couleur ou du mouvement réduit l’accessibilité.
• Ne pas tester à 375px peut créer un débordement horizontal.
• Oublier les données vides, les longs libellés et le réseau lent provoque des bugs.
• Laisser Claude Code modifier des fichiers sans rapport rend la revue difficile.

Vérification

Demandez une seconde passe de review. Claude Code doit lister fichiers modifiés, risques, vérifications navigateur et contrôles manuels. Ensuite ouvrez la page en largeur mobile, vérifiez l’absence d’overflow, le défilement des blocs de code, le CTA et le focus clavier.

Angle monétisation

Ce sujet touche les annonces, cartes produit, liens de consultation, tarifs et formulaires. Pour l’appliquer dans un vrai dépôt, la page formation et conseil Claude Code transforme cette méthode en processus répétable.

Note de test réel

J’ai testé le flux en trois temps: implémentation, review, contrôle mobile. Le diff reste lisible et les problèmes d’accessibilité apparaissent avant le déploiement.

Notes de revue supplémentaires

• Comparez les captures avant/après et vérifiez CTA, annonces, texte, formulaires et blocs de code.
• Demandez à Claude Code ce qui peut être supprimé, quels noms ne suivent pas le projet et quelles hypothèses sont risquées.
• Avant déploiement, testez mobile, desktop, clavier, réseau lent, données vides et rechargement.

Notes de revue supplémentaires

• Comparez les captures avant/après et vérifiez CTA, annonces, texte, formulaires et blocs de code.
• Demandez à Claude Code ce qui peut être supprimé, quels noms ne suivent pas le projet et quelles hypothèses sont risquées.
• Avant déploiement, testez mobile, desktop, clavier, réseau lent, données vides et rechargement.

Notes de revue supplémentaires

• Comparez les captures avant/après et vérifiez CTA, annonces, texte, formulaires et blocs de code.
• Demandez à Claude Code ce qui peut être supprimé, quels noms ne suivent pas le projet et quelles hypothèses sont risquées.
• Avant déploiement, testez mobile, desktop, clavier, réseau lent, données vides et rechargement.

Notes de revue supplémentaires

• Comparez les captures avant/après et vérifiez CTA, annonces, texte, formulaires et blocs de code.
• Demandez à Claude Code ce qui peut être supprimé, quels noms ne suivent pas le projet et quelles hypothèses sont risquées.
• Avant déploiement, testez mobile, desktop, clavier, réseau lent, données vides et rechargement.