Dark Mode

The styled package includes full dark mode support. Dark values are defined for every CSS variable, so the entire picker adapts automatically.

How It Works

Dark mode is activated through two mechanisms:

  1. System preference — prefers-color-scheme: dark media query
  2. Manual toggle — data-theme="dark" attribute on .rdrp-root or a parent element

The system preference is applied by default. If you set data-theme="light" or data-theme="dark" explicitly, it overrides the system preference.

Automatic (System Preference)

No setup required. The picker respects the user’s OS setting:

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


// Automatically follows system dark/light mode
<DatePicker value={value} onChange={setValue} />;

The CSS uses @media (prefers-color-scheme: dark) to switch all --rdrp-* variables to their dark values.

Manual Toggle

Set data-theme on the picker root or any ancestor element:

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


  return (
    <div data-theme={dark ? "dark" : "light"}>
      <button onClick={() => setDark(!dark)}>Toggle {dark ? "Light" : "Dark"}</button>
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

Or apply it directly on the picker:

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

When using the Compound Component API, set it on Root:

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

Dark Mode Color Values

All color variables switch automatically. Here are the key differences:

VariableLightDark
--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)

See the full list in CSS Variables.

Customizing Dark Mode Colors

Override the dark variables inside the data-theme="dark" selector or the prefers-color-scheme media query:

/* Override dark mode primary color */
@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;
  }
}


/* Also apply when manually toggled to dark */
.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;
}

Forcing Light Mode

If your app doesn’t support dark mode, force light mode to prevent the picker from switching based on system preference:

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

Integration with App Theme

If your app already manages a dark mode toggle (e.g. via a dark class on <html>), map it to data-theme:

// Sync with your app's dark mode state
function ThemeSyncedPicker({ value, onChange }) {
  const isDark = useAppTheme(); // your theme hook


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

For frameworks that use <html class="dark"> (like Next.js with next-themes), you can add a CSS rule to bridge the two:

html.dark .rdrp-root {
  /* Copy dark mode variable values here, or use data-theme approach */
}

Or set data-theme on the html element alongside the class:

// In your theme provider
document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");

Live Examples

Dark Mode Toggle

An interactive example showing a DatePicker (inline) with a toggle button to switch between light and dark modes.

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

Forced Dark Mode

A DateTimePicker rendered in dark mode using data-theme="dark" on a dark background.

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