다크 모드

Tailwind v3 패키지는 CSS 사용자 정의 속성을 통한 완벽한 다크 모드 지원을 포함합니다. Tailwind 플러그인(rdrpPlugin)은 밝은 팔레트와 어두운 팔레트 사이를 자동으로 전환하는 색상 변수를 주입합니다.

작동 방식

Tailwind v3 플러그인(rdrpPlugin)은 색상 팔레트를 정의하는 CSS 사용자 정의 속성을 주입합니다. 다크 모드는 .dark 또는 [data-theme="dark"] 아래에서 이러한 변수를 재정의하여 작동합니다:

  • 라이트 모드 — :root는 기본 색상을 정의합니다 (Slate + Sky 팔레트)
  • 다크 모드 — .dark와 [data-theme="dark"]가 자동으로 색상을 재정의합니다

컴포넌트 테마는 var(--rdrp-color-*)를 통해 이를 참조하므로, Tailwind의 darkMode 전략이 적절한 선택자를 트리거할 때 다크 모드가 활성화됩니다.

Tailwind 설정

Class 전략 (권장)

Tailwind 설정에서 darkMode: "class"로 설정합니다. 다크 모드는 <html> 또는 부모 요소에 dark 클래스가 있을 때 활성화됩니다:

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],
};

다크 모드 토글:

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

또는 <html>에 클래스를 적용합니다:

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

Selector 전략

Tailwind v3.4+는 [data-theme="dark"] 또는 사용자 정의 선택자를 사용할 수 있는 darkMode: "selector"를 지원합니다:

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>

Media 전략

OS 기본 설정을 따르려면 darkMode: "media"로 설정(또는 생략 — 이것이 기본값)합니다:

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],
};

추가 설정이 필요하지 않습니다. picker는 prefers-color-scheme을 따릅니다.

색상 변수

라이트/다크 테마에 사용되는 CSS 사용자 정의 속성은 다음과 같습니다:

변수라이트다크
--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#f0f9ffrgba(8, 47, 73, 0.5)

Docusaurus 연동

(<html>에 data-theme을 사용하는) Docusaurus를 사용하는 경우, 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는 다크 모드가 활성화될 때 <html data-theme="dark">를 설정하며, CSS 변수가 자동으로 다크 값으로 전환됩니다.

next-themes 연동

app/layout.tsx
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는 <html>에 dark 클래스를 추가/제거합니다. Tailwind 설정에 darkMode: "class"가 있으면 picker가 자동으로 전환됩니다.

특정 모드 강제 적용

picker가 항상 라이트 모드나 다크 모드를 사용하도록 강제하려면, 적절한 클래스가 있는 컨테이너로 감싸세요:

{
  /* Always light — no "dark" class ancestor */
}
<div className="">
  <DatePicker value={value} onChange={setValue} />
</div>;


{
  /* Always dark */
}
<div className="dark">
  <DatePicker value={value} onChange={setValue} />
</div>;
📝 Note

darkMode: "class"를 사용할 때, dark 클래스는 부모 요소나 <html>에 있어야 합니다. picker 자체는 다크 모드 토글을 관리하지 않습니다.