Comment implémenter le mode sombre avec Claude Code

Optimiser l’implémentation du mode sombre avec Claude Code

Le mode sombre est désormais une fonctionnalité standard des applications web, mais son implémentation nécessite de nombreuses considérations : conception CSS, gestion d’état, persistance, etc. Avec Claude Code, vous pouvez l’implémenter en peu de temps avec une conception cohérente.

Conception de thème avec variables CSS

Commençons par définir les tokens de thème avec des variables CSS.

> Conçois un thème clair/sombre basé sur les variables CSS.
> Utilise des noms de couleurs sémantiques et rends-le intégrable avec Tailwind.

/* globals.css */
:root {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-bg-tertiary: #f1f5f9;
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-tertiary: #94a3b8;
  --color-border: #e2e8f0;
  --color-border-hover: #cbd5e1;
  --color-accent: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-surface: #ffffff;
  --color-surface-hover: #f8fafc;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
}

[data-theme="dark"] {
  --color-bg-primary: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-tertiary: #334155;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #64748b;
  --color-border: #334155;
  --color-border-hover: #475569;
  --color-accent: #60a5fa;
  --color-accent-hover: #93bbfd;
  --color-surface: #1e293b;
  --color-surface-hover: #334155;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
}

Implémentation du basculement de thème

Créons un hook qui gère à la fois la synchronisation avec les paramètres système et le basculement manuel.

import { useState, useEffect, useCallback } from "react";

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

export function useTheme() {
  const [theme, setThemeState] = useState<Theme>(() => {
    if (typeof window === "undefined") return "system";
    return (localStorage.getItem("theme") as Theme) || "system";
  });

  const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">("light");

  const applyTheme = useCallback((newTheme: Theme) => {
    const root = document.documentElement;
    let resolved: "light" | "dark";

    if (newTheme === "system") {
      resolved = window.matchMedia("(prefers-color-scheme: dark)").matches
        ? "dark"
        : "light";
    } else {
      resolved = newTheme;
    }

    root.setAttribute("data-theme", resolved);
    setResolvedTheme(resolved);
  }, []);

  const setTheme = useCallback(
    (newTheme: Theme) => {
      setThemeState(newTheme);
      localStorage.setItem("theme", newTheme);
      applyTheme(newTheme);
    },
    [applyTheme]
  );

  useEffect(() => {
    applyTheme(theme);

    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleChange = () => {
      if (theme === "system") applyTheme("system");
    };

    mediaQuery.addEventListener("change", handleChange);
    return () => mediaQuery.removeEventListener("change", handleChange);
  }, [theme, applyTheme]);

  return { theme, setTheme, resolvedTheme };
}

Bouton de basculement de thème

import { useTheme } from "@/hooks/useTheme";

export function ThemeToggle() {
  const { theme, setTheme, resolvedTheme } = useTheme();

  const options: { value: Theme; label: string; icon: string }[] = [
    { value: "light", label: "Clair", icon: "sun" },
    { value: "dark", label: "Sombre", icon: "moon" },
    { value: "system", label: "Système", icon: "monitor" },
  ];

  return (
    <div className="flex items-center gap-1 p-1 rounded-lg bg-[var(--color-bg-tertiary)]">
      {options.map((option) => (
        <button
          key={option.value}
          onClick={() => setTheme(option.value)}
          className={`px-3 py-1.5 rounded-md text-sm transition-colors ${
            theme === option.value
              ? "bg-[var(--color-surface)] text-[var(--color-text-primary)] shadow-sm"
              : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
          }`}
          aria-label={option.label}
        >
          {option.label}
        </button>
      ))}
    </div>
  );
}

Prévention du FOUC (scintillement)

Script pour empêcher le scintillement momentané du thème au chargement de la page.

<!-- Placer dans le head -->
<script>
  (function () {
    const theme = localStorage.getItem("theme") || "system";
    let resolved = theme;
    if (theme === "system") {
      resolved = window.matchMedia("(prefers-color-scheme: dark)").matches
        ? "dark"
        : "light";
    }
    document.documentElement.setAttribute("data-theme", resolved);
  })();
</script>

Intégration avec Tailwind CSS

// tailwind.config.js
module.exports = {
  darkMode: ["selector", '[data-theme="dark"]'],
  theme: {
    extend: {
      colors: {
        bg: {
          primary: "var(--color-bg-primary)",
          secondary: "var(--color-bg-secondary)",
          tertiary: "var(--color-bg-tertiary)",
        },
        text: {
          primary: "var(--color-text-primary)",
          secondary: "var(--color-text-secondary)",
        },
        surface: {
          DEFAULT: "var(--color-surface)",
          hover: "var(--color-surface-hover)",
        },
      },
    },
  },
};

Pour l’intégration avec un système de design, consultez Construction d’un système de design, et pour l’adaptation responsive, consultez Design responsive.

Résumé

Avec Claude Code, vous pouvez compléter en peu de temps et de manière cohérente l’implémentation du mode sombre : conception des variables CSS, logique de basculement de thème, prévention du FOUC, intégration Tailwind. Il suffit de demander « ajoute le mode sombre » pour l’intégrer correctement dans un projet existant.

Pour plus de détails, consultez la documentation officielle de Claude Code.