Chế độ tối

Gói Tailwind v3 bao gồm hỗ trợ chế độ tối đầy đủ thông qua CSS custom properties. Plugin Tailwind (rdrpPlugin) chèn các biến màu tự động chuyển đổi giữa bảng màu sáng và tối.

Cách hoạt động

Plugin Tailwind v3 (rdrpPlugin) chèn các CSS custom properties định nghĩa bảng màu. Chế độ tối hoạt động bằng cách ghi đè các biến này dưới .dark hoặc [data-theme="dark"]:

Chế độ sáng — :root định nghĩa các màu mặc định (bảng màu Slate + Sky)
Chế độ tối — .dark và [data-theme="dark"] ghi đè màu tự động

Theme của component tham chiếu các giá trị này qua var(--rdrp-color-*), vì vậy chế độ tối được kích hoạt khi chiến lược darkMode của Tailwind kích hoạt selector phù hợp.

Cấu hình Tailwind

Chiến lược Class (Khuyến khích)

Thiết lập darkMode: "class" trong tệp cấu hình Tailwind của bạn. Chế độ tối được kích hoạt khi có một lớp dark trên thẻ <html> hoặc một phần tử cha:

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  darkMode: "class",
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  plugins: [rdrpPlugin],
};

Chuyển đổi chế độ tối:

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

  return (
    <div className={dark ? "dark" : ""}>
      <button onClick={() => setDark(!dark)}>Toggle Theme</button>
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

Hoặc áp dụng lớp trên thẻ <html>:

document.documentElement.classList.toggle("dark", isDark);

Chiến lược Selector

Tailwind v3.4+ hỗ trợ darkMode: "selector", cho phép sử dụng [data-theme="dark"] hoặc bất kỳ bộ chọn tùy chỉnh nào:

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  darkMode: ["selector", '[data-theme="dark"]'],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  plugins: [rdrpPlugin],
};

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

Chiến lược Media

Thiết lập darkMode: "media" (hoặc bỏ qua — đây là mặc định) để tuân theo sở thích của hệ điều hành:

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  darkMode: "media",
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  plugins: [rdrpPlugin],
};

Không cần thiết lập thêm. Bộ chọn sẽ tuân theo prefers-color-scheme.

Biến màu

Dưới đây là các CSS custom properties được sử dụng cho theme sáng/tối:

Biến	Sáng	Tối
`--rdrp-color-bg`	`#ffffff`	`#020617`
`--rdrp-color-text`	`#0f172a`	`#f8fafc`
`--rdrp-color-text-muted`	`#64748b`	`#94a3b8`
`--rdrp-color-border`	`#e2e8f0`	`#1e293b`
`--rdrp-color-bg-hover`	`#f1f5f9`	`#1e293b`
`--rdrp-color-primary`	`#0ea5e9`	`#0ea5e9`
`--rdrp-color-text-today`	`#0ea5e9`	`#38bdf8`
`--rdrp-color-range-bg`	`#f0f9ff`	`rgba(8, 47, 73, 0.5)`

Tích hợp với Docusaurus

Nếu bạn đang sử dụng Docusaurus (sử dụng data-theme trên thẻ <html>), hãy cấu hình chiến lược selector của Tailwind:

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  darkMode: ["selector", '[data-theme="dark"]'],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  plugins: [rdrpPlugin],
};

Docusaurus thiết lập <html data-theme="dark"> khi chế độ tối đang hoạt động, và các biến CSS sẽ tự động chuyển sang giá trị tối.

Tích hợp với next-themes

import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

next-themes thêm/xóa lớp dark trên thẻ <html>. Với darkMode: "class" trong tệp cấu hình Tailwind của bạn, bộ chọn sẽ tự động chuyển đổi.

Buộc một chế độ cụ thể

Để buộc bộ chọn luôn sử dụng chế độ sáng hoặc tối, hãy bao bọc nó trong một container với lớp thích hợp:

{
  /* Luôn sáng — không có lớp "dark" ở trên */
}
<div className="">
  <DatePicker value={value} onChange={setValue} />
</div>;

{
  /* Luôn tối */
}
<div className="dark">
  <DatePicker value={value} onChange={setValue} />
</div>;

📝 Note

Khi sử dụng darkMode: "class", lớp dark phải nằm trên một phần tử cha hoặc trên thẻ <html>. Bản thân bộ chọn không quản lý việc chuyển đổi chế độ tối.