โหมดมืด

แพ็คเกจ styled รองรับโหมดมืดอย่างเต็มรูปแบบ ค่าสีสำหรับโหมดมืดถูกกำหนดไว้ในทุกๆ CSS variable ทำให้ตัวเลือกวันที่ทั้งหมดปรับเปลี่ยนโดยอัตโนมัติ

วิธีการทำงาน

โหมดมืดสามารถเปิดใช้งานได้ 2 วิธี:

การตั้งค่าของระบบ — prefers-color-scheme: dark media query
การสลับด้วยตนเอง — data-theme="dark" attribute บน .rdrp-root หรือ element แม่

โดยปกติแล้วจะใช้การตั้งค่าของระบบเป็นค่าเริ่มต้น หากคุณตั้งค่า data-theme="light" หรือ data-theme="dark" อย่างชัดเจน มันจะไปแทนที่การตั้งค่าของระบบ

อัตโนมัติ (ตามการตั้งค่าระบบ)

ไม่จำเป็นต้องตั้งค่าใดๆ ตัวเลือกวันที่จะปรับตามการตั้งค่า OS ของผู้ใช้:

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

// Automatically follows system dark/light mode
<DatePicker value={value} onChange={setValue} />;

CSS ใช้ @media (prefers-color-scheme: dark) เพื่อสลับตัวแปร --rdrp-* ทั้งหมดไปเป็นค่าสำหรับโหมดมืด

การสลับด้วยตนเอง

ตั้งค่า data-theme บน root element ของ picker หรือ element แม่ใดๆ:

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

หรือจะกำหนดโดยตรงบน picker ก็ได้:

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

เมื่อใช้ Compound Component API ให้ตั้งค่าที่ Root:

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

ค่าสีในโหมดมืด

ตัวแปรสีทั้งหมดจะสลับโดยอัตโนมัติ นี่คือความแตกต่างที่สำคัญ:

ตัวแปร	โหมดสว่าง	โหมดมืด
`--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)`

ดูรายการทั้งหมดได้ที่ CSS Variables

การปรับแต่งสีโหมดมืด

คุณสามารถ override ตัวแปรสำหรับโหมดมืดได้ภายใน data-theme="dark" selector หรือ prefers-color-scheme media query:

/* Override dark mode primary color */
@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;
  }
}

/* Also apply when manually toggled to dark */
.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;
}

การบังคับใช้โหมดสว่าง

หากแอปของคุณไม่รองรับโหมดมืด คุณสามารถบังคับใช้โหมดสว่างเพื่อป้องกันไม่ให้ picker สลับโหมดตามการตั้งค่าของระบบ:

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

การผสานรวมกับธีมของแอปพลิเคชัน

หากแอปของคุณมีการจัดการการสลับโหมดมืดอยู่แล้ว (เช่น ผ่าน dark class บน <html>) คุณสามารถ map มันเข้ากับ data-theme ได้:

// Sync with your app's dark mode state
function ThemeSyncedPicker({ value, onChange }) {
  const isDark = useAppTheme(); // your theme hook

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

สำหรับเฟรมเวิร์กที่ใช้ <html class="dark"> (เช่น Next.js กับ next-themes) คุณสามารถเพิ่ม CSS rule เพื่อเชื่อมทั้งสองเข้าด้วยกัน:

html.dark .rdrp-root {
  /* Copy dark mode variable values here, or use data-theme approach */
}

หรือตั้งค่า data-theme บน html element ควบคู่ไปกับ class:

// In your theme provider
document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");

ตัวอย่างการใช้งานจริง

ตัวสลับโหมดมืด

ตัวอย่างแบบโต้ตอบที่แสดง DatePicker (แบบ inline) พร้อมปุ่มสลับระหว่างโหมดสว่างและโหมดมืด

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

โหมดมืดแบบบังคับ

DateTimePicker ที่แสดงผลในโหมดมืดโดยใช้ data-theme="dark" บนพื้นหลังสีเข้ม

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