Koyu Mod

Styled paketi tam koyu mod desteği içerir. Her CSS değişkeni için koyu değerler tanımlanmıştır, bu sayede tüm seçici otomatik olarak uyum sağlar.

Nasıl Çalışır

Koyu mod iki mekanizma ile etkinleştirilir:

Sistem tercihi — prefers-color-scheme: dark medya sorgusu
Manuel geçiş — .rdrp-root veya bir üst öğedeki data-theme="dark" özelliği

Sistem tercihi varsayılan olarak uygulanır. Eğer data-theme="light" veya data-theme="dark" değerini açıkça ayarlarsanız, sistem tercihini geçersiz kılar.

Otomatik (Sistem Tercihi)

Kurulum gerektirmez. Seçici, kullanıcının işletim sistemi ayarına uyar:

import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

// Sistem koyu/açık modunu otomatik olarak takip eder
<DatePicker value={value} onChange={setValue} />;

CSS, tüm --rdrp-* değişkenlerini koyu değerlerine değiştirmek için @media (prefers-color-scheme: dark) kullanır.

Manuel Geçiş

Seçici kökünde veya herhangi bir üst öğede data-theme ayarlayın:

function App() {
  const [dark, setDark] = useState(false);

  return (
    <div data-theme={dark ? "dark" : "light"}>
      <button onClick={() => setDark(!dark)}>Toggle {dark ? "Light" : "Dark"}</button>
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

Veya doğrudan seçici üzerinde uygulayın:

<DatePicker value={value} onChange={setValue} data-theme="dark" />

Compound Component API’sini kullanırken, bunu Root üzerinde ayarlayın:

<DatePicker.Root value={value} onChange={setValue} data-theme="dark">
  <DatePicker.Trigger />
  <DatePicker.Content>{/* ... */}</DatePicker.Content>
</DatePicker.Root>

Koyu Mod Renk Değerleri

Tüm renk değişkenleri otomatik olarak değişir. İşte temel farklar:

Değişken	Açık	Koyu
`--rdrp-color-primary`	`#3b82f6`	`#60a5fa`
`--rdrp-color-bg`	`#ffffff`	`#1f2937`
`--rdrp-color-bg-hover`	`#f3f4f6`	`#374151`
`--rdrp-color-text`	`#374151`	`#e5e7eb`
`--rdrp-color-text-strong`	`#111827`	`#f9fafb`
`--rdrp-color-text-muted`	`#6b7280`	`#9ca3af`
`--rdrp-color-border`	`#d1d5db`	`#4b5563`
`--rdrp-color-range-bg`	`#dbeafe`	`#1e3a5f`
`--rdrp-color-text-today`	`#2563eb`	`#60a5fa`
`--rdrp-shadow-popup`	`rgba(0,0,0,0.1)`	`rgba(0,0,0,0.3)`

Tam listeyi CSS Değişkenleri sayfasında görebilirsiniz.

Koyu Mod Renklerini Özelleştirme

Koyu mod değişkenlerini data-theme="dark" seçicisi veya prefers-color-scheme medya sorgusu içinde geçersiz kılın:

/* Koyu mod birincil rengini geçersiz kıl */
@media (prefers-color-scheme: dark) {
  .rdrp-root {
    --rdrp-color-primary: #a78bfa;
    --rdrp-color-primary-hover: #8b5cf6;
    --rdrp-color-primary-light: #2e1065;
    --rdrp-color-range-bg: #2e1065;
    --rdrp-color-text-today: #a78bfa;
  }
}

/* Manuel olarak koyu moda geçirildiğinde de uygula */
.rdrp-root[data-theme="dark"] {
  --rdrp-color-primary: #a78bfa;
  --rdrp-color-primary-hover: #8b5cf6;
  --rdrp-color-primary-light: #2e1065;
  --rdrp-color-range-bg: #2e1065;
  --rdrp-color-text-today: #a78bfa;
}

Açık Modu Zorlama

Uygulamanız koyu modu desteklemiyorsa, seçicinin sistem tercihine göre değişmesini önlemek için açık modu zorlayın:

<div data-theme="light">
  <DatePicker value={value} onChange={setValue} />
</div>

Uygulama Teması ile Entegrasyon

Uygulamanız zaten bir koyu mod geçişini yönetiyorsa (ör. <html> üzerinde bir dark sınıfı aracılığıyla), bunu data-theme ile eşleştirin:

// Uygulamanızın koyu mod durumuyla senkronize edin
function ThemeSyncedPicker({ value, onChange }) {
  const isDark = useAppTheme(); // sizin tema hook'unuz

  return (
    <div data-theme={isDark ? "dark" : "light"}>
      <DatePicker value={value} onChange={onChange} />
    </div>
  );
}

<html class="dark"> kullanan (Next.js ile next-themes gibi) framework’ler için, ikisi arasında köprü kurmak üzere bir CSS kuralı ekleyebilirsiniz:

html.dark .rdrp-root {
  /* Koyu mod değişken değerlerini buraya kopyalayın veya data-theme yaklaşımını kullanın */
}

Veya sınıfın yanında html öğesi üzerinde data-theme ayarlayın:

// Tema sağlayıcınızda
document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");

Canlı Örnekler

Koyu Mod Geçişi

Açık ve koyu modlar arasında geçiş yapmak için bir geçiş düğmesi ile birlikte bir DatePicker (satır içi) gösteren etkileşimli bir örnek.

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

function CompoundDarkMode() {
  const [value, setValue] = useState<Date | null>(null);
  const [isDark, setIsDark] = useState(false);

  return (
    <div>
      <button
        onClick={() => setIsDark((prev) => !prev)}
        style={{
          marginBottom: 12,
          padding: "6px 14px",
          border: "1px solid #d1d5db",
          borderRadius: 6,
          background: isDark ? "#374151" : "#fff",
          color: isDark ? "#f9fafb" : "#111827",
          cursor: "pointer",
          fontSize: 13,
        }}
      >
        {isDark ? "Switch to Light" : "Switch to Dark"}
      </button>
      <div
        className="rdrp-root"
        data-theme={isDark ? "dark" : "light"}
        style={{
          padding: 16,
          borderRadius: 8,
          background: isDark ? "#0f172a" : "#fff",
          display: "inline-block",
        }}
      >
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}

March 2026

Zorunlu Koyu Mod

Koyu bir arka plan üzerinde data-theme="dark" kullanılarak koyu modda oluşturulmuş bir DateTimePicker.

import { useState } from "react";
import { DateTimePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

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

  return (
    <div
      data-theme="dark"
      style={{
        padding: 24,
        borderRadius: 12,
        background: "#1e293b",
      }}
    >
      <DateTimePicker value={value} onChange={setValue} />
    </div>
  );
}