다크 모드

styled 패키지는 완전한 다크 모드 지원을 포함합니다. 모든 CSS 변수에 대해 다크 모드 값이 정의되어 있어, 전체 피커가 자동으로 적응합니다.

작동 방식

다크 모드는 두 가지 메커니즘을 통해 활성화됩니다:

  1. 시스템 환경설정 — prefers-color-scheme: dark 미디어 쿼리
  2. 수동 토글 — .rdrp-root 또는 부모 요소의 data-theme="dark" 속성

시스템 환경설정이 기본으로 적용됩니다. 만약 data-theme="light" 또는 data-theme="dark"를 명시적으로 설정하면, 시스템 환경설정을 재정의합니다.

자동 (시스템 환경설정)

설정이 필요 없습니다. 피커는 사용자의 OS 설정을 따릅니다:

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


// 자동으로 시스템의 다크/라이트 모드를 따릅니다
<DatePicker value={value} onChange={setValue} />;

CSS는 @media (prefers-color-scheme: dark)를 사용하여 모든 --rdrp-* 변수를 다크 모드 값으로 전환합니다.

수동 토글

피커의 루트 또는 상위 요소에 data-theme을 설정하세요:

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


  return (
    <div data-theme={dark ? "dark" : "light"}>
      <button onClick={() => setDark(!dark)}>토글 {dark ? "라이트" : "다크"}</button>
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

또는 피커에 직접 적용할 수도 있습니다:

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

컴파운드 컴포넌트 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-popuprgba(0,0,0,0.1)rgba(0,0,0,0.3)

전체 목록은 CSS 변수에서 확인하세요.

다크 모드 색상 커스터마이징

data-theme="dark" 선택자 또는 prefers-color-scheme 미디어 쿼리 내에서 다크 모드 변수를 재정의하세요:

/* 다크 모드 주요 색상 재정의 */
@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;
  }
}


/* 수동으로 다크 모드로 전환했을 때도 적용 */
.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;
}

라이트 모드 강제 적용

앱이 다크 모드를 지원하지 않는 경우, 피커가 시스템 환경설정에 따라 전환되는 것을 막기 위해 라이트 모드를 강제 적용하세요:

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

앱 테마와 통합

앱이 이미 다크 모드 토글을 관리하고 있다면(예: <html>의 dark 클래스), 이를 data-theme에 매핑하세요:

// 앱의 다크 모드 상태와 동기화
function ThemeSyncedPicker({ value, onChange }) {
  const isDark = useAppTheme(); // 앱의 테마 훅


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

<html class="dark">를 사용하는 프레임워크(예: next-themes를 사용하는 Next.js)의 경우, CSS 규칙을 추가하여 둘을 연결할 수 있습니다:

html.dark .rdrp-root {
  /* 여기에 다크 모드 변수 값을 복사하거나 data-theme 접근 방식을 사용하세요 */
}

또는 클래스와 함께 html 요소에 data-theme를 설정할 수도 있습니다:

// 테마 프로바이더 내부
document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");

라이브 예제

다크 모드 토글

라이트 모드와 다크 모드 간 전환을 위한 토글 버튼이 있는 DatePicker(인라인)를 보여주는 대화형 예제입니다.

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

강제 다크 모드

어두운 배경에서 data-theme="dark"를 사용하여 다크 모드로 렌더링된 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>
  );
}