Tema Geçersiz Kılma

Tailwind v3 paketi, tüm stillendirme için somut Tailwind yardımcı sınıflarını (ör. sky-500, slate-100) kullanır. Paketten dışa aktarılan tema nesnesini geçersiz kılarak görünümü özelleştirebilirsiniz.

Varsayılan Tema

Tema, her biri bir bileşen parçası için sınıf adı dizeleri içeren bir dizi dışa aktarılmış nesne olarak tanımlanır. İşte varsayılan renk paletine bir genel bakış:

Rol	Light Sınıfı	Dark Sınıfı
Birincil	`sky-500`	`sky-500`
Birincil metin	`sky-500`	`sky-400`
Arka plan	`white`	`slate-950`
Yüzey üzerine gelme	`slate-100`	`slate-800`
Metin	`slate-900`	`slate-50`
Sessiz metin	`slate-500`	`slate-400`
Kenarlık	`slate-200`	`slate-800`
Aralık arka planı	`sky-50`	`sky-950/50`
Tehlike	`red-500`	`red-600`

Tema Nesne Yapısı

Tema, birden çok adlandırılmış dışa aktarıma bölünmüştür:

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

Her nesne, tam Tailwind sınıf dizelerine eşlenen anahtarlar içerir. Örneğin:

// 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 ...",
  // ...
}

Bileşik Bileşenlerle Geçersiz Kılma

Temayı özelleştirmenin en basit yolu Bileşik Bileşen API’sini kullanmaktır. Her parça, varsayılanlarla twMerge kullanılarak birleştirilen bir className prop’u kabul eder, böylece çakışan yardımcı programlar doğru şekilde çözülür.

Birincil Rengi Değiştir

Seçili gün ve ilgili durumlar için sky’ı violet ile değiştirin:

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

Özel Arka Plan

<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>

Özel Bir Tema Nesnesi Oluşturma

Uygulama genelinde yeniden markalama için, özel sınıflarınızı tüm parçalara uygulayan bir sarmalayıcı bileşen oluşturun:

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

Uygulamanız boyunca kullanın:

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

Grid Günü Sınıfı Prop’ları

Grid bileşeni, güne ilişkin className prop’larını her bir Day hücresine iletir. Mevcut geçersiz kılmalar şunlardır:

Prop	Varsayılan Sınıf Deseni	Açıklama
`dayClassName`	Temel gün stilleri	Tüm gün hücreleri için temel sınıflar
`dayTodayClassName`	`text-sky-500`	Bugün göstergesi
`daySelectedClassName`	`bg-sky-500 text-white`	Seçili gün
`dayDisabledClassName`	`opacity-50`	Devre dışı bırakılmış günler
`dayOutsideClassName`	`text-slate-500/50`	Ay dışındaki günler
`dayHighlightedClassName`	`after:bg-amber-500`	Vurgulama noktası
`dayInRangeClassName`	`bg-sky-50`	Aralık içindeki günler
`dayRangeStartClassName`	`bg-sky-500 rounded-r-none`	Aralık başlangıç günü
`dayRangeEndClassName`	`bg-sky-500 rounded-l-none`	Aralık bitiş günü
`dayRangeSingleClassName`	`bg-sky-500`	Tek günlük aralık
`dayHoverRangeClassName`	`bg-sky-50/50`	Üzerine gelme önizleme aralığı
`dayHoverTargetClassName`	`bg-sky-100`	Üzerine gelme bitiş noktası
`dayFocusedClassName`	`ring-sky-500`	Klavye odak halkası
`dayEmptyClassName`	`invisible`	Boş hücre yer tutucusu

Tailwind Content Yolu

Özel renk sınıflarıyla geçersiz kılma yaparken, bunların Tailwind content yollarınıza dahil edildiğinden emin olun. Bileşen dosyalarınızda tanımlanan sınıflar varsayılan olarak taranır, ancak bunları ayrı bir yapılandırma dosyasında tanımlarsanız, o yolu da ekleyin:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
    // Tema yapılandırmanız ayrı bir dosyadaysa onu ekleyin
    "./src/config/date-picker-theme.ts",
  ],
};

💡 Tip

Somut renk sınıfları yerine anlamsal belirteç tabanlı tema oluşturma (shadcn/ui gibi) istiyorsanız, CSS değişken tabanlı anlamsal belirteçler kullanan Tailwind v4 paketini kullanmayı düşünün.