Colors

Switch color themes at runtime by overriding CSS custom properties on a wrapper element. Since the Tailwind v4 package reads all colors from semantic tokens, changing the underlying CSS variables instantly rebrands the entire picker.

The Tailwind v4 package uses oklch format for semantic tokens. Override --color-primary and --color-primary-foreground to rebrand the picker:

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind4";

const themes = {
  default: {},
  purple: {
    "--color-primary": "oklch(0.541 0.281 293.009)",
    "--color-primary-foreground": "oklch(1 0 0)",
  },
  rose: {
    "--color-primary": "oklch(0.586 0.237 17.584)",
    "--color-primary-foreground": "oklch(1 0 0)",
  },
  emerald: {
    "--color-primary": "oklch(0.696 0.17 162.48)",
    "--color-primary-foreground": "oklch(1 0 0)",
  },
} as const;

type ThemeName = keyof typeof themes;

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

  return (
    <div>
      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
        {(Object.keys(themes) as ThemeName[]).map((name) => (
          <button
            key={name}
            onClick={() => setTheme(name)}
            style={{
              padding: "4px 12px",
              borderRadius: 4,
              border: `1px solid ${theme === name ? "#3b82f6" : "#d1d5db"}`,
              background: theme === name ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 13,
              textTransform: "capitalize",
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <DatePicker.Root
        value={value}
        onChange={setValue}
        inline
        style={themes[theme] as React.CSSProperties}
      >
        <DatePicker.Content>
          <DatePicker.Header>
            <DatePicker.PrevButton />
            <DatePicker.Title />
            <DatePicker.NextButton />
          </DatePicker.Header>
          <DatePicker.Grid />
        </DatePicker.Content>
      </DatePicker.Root>
    </div>
  );
}

March 2026

The same technique works with popup pickers:

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind4";

const themes = {
  default: {},
  purple: {
    "--color-primary": "oklch(0.541 0.281 293.009)",
    "--color-primary-foreground": "oklch(1 0 0)",
  },
  rose: {
    "--color-primary": "oklch(0.586 0.237 17.584)",
    "--color-primary-foreground": "oklch(1 0 0)",
  },
  emerald: {
    "--color-primary": "oklch(0.696 0.17 162.48)",
    "--color-primary-foreground": "oklch(1 0 0)",
  },
} as const;

type ThemeName = keyof typeof themes;

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

  return (
    <div>
      <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
        {(Object.keys(themes) as ThemeName[]).map((name) => (
          <button
            key={name}
            onClick={() => setTheme(name)}
            style={{
              padding: "4px 12px",
              borderRadius: 4,
              border: `1px solid ${theme === name ? "#3b82f6" : "#d1d5db"}`,
              background: theme === name ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 13,
              textTransform: "capitalize",
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <DatePicker.Root
        value={value}
        onChange={setValue}
        style={themes[theme] as React.CSSProperties}
      >
        <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>
  );
}