테마 재정의

Tailwind v3 패키지는 모든 스타일에 구체적인 Tailwind 유틸리티 클래스(예: sky-500, slate-100)를 사용합니다. 패키지에서 내보낸 테마 객체를 재정의하여 모양을 사용자 정의할 수 있습니다.

기본 테마

테마는 각 컴포넌트 파트에 대한 클래스 이름 문자열을 포함하는 내보내진 객체들의 집합으로 정의됩니다. 다음은 기본 색상 팔레트의 개요입니다:

역할	라이트 클래스	다크 클래스
기본	`sky-500`	`sky-500`
기본 텍스트	`sky-500`	`sky-400`
배경	`white`	`slate-950`
표면 호버	`slate-100`	`slate-800`
텍스트	`slate-900`	`slate-50`
흐린 텍스트	`slate-500`	`slate-400`
테두리	`slate-200`	`slate-800`
범위 배경	`sky-50`	`sky-950/50`
위험	`red-500`	`red-600`

테마 객체 구조

테마는 여러 개의 이름있는 내보내기(named exports)로 나뉩니다:

import {
  rootClassNames,
  triggerClassNames,
  headerClassNames,
  gridClassNames,
  dayClassNames,
  footerClassNames,
  contentClassNames,
  rangeClassNames,
  dateTimeClassNames,
  timePanelClassNames,
} from "react-date-range-picker-tailwind3";

각 객체는 전체 Tailwind 클래스 문자열에 매핑되는 키를 포함합니다. 예를 들어:

// dayClassNames
{
  day: "flex items-center justify-center w-9 h-9 mx-[1px] rounded-md transition-colors cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800 ...",
  today: "font-bold text-sky-500 dark:text-sky-400",
  selected: "bg-sky-500 dark:bg-sky-500 text-white font-semibold ...",
  inRange: "bg-sky-50 dark:bg-sky-950/50 text-slate-900 dark:text-slate-50 rounded-none mx-0 ...",
  rangeStart: "bg-sky-500 dark:bg-sky-500 text-white rounded-r-none mx-0 ...",
  rangeEnd: "bg-sky-500 dark:bg-sky-500 text-white rounded-l-none mx-0 ...",
  // ...
}

Compound Components로 재정의하기

테마를 사용자 정의하는 가장 간단한 방법은 Compound Component API를 사용하는 것입니다. 각 파트는 className prop을 받으며, 이 prop은 twMerge를 사용하여 기본값과 병합되므로 충돌하는 유틸리티가 올바르게 해결됩니다.

기본 색상 변경

선택된 날짜 및 관련 상태에 대해 sky를 violet으로 교체합니다:

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

function VioletPicker() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DatePicker.Root value={value} onChange={setValue}>
      <DatePicker.Trigger className="hover:border-violet-500/50 focus-visible:ring-violet-500 focus-visible:border-violet-500" />
      <DatePicker.Content>
        <DatePicker.Header>
          <DatePicker.PrevButton className="focus-visible:ring-violet-500" />
          <DatePicker.Title />
          <DatePicker.NextButton className="focus-visible:ring-violet-500" />
        </DatePicker.Header>
        <DatePicker.Grid
          dayClassName="hover:bg-violet-50 dark:hover:bg-violet-950/50 focus-visible:ring-violet-500"
          dayTodayClassName="text-violet-500 dark:text-violet-400"
          daySelectedClassName="bg-violet-500 dark:bg-violet-500 hover:bg-violet-500/90"
          dayInRangeClassName="bg-violet-50 dark:bg-violet-950/50 hover:bg-violet-100"
          dayRangeStartClassName="bg-violet-500 dark:bg-violet-500 hover:bg-violet-500/90"
          dayRangeEndClassName="bg-violet-500 dark:bg-violet-500 hover:bg-violet-500/90"
          dayFocusedClassName="ring-violet-500"
        />
        <DatePicker.Footer>
          <DatePicker.ClearButton />
          <DatePicker.CancelButton />
          <DatePicker.ConfirmButton className="bg-violet-500 hover:bg-violet-500/90 focus-visible:ring-violet-500" />
        </DatePicker.Footer>
      </DatePicker.Content>
    </DatePicker.Root>
  );
}

사용자 정의 배경

<DatePicker.Root value={value} onChange={setValue}>
  <DatePicker.Trigger className="bg-slate-50 dark:bg-slate-900" />
  <DatePicker.Content className="bg-slate-50 dark:bg-slate-900">{/* ... */}</DatePicker.Content>
</DatePicker.Root>

사용자 정의 테마 객체 만들기

앱 전체의 리브랜딩을 위해서는 모든 파트에 사용자 정의 클래스를 적용하는 래퍼 컴포넌트를 만듭니다:

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

const myTheme = {
  trigger: "hover:border-emerald-500/50 focus-visible:ring-emerald-500",
  dayToday: "text-emerald-500 dark:text-emerald-400",
  daySelected: "bg-emerald-500 dark:bg-emerald-500 hover:bg-emerald-500/90",
  dayInRange: "bg-emerald-50 dark:bg-emerald-950/50 hover:bg-emerald-100",
  dayRangeStart: "bg-emerald-500 dark:bg-emerald-500 hover:bg-emerald-500/90",
  dayRangeEnd: "bg-emerald-500 dark:bg-emerald-500 hover:bg-emerald-500/90",
  confirmButton: "bg-emerald-500 hover:bg-emerald-500/90 focus-visible:ring-emerald-500",
  focusRing: "focus-visible:ring-emerald-500",
};

export function MyDatePicker(props) {
  return (
    <DatePicker.Root {...props}>
      <DatePicker.Trigger className={myTheme.trigger} />
      <DatePicker.Content>
        <DatePicker.Header>
          <DatePicker.PrevButton className={myTheme.focusRing} />
          <DatePicker.Title />
          <DatePicker.NextButton className={myTheme.focusRing} />
        </DatePicker.Header>
        <DatePicker.Grid
          dayTodayClassName={myTheme.dayToday}
          daySelectedClassName={myTheme.daySelected}
          dayInRangeClassName={myTheme.dayInRange}
          dayRangeStartClassName={myTheme.dayRangeStart}
          dayRangeEndClassName={myTheme.dayRangeEnd}
          dayFocusedClassName={myTheme.focusRing}
        />
        <DatePicker.Footer>
          <DatePicker.ClearButton />
          <DatePicker.CancelButton />
          <DatePicker.ConfirmButton className={myTheme.confirmButton} />
        </DatePicker.Footer>
      </DatePicker.Content>
    </DatePicker.Root>
  );
}

앱 전체에서 다음과 같이 사용합니다:

<MyDatePicker value={date} onChange={setDate} />

Grid Day 클래스 Props

Grid 컴포넌트는 날짜 관련 className props를 각 Day 셀로 전달합니다. 사용 가능한 재정의(overrides)는 다음과 같습니다:

Prop	기본 클래스 패턴	설명
`dayClassName`	기본 날짜 스타일	모든 날짜 셀의 기본 클래스
`dayTodayClassName`	`text-sky-500`	오늘 날짜 표시
`daySelectedClassName`	`bg-sky-500 text-white`	선택된 날짜
`dayDisabledClassName`	`opacity-50`	비활성화된 날짜
`dayOutsideClassName`	`text-slate-500/50`	현재 월의 범위를 벗어난 날짜
`dayHighlightedClassName`	`after:bg-amber-500`	강조점
`dayInRangeClassName`	`bg-sky-50`	범위 내의 날짜
`dayRangeStartClassName`	`bg-sky-500 rounded-r-none`	범위 시작 날짜
`dayRangeEndClassName`	`bg-sky-500 rounded-l-none`	범위 종료 날짜
`dayRangeSingleClassName`	`bg-sky-500`	단일 날짜 범위
`dayHoverRangeClassName`	`bg-sky-50/50`	호버 미리보기 범위
`dayHoverTargetClassName`	`bg-sky-100`	호버 끝점
`dayFocusedClassName`	`ring-sky-500`	키보드 포커스 링
`dayEmptyClassName`	`invisible`	빈 셀 플레이스홀더

Tailwind Content 경로

사용자 정의 색상 클래스로 재정의할 때, 해당 클래스가 Tailwind content 경로에 포함되어 있는지 확인해야 합니다. 컴포넌트 파일에 정의된 클래스는 기본적으로 스캔되지만, 별도의 설정 파일에 정의했다면 해당 경로도 추가해야 합니다:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
    // Add your theme config if it's in a separate file
    "./src/config/date-picker-theme.ts",
  ],
};

💡 Tip

구체적인 색상 클래스 대신 (shadcn/ui와 같은) 시맨틱 토큰 기반 테마를 원한다면, CSS 변수 기반 시맨틱 토큰을 사용하는 Tailwind v4 패키지 사용을 고려해 보세요.