Mode Sombre

Le package “styled” inclut un support complet pour le mode sombre. Des valeurs sombres sont définies pour chaque variable CSS, de sorte que le sélecteur s’adapte entièrement de manière automatique.

Comment Ça Marche

Le mode sombre est activé via deux mécanismes :

Préférence système — media query prefers-color-scheme: dark
Bascule manuelle — attribut data-theme="dark" sur .rdrp-root ou un élément parent

La préférence système est appliquée par défaut. Si vous définissez explicitement data-theme="light" ou data-theme="dark", cela surcharge la préférence système.

Automatique (Préférence Système)

Aucune configuration requise. Le sélecteur respecte le paramètre du système d’exploitation de l’utilisateur :

import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

// Suit automatiquement le mode sombre/clair du système
<DatePicker value={value} onChange={setValue} />;

Le CSS utilise @media (prefers-color-scheme: dark) pour basculer toutes les variables --rdrp-* vers leurs valeurs sombres.

Bascule Manuelle

Définissez data-theme sur la racine du sélecteur ou sur n’importe quel élément ancêtre :

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

  return (
    <div data-theme={dark ? "dark" : "light"}>
      <button onClick={() => setDark(!dark)}>Basculer en mode {dark ? "Clair" : "Sombre"}</button>
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

Ou appliquez-le directement sur le sélecteur :

<DatePicker value={value} onChange={setValue} data-theme="dark" />

Lorsque vous utilisez l’API de Composants Composés, définissez-le sur Root :

<DatePicker.Root value={value} onChange={setValue} data-theme="dark">
  <DatePicker.Trigger />
  <DatePicker.Content>{/* ... */}</DatePicker.Content>
</DatePicker.Root>

Valeurs de Couleur du Mode Sombre

Toutes les variables de couleur basculent automatiquement. Voici les principales différences :

Variable	Clair	Sombre
`--rdrp-color-primary`	`#3b82f6`	`#60a5fa`
`--rdrp-color-bg`	`#ffffff`	`#1f2937`
`--rdrp-color-bg-hover`	`#f3f4f6`	`#374151`
`--rdrp-color-text`	`#374151`	`#e5e7eb`
`--rdrp-color-text-strong`	`#111827`	`#f9fafb`
`--rdrp-color-text-muted`	`#6b7280`	`#9ca3af`
`--rdrp-color-border`	`#d1d5db`	`#4b5563`
`--rdrp-color-range-bg`	`#dbeafe`	`#1e3a5f`
`--rdrp-color-text-today`	`#2563eb`	`#60a5fa`
`--rdrp-shadow-popup`	`rgba(0,0,0,0.1)`	`rgba(0,0,0,0.3)`

Consultez la liste complète dans Variables CSS.

Personnalisation des Couleurs du Mode Sombre

Surchargez les variables sombres à l’intérieur du sélecteur data-theme="dark" ou de la media query prefers-color-scheme :

/* Surcharger la couleur primaire du mode sombre */
@media (prefers-color-scheme: dark) {
  .rdrp-root {
    --rdrp-color-primary: #a78bfa;
    --rdrp-color-primary-hover: #8b5cf6;
    --rdrp-color-primary-light: #2e1065;
    --rdrp-color-range-bg: #2e1065;
    --rdrp-color-text-today: #a78bfa;
  }
}

/* Appliquer aussi lors de la bascule manuelle en mode sombre */
.rdrp-root[data-theme="dark"] {
  --rdrp-color-primary: #a78bfa;
  --rdrp-color-primary-hover: #8b5cf6;
  --rdrp-color-primary-light: #2e1065;
  --rdrp-color-range-bg: #2e1065;
  --rdrp-color-text-today: #a78bfa;
}

Forcer le Mode Clair

Si votre application ne prend pas en charge le mode sombre, forcez le mode clair pour empêcher le sélecteur de basculer en fonction des préférences système :

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

Intégration avec le Thème de l’Application

Si votre application gère déjà une bascule de mode sombre (par ex. via une classe dark sur <html>), mappez-la sur data-theme:

// Synchroniser avec l'état du mode sombre de votre application
function ThemeSyncedPicker({ value, onChange }) {
  const isDark = useAppTheme(); // votre hook de thème

  return (
    <div data-theme={isDark ? "dark" : "light"}>
      <DatePicker value={value} onChange={onChange} />
    </div>
  );
}

Pour les frameworks qui utilisent <html class="dark"> (comme Next.js avec next-themes), vous pouvez ajouter une règle CSS pour faire le pont entre les deux :

html.dark .rdrp-root {
  /* Copiez les valeurs des variables du mode sombre ici, ou utilisez l'approche data-theme */
}

Ou définissez data-theme sur l’élément html à côté de la classe :

// Dans votre fournisseur de thème
document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");

Exemples en Direct

Bascule du Mode Sombre

Un exemple interactif montrant un DatePicker (en ligne) avec un bouton de bascule pour passer du mode clair au mode sombre.

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

function CompoundDarkMode() {
  const [value, setValue] = useState<Date | null>(null);
  const [isDark, setIsDark] = useState(false);

  return (
    <div>
      <button
        onClick={() => setIsDark((prev) => !prev)}
        style={{
          marginBottom: 12,
          padding: "6px 14px",
          border: "1px solid #d1d5db",
          borderRadius: 6,
          background: isDark ? "#374151" : "#fff",
          color: isDark ? "#f9fafb" : "#111827",
          cursor: "pointer",
          fontSize: 13,
        }}
      >
        {isDark ? "Switch to Light" : "Switch to Dark"}
      </button>
      <div
        className="rdrp-root"
        data-theme={isDark ? "dark" : "light"}
        style={{
          padding: 16,
          borderRadius: 8,
          background: isDark ? "#0f172a" : "#fff",
          display: "inline-block",
        }}
      >
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}

March 2026

Mode Sombre Forcé

Un DateTimePicker affiché en mode sombre en utilisant data-theme="dark" sur un fond sombre.

import { useState } from "react";
import { DateTimePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

function CustomDarkMode() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <div
      data-theme="dark"
      style={{
        padding: 24,
        borderRadius: 12,
        background: "#1e293b",
      }}
    >
      <DateTimePicker value={value} onChange={setValue} />
    </div>
  );
}