Modo Escuro

O pacote Tailwind v3 inclui suporte completo ao modo escuro via propriedades personalizadas CSS. O plugin Tailwind (rdrpPlugin) injeta variáveis de cor que alternam automaticamente entre paletas clara e escura.

Como Funciona

O plugin Tailwind v3 (rdrpPlugin) injeta propriedades personalizadas CSS que definem a paleta de cores. O modo escuro funciona sobrescrevendo essas variáveis sob .dark ou [data-theme="dark"]:

Modo claro — :root define as cores padrão (paleta Slate + Sky)
Modo escuro — .dark e [data-theme="dark"] sobrescrevem as cores automaticamente

O tema do componente referencia esses valores via var(--rdrp-color-*), então o modo escuro é ativado quando sua estratégia darkMode do Tailwind aciona o seletor apropriado.

Configuração do Tailwind

Estratégia de Classe (Recomendado)

Defina darkMode: "class" em sua configuração do Tailwind. O modo escuro é ativado quando uma classe dark está no elemento <html> ou em um elemento pai:

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

Para alternar o modo escuro:

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>
  );
}

Ou aplique a classe em <html>:

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

Estratégia de Seletor

O Tailwind v3.4+ suporta darkMode: "selector", que permite usar [data-theme="dark"] ou qualquer seletor 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>

Estratégia de Mídia

Defina darkMode: "media" (ou omita — este é o padrão) para seguir a preferência do sistema operacional:

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

Nenhuma configuração adicional é necessária. O seletor seguirá o prefers-color-scheme.

Variáveis de Cor

Aqui estão as propriedades personalizadas CSS usadas para o tema claro/escuro:

Variável	Claro	Escuro
`--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)`

Integração com Docusaurus

Se você estiver usando o Docusaurus (que usa data-theme em <html>), configure a estratégia de seletor do 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],
};

O Docusaurus define <html data-theme="dark"> quando o modo escuro está ativo, e as variáveis CSS mudarão automaticamente para valores escuros.

Integração com 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>
  );
}

O next-themes adiciona/remove a classe dark em <html>. Com darkMode: "class" na sua configuração do Tailwind, o seletor alterna automaticamente.

Forçando um Modo Específico

Para forçar o seletor a usar sempre o modo claro ou escuro, envolva-o em um contêiner com a classe apropriada:

{
  /* Sempre claro — nenhum ancestral com a classe "dark" */
}
<div className="">
  <DatePicker value={value} onChange={setValue} />
</div>;

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

📝 Note

Ao usar darkMode: "class", a classe dark deve estar em um elemento pai ou em <html>. O seletor em si não gerencia a alternância do modo escuro.