Colors

Switch the color theme at runtime by overriding CSS custom properties on a wrapper element. The styled package uses --rdrp-color-primary, --rdrp-color-primary-hover, --rdrp-color-primary-light, and --rdrp-color-primary-lighter for all primary accent colors.

Inline Theme Switcher

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


const themes: Record<string, React.CSSProperties> = {
  default: {},
  purple: {
    "--rdrp-color-primary": "#8b5cf6",
    "--rdrp-color-primary-hover": "#7c3aed",
    "--rdrp-color-primary-light": "#ede9fe",
    "--rdrp-color-primary-lighter": "#f5f3ff",
  } as React.CSSProperties,
  rose: {
    "--rdrp-color-primary": "#f43f5e",
    "--rdrp-color-primary-hover": "#e11d48",
    "--rdrp-color-primary-light": "#ffe4e6",
    "--rdrp-color-primary-lighter": "#fff1f2",
  } as React.CSSProperties,
  emerald: {
    "--rdrp-color-primary": "#10b981",
    "--rdrp-color-primary-hover": "#059669",
    "--rdrp-color-primary-light": "#d1fae5",
    "--rdrp-color-primary-lighter": "#ecfdf5",
  } as React.CSSProperties,
};


const themeNames = Object.keys(themes);


function CompoundColorTheme() {
  const [value, setValue] = useState<Date | null>(null);
  const [theme, setTheme] = useState("default");


  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        {themeNames.map((name) => (
          <button
            key={name}
            onClick={() => setTheme(name)}
            style={{
              padding: "6px 14px",
              border: `1px solid ${theme === name ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: theme === name ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 13,
              textTransform: "capitalize",
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <DatePicker.Root value={value} onChange={setValue} inline style={themes[theme]}>
        <DatePicker.Content>
          <DatePicker.Header>
            <DatePicker.PrevButton />
            <DatePicker.Title />
            <DatePicker.NextButton />
          </DatePicker.Header>
          <DatePicker.Grid />
        </DatePicker.Content>
      </DatePicker.Root>
    </div>
  );
}
March 2026
Su
Mo
Tu
We
Th
Fr
Sa

The same approach works with popup pickers:

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


const themes: Record<string, React.CSSProperties> = {
  default: {},
  purple: {
    "--rdrp-color-primary": "#8b5cf6",
    "--rdrp-color-primary-hover": "#7c3aed",
    "--rdrp-color-primary-light": "#ede9fe",
    "--rdrp-color-primary-lighter": "#f5f3ff",
  } as React.CSSProperties,
  rose: {
    "--rdrp-color-primary": "#f43f5e",
    "--rdrp-color-primary-hover": "#e11d48",
    "--rdrp-color-primary-light": "#ffe4e6",
    "--rdrp-color-primary-lighter": "#fff1f2",
  } as React.CSSProperties,
  emerald: {
    "--rdrp-color-primary": "#10b981",
    "--rdrp-color-primary-hover": "#059669",
    "--rdrp-color-primary-light": "#d1fae5",
    "--rdrp-color-primary-lighter": "#ecfdf5",
  } as React.CSSProperties,
};


const themeNames = Object.keys(themes);


function CompoundColorThemePopup() {
  const [value, setValue] = useState<Date | null>(null);
  const [theme, setTheme] = useState("default");


  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        {themeNames.map((name) => (
          <button
            key={name}
            onClick={() => setTheme(name)}
            style={{
              padding: "6px 14px",
              border: `1px solid ${theme === name ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: theme === name ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 13,
              textTransform: "capitalize",
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <DatePicker.Root value={value} onChange={setValue} style={themes[theme]}>
        <DatePicker.Trigger />
        <DatePicker.Content>
          <DatePicker.Header>
            <DatePicker.PrevButton />
            <DatePicker.Title />
            <DatePicker.NextButton />
          </DatePicker.Header>
          <DatePicker.Grid />
          <DatePicker.Footer>
            <DatePicker.ClearButton />
            <DatePicker.CancelButton />
            <DatePicker.ConfirmButton />
          </DatePicker.Footer>
        </DatePicker.Content>
      </DatePicker.Root>
    </div>
  );
}

CSS Variable Inline Style

You can also override colors directly via the style attribute on a wrapper element:

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


function CSSCustomColors() {
  const [value, setValue] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null,
  });


  return (
    <div
      style={{
        ["--rdrp-color-primary" as string]: "#8b5cf6",
        ["--rdrp-color-primary-hover" as string]: "#7c3aed",
        ["--rdrp-color-primary-light" as string]: "#ede9fe",
        ["--rdrp-color-primary-lighter" as string]: "#f5f3ff",
        ["--rdrp-color-primary-disabled" as string]: "#c4b5fd",
        ["--rdrp-color-range-bg" as string]: "#ede9fe",
        ["--rdrp-color-hover-range-bg" as string]: "#f5f3ff",
        ["--rdrp-color-hover-target-bg" as string]: "#ddd6fe",
        ["--rdrp-color-text-today" as string]: "#7c3aed",
        ["--rdrp-color-border-hover" as string]: "#c4b5fd",
      }}
    >
      <DateRangePicker value={value} onChange={setValue} />
    </div>
  );
}