Modo Escuro

O pacote styled inclui suporte completo ao modo escuro. Valores para o modo escuro são definidos para cada variável CSS, então todo o seletor se adapta automaticamente.

Como Funciona

O modo escuro é ativado por dois mecanismos:

  1. Preferência do sistema — media query prefers-color-scheme: dark
  2. Alternância manual — atributo data-theme="dark" no elemento .rdrp-root ou em um elemento pai

A preferência do sistema é aplicada por padrão. Se você definir data-theme="light" ou data-theme="dark" explicitamente, isso sobrescreve a preferência do sistema.

Automático (Preferência do Sistema)

Nenhuma configuração é necessária. O seletor respeita a configuração do sistema operacional do usuário:

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


// Segue automaticamente o modo escuro/claro do sistema
<DatePicker value={value} onChange={setValue} />;

O CSS usa @media (prefers-color-scheme: dark) para alternar todas as variáveis --rdrp-* para seus valores do modo escuro.

Alternância Manual

Defina data-theme no elemento raiz do seletor ou em qualquer elemento ancestral:

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


  return (
    <div data-theme={dark ? "dark" : "light"}>
      <button onClick={() => setDark(!dark)}>Alternar para {dark ? "Claro" : "Escuro"}</button>
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

Ou aplique-o diretamente no seletor:

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

Ao usar a API de Componentes Compostos, defina-o em Root:

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

Valores de Cor do Modo Escuro

Todas as variáveis de cor mudam automaticamente. Aqui estão as principais diferenças:

VariávelClaroEscuro
--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-popuprgba(0,0,0,0.1)rgba(0,0,0,0.3)

Veja a lista completa em Variáveis CSS.

Personalizando as Cores do Modo Escuro

Sobrescreva as variáveis do modo escuro dentro do seletor data-theme="dark" ou da media query prefers-color-scheme:

/* Sobrescreve a cor primária do modo escuro */
@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;
  }
}


/* Também aplica ao alternar manualmente para o modo escuro */
.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;
}

Forçando o Modo Claro

Se o seu aplicativo não suporta o modo escuro, force o modo claro para evitar que o seletor mude com base na preferência do sistema:

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

Integração com o Tema do Aplicativo

Se o seu aplicativo já gerencia uma alternância de modo escuro (por exemplo, através de uma classe dark em <html>), mapeie-o para data-theme:

// Sincroniza com o estado do modo escuro do seu aplicativo
function ThemeSyncedPicker({ value, onChange }) {
  const isDark = useAppTheme(); // seu hook de tema


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

Para frameworks que usam <html class="dark"> (como Next.js com next-themes), você pode adicionar uma regra CSS para fazer a ponte entre os dois:

html.dark .rdrp-root {
  /* Copie os valores das variáveis do modo escuro aqui, ou use a abordagem data-theme */
}

Ou defina data-theme no elemento html junto com a classe:

// No seu provedor de tema
document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");

Exemplos ao Vivo

Alternância de Modo Escuro

Um exemplo interativo mostrando um DatePicker (inline) com um botão de alternância para mudar entre os modos claro e escuro.

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
Su
Mo
Tu
We
Th
Fr
Sa

Modo Escuro Forçado

Um DateTimePicker renderizado em modo escuro usando data-theme="dark" em um fundo escuro.

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