Modo Oscuro

El paquete Tailwind v3 incluye soporte completo para el modo oscuro mediante propiedades personalizadas de CSS. El plugin de Tailwind (rdrpPlugin) inyecta variables de color que cambian automáticamente entre paletas clara y oscura.

Cómo Funciona

El plugin de Tailwind v3 (rdrpPlugin) inyecta propiedades personalizadas de CSS que definen la paleta de colores. El modo oscuro funciona sobrescribiendo estas variables bajo .dark o [data-theme="dark"]:

Modo claro — :root define los colores por defecto (paleta Slate + Sky)
Modo oscuro — .dark y [data-theme="dark"] sobrescriben los colores automáticamente

El tema del componente referencia estos valores mediante var(--rdrp-color-*), por lo que el modo oscuro se activa cuando tu estrategia darkMode de Tailwind activa el selector apropiado.

Configuración de Tailwind

Estrategia de Clase (Recomendada)

Establece darkMode: "class" en tu configuración de Tailwind. El modo oscuro se activa cuando una clase dark está en la etiqueta <html> o en un elemento padre:

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],
};

Alternar el modo oscuro:

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

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

O aplica la clase en <html>:

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

Estrategia de Selector

Tailwind v3.4+ soporta darkMode: "selector", lo que permite usar [data-theme="dark"] o cualquier selector personalizado:

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>

Estrategia de Media

Establece darkMode: "media" (o omítelo — es el valor por defecto) para seguir la preferencia del sistema operativo:

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],
};

No se requiere configuración adicional. El selector seguirá la preferencia prefers-color-scheme.

Variables de Color

Aquí están las propiedades personalizadas de CSS utilizadas para el tema claro/oscuro:

Variable	Claro	Oscuro
`--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)`

Integración con Docusaurus

Si estás usando Docusaurus (que usa data-theme en <html>), configura la estrategia de selector 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 establece <html data-theme="dark"> cuando el modo oscuro está activo, y las variables CSS cambiarán automáticamente a valores oscuros.

Integración con 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 añade/elimina la clase dark en <html>. Con darkMode: "class" en tu configuración de Tailwind, el selector cambia automáticamente.

Forzar un Modo Específico

Para forzar que el selector use siempre el modo claro u oscuro, envuélvelo en un contenedor con la clase apropiada:

{
  /* Siempre claro — sin ancestro con clase "dark" */
}
<div className="">
  <DatePicker value={value} onChange={setValue} />
</div>;

{
  /* Siempre oscuro */
}
<div className="dark">
  <DatePicker value={value} onChange={setValue} />
</div>;

📝 Note

Cuando se usa darkMode: "class", la clase dark debe estar en un elemento padre o en <html>. El selector en sí no gestiona la activación del modo oscuro.