Mode Sombre

Le paquet Tailwind v3 inclut un support complet du mode sombre via des propriétés personnalisées CSS. Le plugin Tailwind (rdrpPlugin) injecte des variables de couleur qui basculent automatiquement entre les palettes claire et sombre.

Comment ça marche

Le plugin Tailwind v3 (rdrpPlugin) injecte des propriétés personnalisées CSS qui définissent la palette de couleurs. Le mode sombre fonctionne en remplaçant ces variables sous .dark ou [data-theme="dark"] :

Mode clair — :root définit les couleurs par défaut (palette Slate + Sky)
Mode sombre — .dark et [data-theme="dark"] remplacent les couleurs automatiquement

Le thème du composant référence ces valeurs via var(--rdrp-color-*), de sorte que le mode sombre s’active lorsque votre stratégie darkMode de Tailwind déclenche le sélecteur approprié.

Configuration de Tailwind

Stratégie par classe (Recommandé)

Définissez darkMode: "class" dans votre configuration Tailwind. Le mode sombre s’active lorsqu’une classe dark est présente sur <html> ou un élément parent :

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  darkMode: "class",
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  plugins: [rdrpPlugin],
};

Basculer le mode sombre :

function App() {
  const [dark, setDark] = useState(false);

  return (
    <div className={dark ? "dark" : ""}>
      <button onClick={() => setDark(!dark)}>Toggle Theme</button>
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

Ou appliquez la classe sur <html> :

document.documentElement.classList.toggle("dark", isDark);

Stratégie par sélecteur

Tailwind v3.4+ prend en charge darkMode: "selector", ce qui permet d’utiliser [data-theme="dark"] ou n’importe quel sélecteur personnalisé :

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  darkMode: ["selector", '[data-theme="dark"]'],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  plugins: [rdrpPlugin],
};

<div data-theme={dark ? "dark" : "light"}>
  <DatePicker value={value} onChange={setValue} />
</div>

Stratégie Média

Définissez darkMode: "media" (ou omettez-le — c’est la valeur par défaut) pour suivre la préférence du système d’exploitation :

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  darkMode: "media",
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  plugins: [rdrpPlugin],
};

Aucune configuration supplémentaire n’est requise. Le sélecteur suivra prefers-color-scheme.

Variables de couleur

Voici les propriétés personnalisées CSS utilisées pour le thème clair/sombre :

Variable	Clair	Sombre
`--rdrp-color-bg`	`#ffffff`	`#020617`
`--rdrp-color-text`	`#0f172a`	`#f8fafc`
`--rdrp-color-text-muted`	`#64748b`	`#94a3b8`
`--rdrp-color-border`	`#e2e8f0`	`#1e293b`
`--rdrp-color-bg-hover`	`#f1f5f9`	`#1e293b`
`--rdrp-color-primary`	`#0ea5e9`	`#0ea5e9`
`--rdrp-color-text-today`	`#0ea5e9`	`#38bdf8`
`--rdrp-color-range-bg`	`#f0f9ff`	`rgba(8, 47, 73, 0.5)`

Intégration avec Docusaurus

Si vous utilisez Docusaurus (qui utilise data-theme sur <html>), configurez la stratégie par sélecteur de Tailwind :

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  darkMode: ["selector", '[data-theme="dark"]'],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  plugins: [rdrpPlugin],
};

Docusaurus définit <html data-theme="dark"> lorsque le mode sombre est actif, et les variables CSS basculeront automatiquement vers les valeurs sombres.

Intégration avec next-themes

import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

next-themes ajoute/supprime la classe dark sur <html>. Avec darkMode: "class" dans votre configuration Tailwind, le sélecteur bascule automatiquement.

Forcer un mode spécifique

Pour forcer le sélecteur à toujours utiliser le mode clair ou sombre, enveloppez-le dans un conteneur avec la classe appropriée :

{
  /* Toujours en mode clair — pas d'ancêtre avec la classe "dark" */
}
<div className="">
  <DatePicker value={value} onChange={setValue} />
</div>;

{
  /* Toujours en mode sombre */
}
<div className="dark">
  <DatePicker value={value} onChange={setValue} />
</div>;

📝 Note

Lors de l’utilisation de darkMode: "class", la classe dark doit être sur un élément parent ou sur <html>. Le sélecteur lui-même ne gère pas le basculement du mode sombre.