Chế độ tối

Gói styled bao gồm hỗ trợ đầy đủ chế độ tối. Các giá trị tối được định nghĩa cho mỗi biến CSS, vì vậy toàn bộ bộ chọn sẽ tự động thích ứng.

Cách hoạt động

Chế độ tối được kích hoạt thông qua hai cơ chế:

  1. Tùy chọn hệ thống — truy vấn media prefers-color-scheme: dark
  2. Chuyển đổi thủ công — thuộc tính data-theme="dark" trên .rdrp-root hoặc một phần tử cha

Tùy chọn hệ thống được áp dụng theo mặc định. Nếu bạn đặt data-theme="light" hoặc data-theme="dark" một cách rõ ràng, nó sẽ ghi đè lên tùy chọn hệ thống.

Tự động (Tùy chọn hệ thống)

Không cần cài đặt. Bộ chọn tôn trọng cài đặt hệ điều hành của người dùng:

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


// Tự động theo chế độ tối/sáng của hệ thống
<DatePicker value={value} onChange={setValue} />;

CSS sử dụng @media (prefers-color-scheme: dark) để chuyển tất cả các biến --rdrp-* sang giá trị tối của chúng.

Chuyển đổi thủ công

Đặt data-theme trên gốc của bộ chọn hoặc bất kỳ phần tử cha nào:

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


  return (
    <div data-theme={dark ? "dark" : "light"}>
      <button onClick={() => setDark(!dark)}>Chuyển {dark ? "Sáng" : "Tối"}</button>
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

Hoặc áp dụng trực tiếp trên bộ chọn:

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

Khi sử dụng API Compound Component, hãy đặt nó trên Root:

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

Giá trị màu của Chế độ tối

Tất cả các biến màu sẽ tự động chuyển đổi. Dưới đây là những khác biệt chính:

BiếnSángTối
--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-popuprgba(0,0,0,0.1)rgba(0,0,0,0.3)

Xem danh sách đầy đủ trong Biến CSS.

Tùy chỉnh màu Chế độ tối

Ghi đè các biến tối bên trong bộ chọn data-theme="dark" hoặc truy vấn media prefers-color-scheme:

/* Ghi đè màu chính của chế độ tối */
@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;
  }
}


/* Cũng áp dụng khi chuyển đổi thủ công sang chế độ tối */
.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;
}

Bắt buộc Chế độ sáng

Nếu ứng dụng của bạn không hỗ trợ chế độ tối, hãy bắt buộc chế độ sáng để ngăn bộ chọn chuyển đổi dựa trên tùy chọn hệ thống:

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

Tích hợp với Giao diện ứng dụng

Nếu ứng dụng của bạn đã quản lý một công tắc chế độ tối (ví dụ: thông qua một lớp dark trên <html>), hãy ánh xạ nó tới data-theme:

// Đồng bộ với trạng thái chế độ tối của ứng dụng
function ThemeSyncedPicker({ value, onChange }) {
  const isDark = useAppTheme(); // hook giao diện của bạn


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

Đối với các framework sử dụng <html class="dark"> (như Next.js với next-themes), bạn có thể thêm một quy tắc CSS để kết nối cả hai:

html.dark .rdrp-root {
  /* Sao chép giá trị biến của chế độ tối vào đây, hoặc sử dụng phương pháp data-theme */
}

Hoặc đặt data-theme trên phần tử html cùng với lớp:

// Trong nhà cung cấp giao diện của bạn
document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");

Ví dụ trực tiếp

Công tắc Chế độ tối

Một ví dụ tương tác hiển thị một DatePicker (nội tuyến) với một nút chuyển đổi để qua lại giữa chế độ sáng và tối.

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
Su
Mo
Tu
We
Th
Fr
Sa

Chế độ tối bắt buộc

Một DateTimePicker được hiển thị ở chế độ tối bằng cách sử dụng data-theme="dark" trên nền tối.

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