ダークモード

styled パッケージには、完全なダークモードサポートが含まれています。すべてのCSS変数にダークモード用の値が定義されているため、ピッカー全体が自動的に適応します。

仕組み

ダークモードは2つのメカニズムによって有効になります:

  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)}>Toggle {dark ? "Light" : "Dark"}</button>
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

または、ピッカーに直接適用します:

<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-popuprgba(0,0,0,0.1)rgba(0,0,0,0.3)

完全なリストは CSS Variables を参照してください。

ダークモードの色のカスタマイズ

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.jsとnext-themesなど）の場合、CSSルールを追加して2つを橋渡しできます:

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