顏色

透過在包裝器元素上覆寫 CSS 自訂屬性，在執行階段切換顏色主題。由於 Tailwind v4 套件從語義化權杖讀取所有顏色，因此變更底層的 CSS 變數會立即為整個選擇器更換品牌。

Tailwind v4 套件使用 oklch 格式作為語義化權杖。覆寫 --color-primary 和 --color-primary-foreground 來為選擇器更換品牌：

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

彈出模式

同樣的技術也適用於彈出式選擇器：

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