Colores

Cambia los temas de color en tiempo de ejecución sobrescribiendo las propiedades personalizadas de CSS en un elemento contenedor. Dado que el paquete de Tailwind v4 lee todos los colores de tokens semánticos, cambiar las variables de CSS subyacentes cambia instantáneamente la marca de todo el selector.

El paquete de Tailwind v4 usa el formato oklch para los tokens semánticos. Sobrescribe --color-primary y --color-primary-foreground para cambiar la marca del selector:

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

Modo Emergente

La misma técnica funciona con los selectores emergentes:

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